@open-mercato/core 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/src/modules/translations/components/TranslationDrawerAction.tsx

@@ -1,8 +1,16 @@
 "use client"
 
 import * as React from 'react'
-import { Languages, X } from 'lucide-react'
+import { Languages } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { TranslationManager } from './TranslationManager'
 
@@ -24,30 +32,10 @@ export function TranslationDrawerAction({ config }: TranslationDrawerActionProps
     config?.entityType && config?.recordId && String(config.recordId).trim().length > 0,
   )
 
-  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 (!canRender) return null
 
   return (
-    <>
+    <Drawer open={open} onOpenChange={setOpen}>
       <Button
         type="button"
         variant="ghost"
@@ -58,50 +46,27 @@ export function TranslationDrawerAction({ config }: TranslationDrawerActionProps
       >
         <Languages className="size-4" />
       </Button>
-      {open ? (
-        <>
-          <div
-            className="fixed inset-0 z-overlay bg-black/20"
-            onClick={() => setOpen(false)}
-            aria-hidden="true"
+      <DrawerContent className="max-w-4xl">
+        <DrawerHeader>
+          <DrawerTitle>
+            {t('translations.widgets.translationManager.groupLabel', 'Translations')}
+          </DrawerTitle>
+          <DrawerDescription>
+            {t(
+              'translations.widgets.translationManager.groupDescription',
+              'Manage translations for this record across supported locales.',
+            )}
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <TranslationManager
+            mode="embedded"
+            entityType={config!.entityType}
+            recordId={config!.recordId}
+            baseValues={config!.baseValues}
           />
-          <div
-            className="fixed right-0 top-0 z-modal 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"
-                  entityType={config!.entityType}
-                  recordId={config!.recordId}
-                  baseValues={config!.baseValues}
-                />
-              </div>
-            </div>
-          </div>
-        </>
-      ) : null}
-    </>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
   )
 }

package/src/modules/translations/components/TranslationManager.tsx

@@ -316,7 +316,7 @@ export function TranslationManager({
             data-locale={locale}
             className={`px-3 py-1.5 text-sm font-medium transition-colors ${
               isActive
-                ? 'border-b-2 border-primary text-primary'
+                ? 'border-b-2 border-accent-indigo text-foreground'
                 : 'text-muted-foreground hover:text-foreground'
             }`}
             onClick={() => setActiveLocale(locale)}
@@ -496,7 +496,7 @@ export function TranslationManager({
                   />
                 </div>
                 {entitiesError && (
-                  <p className="mt-1 text-xs text-red-600">
+                  <p className="mt-1 text-xs text-destructive">
                     {t('translations.manager.errors.loadEntities', 'Failed to load entities')}
                   </p>
                 )}

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

@@ -3,10 +3,18 @@
 import * as React from 'react'
 import { useParams } from 'next/navigation'
 import Link from 'next/link'
-import { ExternalLink, Languages, X } from 'lucide-react'
+import { ExternalLink, Languages } 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 {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
 import { TranslationManager } from '../../../components/TranslationManager'
 import { extractRecordId } from '../../../lib/extract-record-id'
 
@@ -44,30 +52,10 @@ export default function TranslationWidget({ context, data }: InjectionWidgetComp
   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 (!canRender) return null
 
   return (
-    <>
+    <Drawer open={open} onOpenChange={setOpen}>
       <Button
         type="button"
         variant="ghost"
@@ -78,69 +66,50 @@ export default function TranslationWidget({ context, data }: InjectionWidgetComp
       >
         <Languages className="size-4" />
       </Button>
-      {open ? (
-        <>
-          <div
-            className="fixed inset-0 z-overlay bg-black/20"
-            onClick={() => setOpen(false)}
-            aria-hidden="true"
+      <DrawerContent className="max-w-4xl">
+        <DrawerHeader>
+          <DrawerTitle>
+            {t('translations.widgets.translationManager.groupLabel', 'Translations')}
+          </DrawerTitle>
+          <DrawerDescription>
+            {t(
+              'translations.widgets.translationManager.groupDescription',
+              'Manage translations for this record across supported locales.',
+            )}
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <TranslationManager
+            mode="embedded"
+            compact
+            entityType={entityType}
+            recordId={recordId}
+            baseValues={data}
           />
-          <div
-            className="fixed right-0 top-0 z-modal 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')}
+        </DrawerBody>
+        {/* Custom footer: 2 inline link affordances (not action buttons),
+            wrap-friendly + left-aligned. DS DrawerFooter layouts assume
+            buttons in the trailing slot, so we hand-roll the row with
+            the DrawerFooter padding convention (`px-6 pt-4 pb-5`). */}
+        <div className="flex flex-wrap gap-x-4 gap-y-1 px-6 pt-4 pb-5">
+          <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"
           >
-            <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}
-    </>
+            <Languages className="size-3" />
+            {t('translations.widgets.translationManager.fullManager', 'Translation manager')}
+            <ExternalLink className="size-2.5" />
+          </Link>
+        </div>
+      </DrawerContent>
+    </Drawer>
   )
 }