@prenta/admin 2.1.0 → 2.3.0

package/src/__tests__/components/document-locale-switcher.test.tsx

@@ -0,0 +1,111 @@
+// @vitest-environment happy-dom
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { DocumentLocaleSwitcher } from '../../components/DocumentLocaleSwitcher.js'
+import { LocaleProvider } from '../../components/LocaleProvider.js'
+import { cmsApi } from '../../lib/api.js'
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: vi.fn(),
+}))
+
+const cmsApiMock = vi.mocked(cmsApi)
+
+const locales = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', label: 'English' },
+      { code: 'es', label: 'Spanish' },
+    ],
+  },
+}
+
+function renderSwitcher(onNavigate = vi.fn()) {
+  render(
+    <LocaleProvider config={locales}>
+      <DocumentLocaleSwitcher
+        collection="pages"
+        documentId="page-1"
+        canCreate
+        editorPath={(id) => `/pages/${id}/edit`}
+        onNavigate={onNavigate}
+      />
+    </LocaleProvider>,
+  )
+  return onNavigate
+}
+
+describe('DocumentLocaleSwitcher', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    cmsApiMock.mockResolvedValue({
+      data: {
+        locale: 'en',
+        translations: [{ id: 'page-1', locale: 'en', status: 'PUBLISHED', title: 'About' }],
+      },
+      status: 200,
+    })
+  })
+
+  it('hides itself when the site has a single locale', () => {
+    render(
+      <LocaleProvider
+        config={{ i18n: { defaultLocale: 'en', locales: [{ code: 'en', label: 'English' }] } }}
+      >
+        <DocumentLocaleSwitcher
+          collection="pages"
+          documentId="page-1"
+          canCreate
+          editorPath={(id) => `/pages/${id}/edit`}
+          onNavigate={vi.fn()}
+        />
+      </LocaleProvider>,
+    )
+    expect(screen.queryByRole('button', { name: /Translations/ })).toBeNull()
+  })
+
+  it('opens an existing translation', async () => {
+    cmsApiMock.mockResolvedValue({
+      data: {
+        locale: 'en',
+        translations: [
+          { id: 'page-1', locale: 'en', status: 'PUBLISHED', title: 'About' },
+          { id: 'page-es', locale: 'es', status: 'DRAFT', title: 'About' },
+        ],
+      },
+      status: 200,
+    })
+    const onNavigate = renderSwitcher()
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Translations, English' })).toBeTruthy(),
+    )
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Translations, English' }), {
+      key: 'Enter',
+    })
+    fireEvent.click(screen.getByRole('menuitem', { name: /Spanish/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/pages/page-es/edit')
+    expect(cmsApiMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('creates a draft and opens it', async () => {
+    const onNavigate = renderSwitcher()
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Translations, English' })).toBeTruthy(),
+    )
+    cmsApiMock.mockResolvedValueOnce({
+      data: { id: 'page-es', locale: 'es', created: true },
+      status: 201,
+    })
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Translations, English' }), {
+      key: 'Enter',
+    })
+    fireEvent.click(screen.getByRole('menuitem', { name: /Spanish/ }))
+    await waitFor(() => expect(onNavigate).toHaveBeenCalledWith('/pages/page-es/edit'))
+    expect(cmsApiMock).toHaveBeenLastCalledWith('/collections/pages/page-1/translations', {
+      method: 'POST',
+      body: JSON.stringify({ locale: 'es' }),
+    })
+  })
+})

package/src/components/BatchAiActions.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+import { ConfirmDialog } from './ui/ConfirmDialog.js'
+
+type BatchOperation = 'meta' | 'alt-text' | 'summarize'
+
+const LABELS: Record<BatchOperation, string> = {
+  meta: 'Meta descriptions',
+  'alt-text': 'Alt text',
+  summarize: 'Summaries',
+}
+
+interface BatchAiActionsProps {
+  documents: Array<{ collection: string; id: string }>
+  onQueued?: () => void
+  buttonClassName?: string
+}
+
+/**
+ * Queues a list-view AI batch after a confirm that names the daily cap.
+ * The server writes field drafts and does not publish.
+ */
+export function BatchAiActions({ documents, onQueued, buttonClassName }: BatchAiActionsProps) {
+  const [operation, setOperation] = useState<BatchOperation | null>(null)
+  const [busy, setBusy] = useState(false)
+  const buttonClass =
+    buttonClassName ??
+    'text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors'
+
+  async function confirm() {
+    if (!operation || busy) return
+    setBusy(true)
+    const result = await cmsApi<{ jobId: string; count: number }>('/ai/batch', {
+      method: 'POST',
+      body: JSON.stringify({ operation, documents }),
+    })
+    setBusy(false)
+    setOperation(null)
+    if (result.error || !result.data?.jobId) {
+      toast.error(result.error ?? 'Could not queue the batch')
+      return
+    }
+    toast.success(
+      `Queued ${LABELS[operation].toLowerCase()} for ${result.data.count} ${result.data.count === 1 ? 'document' : 'documents'}`,
+    )
+    onQueued?.()
+  }
+
+  return (
+    <>
+      {(Object.keys(LABELS) as BatchOperation[]).map((key) => (
+        <button
+          key={key}
+          type="button"
+          disabled={busy || documents.length === 0}
+          onClick={() => setOperation(key)}
+          className={buttonClass}
+        >
+          {LABELS[key]}
+        </button>
+      ))}
+      <ConfirmDialog
+        open={operation !== null}
+        onClose={() => {
+          if (!busy) setOperation(null)
+        }}
+        onConfirm={() => {
+          void confirm()
+        }}
+        title={operation ? `Write ${LABELS[operation].toLowerCase()}?` : 'Write drafts?'}
+        description={
+          operation
+            ? `This queues ${LABELS[operation].toLowerCase()} for ${documents.length} selected ${documents.length === 1 ? 'document' : 'documents'}. Each document uses one request against the daily AI cap. Nothing is published.`
+            : ''
+        }
+        confirmLabel={busy ? 'Queuing…' : 'Queue drafts'}
+      />
+    </>
+  )
+}

package/src/components/DocumentLocaleSwitcher.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDown, Globe } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
+import { useLocale } from './LocaleProvider.js'
+
+interface TranslationSibling {
+  id: string
+  locale: string | null
+  status: string
+  title: string | null
+}
+
+interface TranslationList {
+  locale: string | null
+  translations: TranslationSibling[]
+}
+
+interface TranslationDraft {
+  id: string
+  locale: string
+  created: boolean
+}
+
+interface DocumentLocaleSwitcherProps {
+  collection: string
+  documentId: string
+  canCreate: boolean
+  editorPath: (id: string) => string
+  onNavigate: (path: string) => void
+}
+
+/**
+ * Switches the open document to another locale, creating a draft translation
+ * when that locale does not exist yet. Hidden when the site has fewer than
+ * two locales — the header language control is a different setting.
+ */
+export function DocumentLocaleSwitcher({
+  collection,
+  documentId,
+  canCreate,
+  editorPath,
+  onNavigate,
+}: DocumentLocaleSwitcherProps) {
+  const { locales } = useLocale()
+  const enabled = locales.length > 1
+  const [currentLocale, setCurrentLocale] = useState<string | null>(null)
+  const [siblings, setSiblings] = useState<TranslationSibling[]>([])
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    if (!enabled) return
+    let cancelled = false
+    cmsApi<TranslationList>(
+      `/collections/${encodeURIComponent(collection)}/${encodeURIComponent(documentId)}/translations`,
+    ).then((result) => {
+      if (cancelled || !result.data) return
+      setCurrentLocale(result.data.locale)
+      setSiblings(result.data.translations)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [collection, documentId, enabled])
+
+  if (!enabled) return null
+
+  const current = locales.find((locale) => locale.code === currentLocale)
+  const label = current?.code.toUpperCase() ?? 'Locale'
+
+  async function choose(code: string) {
+    const sibling = siblings.find((row) => row.locale === code)
+    if (sibling) {
+      if (sibling.id !== documentId) onNavigate(editorPath(sibling.id))
+      return
+    }
+    if (!canCreate || busy) return
+    setBusy(true)
+    const result = await cmsApi<TranslationDraft>(
+      `/collections/${encodeURIComponent(collection)}/${encodeURIComponent(documentId)}/translations`,
+      { method: 'POST', body: JSON.stringify({ locale: code }) },
+    )
+    setBusy(false)
+    if (result.error || !result.data?.id) {
+      toast.error(result.error ?? 'Could not create the translation')
+      return
+    }
+    onNavigate(editorPath(result.data.id))
+  }
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          disabled={busy}
+          aria-label={`Translations, ${current?.label ?? 'locale not set'}`}
+          title="Open or create a translation"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex shrink-0 items-center gap-1 rounded-lg px-2 py-1 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Globe className="h-4 w-4" aria-hidden />
+          {label}
+          <ChevronDown className="h-3.5 w-3.5" aria-hidden />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
+        <DropdownMenu.Content
+          align="start"
+          sideOffset={6}
+          className="border-border bg-popover z-[120] min-w-40 rounded-lg border p-1 shadow-md"
+        >
+          {locales.map((locale) => {
+            const sibling = siblings.find((row) => row.locale === locale.code)
+            const isCurrent = locale.code === currentLocale
+            const canChoose = Boolean(sibling) || canCreate
+            return (
+              <DropdownMenu.Item
+                key={locale.code}
+                disabled={!canChoose || busy}
+                onSelect={() => {
+                  void choose(locale.code)
+                }}
+                className="hover:bg-accent focus:bg-accent data-[disabled]:text-muted-foreground flex cursor-pointer items-center justify-between gap-3 rounded-md px-2.5 py-1.5 text-sm outline-none data-[disabled]:cursor-not-allowed"
+              >
+                <span>{locale.label}</span>
+                <span className="text-muted-foreground text-xs">
+                  {isCurrent ? 'Current' : sibling ? sibling.status : 'New draft'}
+                </span>
+              </DropdownMenu.Item>
+            )
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

package/src/views/CollectionList.tsx

@@ -12,6 +12,7 @@ import {
 } from 'lucide-react'
 import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { toast } from 'sonner'
+import { BatchAiActions } from '../components/BatchAiActions.js'
 import { cmsApi } from '../lib/api.js'
 import { useApiData } from '../lib/useApiData.js'
 import { useVirtualWindow, VirtualTablePadding } from '../components/virtual-window.js'
@@ -501,6 +502,11 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
             >
               Unpublish
             </button>
+            <BatchAiActions
+              documents={[...selected].map((id) => ({ collection: collectionSlug, id }))}
+              onQueued={() => setSelected(new Set())}
+              buttonClassName="rounded-lg px-3 py-1.5 text-sm"
+            />
             <button
               onClick={() => bulkAction('delete')}
               className="rounded-lg px-3 py-1.5 text-sm text-white"

package/src/views/Pages/PagesListView.tsx

@@ -19,6 +19,7 @@ import {
   X,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { BatchAiActions } from '../../components/BatchAiActions.js'
 import { useVirtualWindow, VirtualTablePadding } from '../../components/virtual-window.js'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { adminPortalContainer } from '../../lib/portal-container.js'
@@ -667,6 +668,8 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           onPublish={() => runBulkStatus('PUBLISHED')}
           onDraft={() => runBulkStatus('DRAFT')}
           onAddTag={(slug) => runBulkTag(slug, 'add')}
+          documents={selectedPages.map((page) => ({ collection: 'pages', id: page.id }))}
+          onQueued={() => setSelected(new Set())}
           onRemoveTag={(slug) => runBulkTag(slug, 'remove')}
           onDelete={() => setPendingDelete(true)}
           deletableCount={deletablePages.length}
@@ -1154,6 +1157,8 @@ function BulkActionBar({
   onAddTag,
   onRemoveTag,
   onDelete,
+  documents,
+  onQueued,
 }: {
   count: number
   tags: PageTag[]
@@ -1165,6 +1170,8 @@ function BulkActionBar({
   onAddTag: (slug: string) => void
   onRemoveTag: (slug: string) => void
   onDelete: () => void
+  documents: Array<{ collection: string; id: string }>
+  onQueued: () => void
 }) {
   return (
     <div className="border-primary/30 bg-primary/5 flex flex-wrap items-center gap-2 rounded-lg border px-4 py-2">
@@ -1186,6 +1193,11 @@ function BulkActionBar({
       </button>
       <TagMenu label="Add tag" tags={tags} onPick={onAddTag} />
       <TagMenu label="Remove tag" tags={tags} onPick={onRemoveTag} />
+      <BatchAiActions
+        documents={documents}
+        onQueued={onQueued}
+        buttonClassName="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
+      />
       <button
         type="button"
         onClick={onDelete}

package/src/views/Posts/PostsListView.tsx

@@ -16,6 +16,7 @@ import {
   X,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { BatchAiActions } from '../../components/BatchAiActions.js'
 import { useVirtualWindow, VirtualTablePadding } from '../../components/virtual-window.js'
 import {
   bulkDeletePosts,
@@ -345,6 +346,8 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
           onPublish={() => runBulkUpdate('PUBLISHED')}
           onDraft={() => runBulkUpdate('DRAFT')}
           onDelete={() => setPendingBulk('delete')}
+          documents={selectedPosts.map((post) => ({ collection: post.postTypeId, id: post.id }))}
+          onQueued={() => setSelected(new Set())}
         />
       )}
 
@@ -746,12 +749,16 @@ function BulkActionBar({
   onPublish,
   onDraft,
   onDelete,
+  documents,
+  onQueued,
 }: {
   count: number
   onClear: () => void
   onPublish: () => void
   onDraft: () => void
   onDelete: () => void
+  documents: Array<{ collection: string; id: string }>
+  onQueued: () => void
 }) {
   return (
     <div className="border-primary/30 bg-primary/5 flex items-center gap-2 rounded-lg border px-4 py-2">
@@ -771,6 +778,7 @@ function BulkActionBar({
       >
         Move to draft
       </button>
+      <BatchAiActions documents={documents} onQueued={onQueued} />
       <button
         type="button"
         onClick={onDelete}

package/src/views/page-editor/EditorTopBar.tsx

@@ -106,6 +106,8 @@ interface EditorTopBarProps {
   onRedo?: () => void
   canUndo?: boolean
   canRedo?: boolean
+  /** Locale switcher for this document. Hidden by the caller when unused. */
+  localeControl?: ReactNode
   onSubmitForReview: () => void
   onApprove: () => void
   onRequestChanges: (note: string) => void
@@ -160,6 +162,7 @@ export function EditorTopBar({
   onRedo,
   canUndo = false,
   canRedo = false,
+  localeControl,
   onSubmitForReview,
   onApprove,
   onRequestChanges,
@@ -325,6 +328,7 @@ export function EditorTopBar({
             </button>
           </span>
         )}
+        {localeControl ? <span className="ml-1 inline-flex shrink-0">{localeControl}</span> : null}
       </div>
 
       {/* Right controls */}

package/src/views/page-editor/PageSectionEditor.tsx

@@ -9,6 +9,7 @@ import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js
 import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
 import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
+import { DocumentLocaleSwitcher } from '../../components/DocumentLocaleSwitcher.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistoryPanel } from './VersionHistoryPanel.js'
 import { useDebouncedAutosave } from './autosave.js'
@@ -993,6 +994,17 @@ export function PageSectionEditor({
           onRedo={effectiveCanEdit ? handleRedo : undefined}
           canUndo={canUndo}
           canRedo={canRedo}
+          localeControl={
+            page.id ? (
+              <DocumentLocaleSwitcher
+                collection={PAGES_COLLECTION}
+                documentId={page.id}
+                canCreate={effectiveCanEdit}
+                editorPath={(id) => `/pages/${id}/edit`}
+                onNavigate={guardedNavigate}
+              />
+            ) : null
+          }
           onSubmitForReview={handleSubmitForReview}
           onApprove={handleApprove}
           onRequestChanges={handleRequestChanges}

package/src/views/post-editor/PostSectionEditor.tsx

@@ -9,6 +9,7 @@ import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js
 import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
+import { DocumentLocaleSwitcher } from '../../components/DocumentLocaleSwitcher.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistoryPanel } from '../page-editor/VersionHistoryPanel.js'
 import { useDebouncedAutosave } from '../page-editor/autosave.js'
@@ -864,6 +865,17 @@ export function PostSectionEditor({
           onRedo={effectiveCanEdit ? handleRedo : undefined}
           canUndo={canUndo}
           canRedo={canRedo}
+          localeControl={
+            post.id ? (
+              <DocumentLocaleSwitcher
+                collection={postType}
+                documentId={post.id}
+                canCreate={effectiveCanEdit}
+                editorPath={(id) => `/posts/${postType}/${id}/edit`}
+                onNavigate={guardedNavigate}
+              />
+            ) : null
+          }
           onSubmitForReview={handleSubmitForReview}
           onApprove={handleApprove}
           onRequestChanges={handleRequestChanges}