@open-mercato/core 0.4.5-develop-4849712ccb → 0.4.5-develop-7f44fcf045

package/src/modules/translations/widgets/injection/translation-manager/widget.client.tsx

@@ -1,15 +1,16 @@
 "use client"
 
 import * as React from 'react'
-import Link from 'next/link'
 import { useParams } from 'next/navigation'
-import { ExternalLink, Languages } from 'lucide-react'
+import Link from 'next/link'
+import { ExternalLink, Languages, X } from 'lucide-react'
 import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules/widgets/injection'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { TranslationManager } from '../../../components/TranslationManager'
 import { extractRecordId } from '../../../lib/extract-record-id'
 
-type WidgetContext = { entityId?: string }
+type WidgetContext = { entityId?: string; recordId?: string }
 type WidgetData = Record<string, unknown> & { id?: string | number }
 
 function useTranslationAccess(): boolean {
@@ -32,43 +33,114 @@ export default function TranslationWidget({ context, data }: InjectionWidgetComp
   const entityType = context?.entityId
   const params = useParams()
   const t = useT()
+  const [open, setOpen] = React.useState(false)
   const hasAccess = useTranslationAccess()
 
-  const recordId = React.useMemo(() => {
-    if (data?.id) return String(data.id)
-    if (params) return extractRecordId(params as Record<string, string | string[]>)
-    return undefined
-  }, [data?.id, params])
+  const contextRecordId = typeof context?.recordId === 'string' && context.recordId.trim().length > 0
+    ? context.recordId.trim()
+    : undefined
+  const dataRecordId = data?.id === undefined || data.id === null ? undefined : String(data.id)
+  const routeRecordId = params ? extractRecordId(params as Record<string, string | string[]>) : undefined
+  const recordId = contextRecordId ?? dataRecordId ?? routeRecordId
+  const canRender = Boolean(entityType && recordId && hasAccess)
+
+  React.useEffect(() => {
+    if (!open || !canRender) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = prev
+    }
+  }, [canRender, open])
+
+  React.useEffect(() => {
+    if (!open || !canRender) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [canRender, open])
 
-  if (!entityType || !recordId || !hasAccess) return null
+  if (!canRender) return null
 
   return (
-    <div className="space-y-3">
-      <TranslationManager
-        mode="embedded"
-        compact
-        entityType={entityType}
-        recordId={recordId}
-        baseValues={data}
-      />
-      <div className="flex flex-wrap gap-x-4 gap-y-1 border-t pt-3">
-        <Link
-          href={`/backend/entities/system/${entityType}`}
-          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <Languages className="h-3 w-3" />
-          {t('translations.widgets.translationManager.customFieldLabels', 'Custom fields translations')}
-          <ExternalLink className="h-2.5 w-2.5" />
-        </Link>
-        <Link
-          href="/backend/config/translations"
-          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <Languages className="h-3 w-3" />
-          {t('translations.widgets.translationManager.fullManager', 'Translation manager')}
-          <ExternalLink className="h-2.5 w-2.5" />
-        </Link>
-      </div>
-    </div>
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        onClick={() => setOpen(true)}
+        aria-label={t('translations.widgets.translationManager.fullManager', 'Translation manager')}
+        title={t('translations.widgets.translationManager.fullManager', 'Translation manager')}
+      >
+        <Languages className="size-4" />
+      </Button>
+      {open ? (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/20"
+            onClick={() => setOpen(false)}
+            aria-hidden="true"
+          />
+          <div
+            className="fixed right-0 top-0 z-50 h-full w-full max-w-4xl border-l bg-background shadow-lg"
+            role="dialog"
+            aria-modal="true"
+            aria-label={t('translations.widgets.translationManager.groupLabel', 'Translations')}
+          >
+            <div className="flex h-full flex-col">
+              <div className="flex items-start justify-between gap-3 border-b px-4 py-3">
+                <div className="space-y-1">
+                  <h2 className="font-semibold">
+                    {t('translations.widgets.translationManager.groupLabel', 'Translations')}
+                  </h2>
+                  <p className="text-sm text-muted-foreground">
+                    {t('translations.widgets.translationManager.groupDescription', 'Manage translations for this record across supported locales.')}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setOpen(false)}
+                  aria-label={t('ui.dialog.close.ariaLabel', 'Close')}
+                >
+                  <X className="size-4" />
+                </Button>
+              </div>
+              <div className="flex-1 overflow-y-auto px-4 py-4">
+                <TranslationManager
+                  mode="embedded"
+                  compact
+                  entityType={entityType}
+                  recordId={recordId}
+                  baseValues={data}
+                />
+              </div>
+              <div className="flex flex-wrap gap-x-4 gap-y-1 border-t px-4 py-3">
+                <Link
+                  href={`/backend/entities/system/${encodeURIComponent(entityType!)}`}
+                  className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Languages className="size-3" />
+                  {t('translations.widgets.translationManager.customFieldLabels', 'Custom fields translations')}
+                  <ExternalLink className="size-2.5" />
+                </Link>
+                <Link
+                  href="/backend/config/translations"
+                  className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Languages className="size-3" />
+                  {t('translations.widgets.translationManager.fullManager', 'Translation manager')}
+                  <ExternalLink className="size-2.5" />
+                </Link>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
   )
 }

package/src/modules/translations/widgets/injection-table.ts

@@ -1,45 +1,31 @@
 import type { ModuleInjectionTable } from '@open-mercato/shared/modules/widgets/injection'
-import { translatableFields as catalogFields } from '../../catalog/translations'
-import { translatableFields as dictionaryFields } from '../../dictionaries/translations'
-import { translatableFields as entitiesFields } from '../../entities/translations'
-import { translatableFields as resourcesFields } from '../../resources/translations'
+import { getTranslatableFieldsRegistry } from '@open-mercato/shared/lib/localization/translatable-fields'
 
 const WIDGET_ID = 'translations.injection.translation-manager'
 
-const allFields: Record<string, string[]> = {
-  ...catalogFields,
-  ...dictionaryFields,
-  ...entitiesFields,
-  ...resourcesFields,
-}
-
-const ENTRY_TEMPLATE = {
-  widgetId: WIDGET_ID,
-  kind: 'group' as const,
-  column: 2 as const,
-  groupLabel: 'translations.widgets.translationManager.groupLabel',
-  groupDescription: 'translations.widgets.translationManager.groupDescription',
-  priority: 40,
-}
-
-const table: ModuleInjectionTable = {}
-for (const entityType of Object.keys(allFields)) {
+function addEntitySpots(table: ModuleInjectionTable, entityType: string): void {
   const [module, entitySlug] = entityType.split(':')
-  if (!module || !entitySlug) continue
+  if (!module || !entitySlug) return
 
-  // Full form: crud-form:catalog.catalog_product (auto-generated by CrudForm from entityId)
-  const fullSpot = `crud-form:${module}.${entitySlug}`
-  table[fullSpot] = [{ ...ENTRY_TEMPLATE }]
+  const fullSpot = `crud-form:${module}.${entitySlug}:header`
+  table[fullSpot] = WIDGET_ID
 
-  // Short form: crud-form:catalog.product (hardcoded in some pages)
   const prefix = `${module}_`
-  if (entitySlug.startsWith(prefix)) {
-    const shortSpot = `crud-form:${module}.${entitySlug.slice(prefix.length)}`
-    if (shortSpot !== fullSpot) {
-      table[shortSpot] = [{ ...ENTRY_TEMPLATE }]
-    }
+  if (!entitySlug.startsWith(prefix)) return
+
+  const shortSpot = `crud-form:${module}.${entitySlug.slice(prefix.length)}:header`
+  if (shortSpot !== fullSpot) {
+    table[shortSpot] = WIDGET_ID
+  }
+}
+
+export function buildInjectionTable(allFields: Record<string, string[]> = getTranslatableFieldsRegistry()): ModuleInjectionTable {
+  const table: ModuleInjectionTable = {}
+  for (const entityType of Object.keys(allFields)) {
+    addEntitySpots(table, entityType)
   }
+  return table
 }
 
-export const injectionTable: ModuleInjectionTable = table
+export const injectionTable: ModuleInjectionTable = buildInjectionTable()
 export default injectionTable