@prenta/admin 2.1.0 → 2.2.0

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/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}