@smartcat/sanity-plugin 1.3.0 → 1.4.0

package/src/tool/ProjectView.tsx

@@ -1,12 +1,8 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
-import {useClient, useRelativeTime, useSchema, useValuePreview} from 'sanity'
+import {useClient, useRelativeTime, useSchema} from 'sanity'
 import {applyImportedTranslations, prepareExport, type PendingDeletion} from './processing'
-import {getTranslatableFields, localizationMode} from '../lib/locjson/fields'
-import {serializeToLocjson} from '../lib/locjson/serialize'
-import {buildLocjsonFilename} from '../lib/locjson/filename'
-import {resolveDocumentTitle} from '../lib/documentTitle'
+import {localizationMode} from '../lib/locjson/fields'
 import type {LocalizationMode} from '../lib/locjson/types'
-import {useIntentLink} from 'sanity/router'
 import {
   Badge,
   Box,
@@ -17,9 +13,6 @@ import {
   Flex,
   Heading,
   Inline,
-  Menu,
-  MenuButton,
-  MenuItem,
   Spinner,
   Stack,
   Text,
@@ -28,19 +21,18 @@ import {
 } from '@sanity/ui'
 import {
   ArrowLeftIcon,
-  LaunchIcon,
   TrashIcon,
   PublishIcon,
   CloseIcon,
   DownloadIcon,
   SyncIcon,
   RemoveCircleIcon,
-  JsonIcon,
-  ChevronDownIcon,
 } from '@sanity/icons'
 import styled, {css, keyframes} from 'styled-components'
 import {API_VERSION} from '../lib/constants'
-import {UNTITLED} from '../lib/documentTitle'
+import {DocTitle} from './DocTitle'
+import {AddItemsSearch} from './AddItemsSearch'
+import {OpenInStudioButton, ViewLocjsonButton} from './itemActions'
 import {PROJECT_DETAIL_QUERY, type ProjectDetail, type ProjectItemRef} from './data'
 import {StatusBadge, statusLabel} from './StatusBadge'
 import {ItemProgress, languageTitle} from './ItemProgress'
@@ -71,26 +63,6 @@ function languageMappingLabel(language: SmartcatLanguage): string {
   return code === language.id ? language.id : `${language.id} → ${code}`
 }
 
-/**
- * Resolve an item's title the way the Studio does — by running the schema type's
- * `preview.prepare` — so types without a literal `title` field (e.g. field-level
- * localized docs) show the same label as in the structure tree, not 'Untitled'.
- */
-function DocTitle({doc}: {doc: ProjectItemRef['doc']}) {
-  const schema = useSchema()
-  const schemaType = doc ? schema.get(doc._type) : undefined
-  const preview = useValuePreview({
-    enabled: Boolean(doc && schemaType),
-    schemaType,
-    value: doc ? {_id: doc._id, _type: doc._type} : undefined,
-  })
-  // String-only: never fall back to the raw projected value, which is an
-  // internationalized-array object for field-level i18n types (renders as React #31).
-  const title = typeof preview.value?.title === 'string' ? preview.value.title : undefined
-  // Placeholder while the async preview resolves, so a real title isn't briefly mislabeled.
-  return <>{title ?? (preview.isLoading ? '…' : UNTITLED)}</>
-}
-
 /**
  * Statuses during which a Function is actively running, so the project shouldn't
  * be re-sent until it settles. `translating`/`sent`/`completed` are resting
@@ -128,205 +100,6 @@ function LastUpdate({date}: {date: string}) {
   )
 }
 
-/** Opens the document in the Studio. */
-function OpenInStudioButton({id, type}: {id: string; type: string}) {
-  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
-  return (
-    <Button
-      as="a"
-      href={href}
-      onClick={onClick}
-      mode="bleed"
-      icon={LaunchIcon}
-      text="Open in Studio"
-      fontSize={0}
-      padding={2}
-    />
-  )
-}
-
-/** Read-only, monospace, full-height code view for the LocJSON modal. */
-const CodeArea = styled.textarea`
-  width: 100%;
-  height: 70vh;
-  resize: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  background: transparent;
-  color: inherit;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre;
-  tab-size: 2;
-`
-
-/** Target-locale siblings of a document-level item, via translation.metadata. */
-const VIEW_SIBLINGS_QUERY = `*[_type == "translation.metadata" && references($id)][0].translations[]{"language": _key, "doc": value->}`
-
-/**
- * Dropdown that builds the LocJSON the export would produce for an item — same
- * field selection and serialize options as {@link prepareExport} — and shows it
- * (pretty-printed) in a read-only modal. Offers "Source only" (what a plain
- * export sends) plus "Source + <language>" for each target language: the
- * bilingual file the send-existing flow would upload for that language, so you
- * can inspect exactly what goes to Smartcat per language.
- */
-function ViewLocjsonButton(props: {
-  docId: string
-  type: string
-  /** Whether the export will translate the published doc (else prefer the draft). */
-  sourceIsPublished: boolean | null
-  client: {fetch: (query: string, params?: Record<string, unknown>) => Promise<unknown>}
-  schema: {get: (typeName: string) => unknown}
-  sourceLanguage: string
-  documentI18nLanguageField: string
-  fieldI18nLanguageField: string
-  /** Project target languages (Sanity locale ids). */
-  targetLanguages: string[]
-  /** Configured languages (for titles + Smartcat codes). */
-  languages: SmartcatLanguage[]
-}) {
-  const {docId, type, sourceIsPublished, client, schema, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField, targetLanguages, languages} = props
-  const [open, setOpen] = useState(false)
-  const [content, setContent] = useState<string | null>(null)
-  const [filename, setFilename] = useState<string | null>(null)
-  const [title, setTitle] = useState<string>('Source only')
-  const [error, setError] = useState<string | null>(null)
-
-  // Build the LocJSON for one variant: `targetLanguage` undefined ⇒ source-only
-  // (a plain export), otherwise the bilingual file for that Sanity locale.
-  const build = useCallback(
-    async (targetLanguage?: string) => {
-      setOpen(true)
-      setContent(null)
-      setFilename(null)
-      setError(null)
-      setTitle(targetLanguage ? `Source + ${languageTitle(languages, targetLanguage)}` : 'Source only')
-      try {
-        // Resolve the same version the export will send: the draft (fallback to
-        // published) unless the item was added from the published perspective.
-        const raw = (await client.fetch(
-          sourceIsPublished
-            ? '*[_id == $id][0]'
-            : 'coalesce(*[_id == "drafts." + $id][0], *[_id == $id][0])',
-          {id: docId},
-        )) as (Record<string, unknown> & {_id: string}) | null
-        if (!raw) throw new Error(`Document not found: ${docId}`)
-        const isDraft = typeof raw._id === 'string' && raw._id.startsWith('drafts.')
-        // Serialize under the canonical (bare) id, matching the export.
-        const doc = isDraft ? {...raw, _id: docId} : raw
-        const fields = getTranslatableFields(schema.get(type), {exclude: [documentI18nLanguageField]})
-
-        // For a bilingual variant, resolve the existing translation the same way
-        // the export does: field-level from the inline member, document-level from
-        // the target-locale sibling document.
-        let target: {language: string; doc?: Record<string, unknown> & {_id: string; _type: string}} | undefined
-        if (targetLanguage) {
-          if (localizationMode(schema.get(type)) === 'document') {
-            const variants = (await client.fetch(VIEW_SIBLINGS_QUERY, {id: docId})) as
-              | {language: string; doc: (Record<string, unknown> & {_id: string; _type: string}) | null}[]
-              | null
-            const sibling = (variants ?? []).find((v) => v.language === targetLanguage)?.doc ?? undefined
-            target = {language: targetLanguage, doc: sibling}
-          } else {
-            target = {language: targetLanguage}
-          }
-        }
-
-        const locjson = serializeToLocjson(doc as never, fields, {
-          sourceLanguage,
-          fieldLanguageKey: fieldI18nLanguageField,
-          target,
-        })
-        // Same name the export sends to Smartcat; the last path segment is the
-        // file's basename (the Smartcat "folder/" prefix can't be a local filename).
-        const smartcatCode = targetLanguage
-          ? languages.find((l) => l.id === targetLanguage)?.smartcatLanguage || targetLanguage
-          : undefined
-        const smartcatName = buildLocjsonFilename(type, docId, resolveDocumentTitle(schema, doc as never), {
-          draft: isDraft,
-          language: smartcatCode,
-        })
-        setFilename(smartcatName.split('/').pop() || smartcatName)
-        setContent(JSON.stringify(locjson, null, 2))
-      } catch (err) {
-        setError(err instanceof Error ? err.message : String(err))
-      }
-    },
-    [client, schema, docId, type, sourceIsPublished, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField, languages],
-  )
-
-  const download = useCallback(() => {
-    if (content == null || !filename) return
-    const url = URL.createObjectURL(new Blob([content], {type: 'application/json'}))
-    const anchor = document.createElement('a')
-    anchor.href = url
-    anchor.download = filename
-    anchor.click()
-    URL.revokeObjectURL(url)
-  }, [content, filename])
-
-  return (
-    <>
-      <MenuButton
-        id={`locjson-menu-${docId}`}
-        button={<Button mode="bleed" icon={JsonIcon} iconRight={ChevronDownIcon} title="View LocJSON" fontSize={0} padding={2} />}
-        menu={
-          <Menu>
-            <MenuItem text="Source only" onClick={() => build()} />
-            {targetLanguages.map((lang) => (
-              <MenuItem key={lang} text={`Source + ${languageTitle(languages, lang)}`} onClick={() => build(lang)} />
-            ))}
-          </Menu>
-        }
-        popover={{portal: true}}
-      />
-      {open && (
-        <Dialog
-          id={`locjson-${docId}`}
-          header={
-            <Flex align="center" gap={3}>
-              <Text weight="semibold">LocJSON · {type} · {title}</Text>
-              <Button
-                icon={DownloadIcon}
-                text="Download"
-                mode="ghost"
-                fontSize={1}
-                padding={2}
-                disabled={content == null}
-                onClick={download}
-              />
-            </Flex>
-          }
-          onClose={() => setOpen(false)}
-          width={3}
-        >
-          <Box padding={4}>
-            {error ? (
-              <Text size={1} muted>
-                {error}
-              </Text>
-            ) : content === null ? (
-              <Flex align="center" justify="center" padding={5}>
-                <Spinner muted />
-              </Flex>
-            ) : (
-              <CodeArea
-                readOnly
-                spellCheck={false}
-                value={content}
-                onFocus={(e) => e.currentTarget.select()}
-              />
-            )}
-          </Box>
-        </Dialog>
-      )}
-    </>
-  )
-}
-
 export function ProjectView({
   projectId,
   onBack,
@@ -1034,11 +807,16 @@ export function ProjectView({
           </Stack>
         )}
 
-        <Card padding={4} radius={2} tone="transparent" border>
-          <Text muted align="center" size={1}>
-            Add content from a document’s “⋯ → Add to translation project” menu.
-          </Text>
-        </Card>
+        <AddItemsSearch
+          projectId={projectId}
+          translatableTypes={translatableTypes}
+          existingDocIds={new Set(items.map((i) => i.docId))}
+          sourceLanguage={sourceLanguage}
+          languages={languages}
+          targetLanguages={targets}
+          documentI18nLanguageField={documentI18nLanguageField}
+          fieldI18nLanguageField={fieldI18nLanguageField}
+        />
       </Stack>
 
       {confirmDelete && (

package/src/tool/itemActions.tsx

@@ -0,0 +1,216 @@
+import {useCallback, useState} from 'react'
+import {useIntentLink} from 'sanity/router'
+import {Box, Button, Dialog, Flex, Menu, MenuButton, MenuItem, Spinner, Text} from '@sanity/ui'
+import {LaunchIcon, JsonIcon, ChevronDownIcon, DownloadIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {getTranslatableFields, localizationMode} from '../lib/locjson/fields'
+import {serializeToLocjson} from '../lib/locjson/serialize'
+import {buildLocjsonFilename} from '../lib/locjson/filename'
+import {resolveDocumentTitle} from '../lib/documentTitle'
+import {languageTitle} from './ItemProgress'
+import type {SmartcatLanguage} from '../types'
+
+/** Opens the document in the Studio. */
+export function OpenInStudioButton({id, type}: {id: string; type: string}) {
+  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
+  return (
+    <Button
+      as="a"
+      href={href}
+      onClick={onClick}
+      mode="bleed"
+      icon={LaunchIcon}
+      text="Open in Studio"
+      fontSize={0}
+      padding={2}
+    />
+  )
+}
+
+/** Read-only, monospace, full-height code view for the LocJSON modal. */
+const CodeArea = styled.textarea`
+  width: 100%;
+  height: 70vh;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+`
+
+/**
+ * Target-locale siblings of a document-level item, via translation.metadata. The
+ * member's locale lives in its language field (v5+, uuid `_key`) or in `_key`
+ * itself (v4.x) — `coalesce` reads whichever applies, per {@link fieldLanguageKey}.
+ */
+function siblingsQuery(fieldLanguageKey: string): string {
+  return `*[_type == "translation.metadata" && references($id)][0].translations[]{"language": coalesce(${fieldLanguageKey}, _key), "doc": value->}`
+}
+
+/**
+ * Dropdown that builds the LocJSON the export would produce for an item — same
+ * field selection and serialize options as {@link prepareExport} — and shows it
+ * (pretty-printed) in a read-only modal. Offers "Source only" (what a plain
+ * export sends) plus "Source + <language>" for each target language: the
+ * bilingual file the send-existing flow would upload for that language, so you
+ * can inspect exactly what goes to Smartcat per language.
+ */
+export function ViewLocjsonButton(props: {
+  docId: string
+  type: string
+  /** Whether the export will translate the published doc (else prefer the draft). */
+  sourceIsPublished: boolean | null
+  client: {fetch: (query: string, params?: Record<string, unknown>) => Promise<unknown>}
+  schema: {get: (typeName: string) => unknown}
+  sourceLanguage: string
+  documentI18nLanguageField: string
+  fieldI18nLanguageField: string
+  /** Project target languages (Sanity locale ids). */
+  targetLanguages: string[]
+  /** Configured languages (for titles + Smartcat codes). */
+  languages: SmartcatLanguage[]
+}) {
+  const {docId, type, sourceIsPublished, client, schema, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField, targetLanguages, languages} = props
+  const [open, setOpen] = useState(false)
+  const [content, setContent] = useState<string | null>(null)
+  const [filename, setFilename] = useState<string | null>(null)
+  const [title, setTitle] = useState<string>('Source only')
+  const [error, setError] = useState<string | null>(null)
+
+  // Build the LocJSON for one variant: `targetLanguage` undefined ⇒ source-only
+  // (a plain export), otherwise the bilingual file for that Sanity locale.
+  const build = useCallback(
+    async (targetLanguage?: string) => {
+      setOpen(true)
+      setContent(null)
+      setFilename(null)
+      setError(null)
+      setTitle(targetLanguage ? `Source + ${languageTitle(languages, targetLanguage)}` : 'Source only')
+      try {
+        // Resolve the same version the export will send: the draft (fallback to
+        // published) unless the item was added from the published perspective.
+        const raw = (await client.fetch(
+          sourceIsPublished
+            ? '*[_id == $id][0]'
+            : 'coalesce(*[_id == "drafts." + $id][0], *[_id == $id][0])',
+          {id: docId},
+        )) as (Record<string, unknown> & {_id: string}) | null
+        if (!raw) throw new Error(`Document not found: ${docId}`)
+        const isDraft = typeof raw._id === 'string' && raw._id.startsWith('drafts.')
+        // Serialize under the canonical (bare) id, matching the export.
+        const doc = isDraft ? {...raw, _id: docId} : raw
+        const fields = getTranslatableFields(schema.get(type), {exclude: [documentI18nLanguageField]})
+
+        // For a bilingual variant, resolve the existing translation the same way
+        // the export does: field-level from the inline member, document-level from
+        // the target-locale sibling document.
+        let target: {language: string; doc?: Record<string, unknown> & {_id: string; _type: string}} | undefined
+        if (targetLanguage) {
+          if (localizationMode(schema.get(type)) === 'document') {
+            const variants = (await client.fetch(siblingsQuery(fieldI18nLanguageField), {id: docId})) as
+              | {language: string; doc: (Record<string, unknown> & {_id: string; _type: string}) | null}[]
+              | null
+            const sibling = (variants ?? []).find((v) => v.language === targetLanguage)?.doc ?? undefined
+            target = {language: targetLanguage, doc: sibling}
+          } else {
+            target = {language: targetLanguage}
+          }
+        }
+
+        const locjson = serializeToLocjson(doc as never, fields, {
+          sourceLanguage,
+          fieldLanguageKey: fieldI18nLanguageField,
+          target,
+        })
+        // Same name the export sends to Smartcat; the last path segment is the
+        // file's basename (the Smartcat "folder/" prefix can't be a local filename).
+        const smartcatCode = targetLanguage
+          ? languages.find((l) => l.id === targetLanguage)?.smartcatLanguage || targetLanguage
+          : undefined
+        const smartcatName = buildLocjsonFilename(type, docId, resolveDocumentTitle(schema, doc as never), {
+          draft: isDraft,
+          language: smartcatCode,
+        })
+        setFilename(smartcatName.split('/').pop() || smartcatName)
+        setContent(JSON.stringify(locjson, null, 2))
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    },
+    [client, schema, docId, type, sourceIsPublished, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField, languages],
+  )
+
+  const download = useCallback(() => {
+    if (content == null || !filename) return
+    const url = URL.createObjectURL(new Blob([content], {type: 'application/json'}))
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = filename
+    anchor.click()
+    URL.revokeObjectURL(url)
+  }, [content, filename])
+
+  return (
+    <>
+      <MenuButton
+        id={`locjson-menu-${docId}`}
+        button={<Button mode="bleed" icon={JsonIcon} iconRight={ChevronDownIcon} title="View LocJSON" fontSize={0} padding={2} />}
+        menu={
+          <Menu>
+            <MenuItem text="Source only" onClick={() => build()} />
+            {targetLanguages.map((lang) => (
+              <MenuItem key={lang} text={`Source + ${languageTitle(languages, lang)}`} onClick={() => build(lang)} />
+            ))}
+          </Menu>
+        }
+        popover={{portal: true}}
+      />
+      {open && (
+        <Dialog
+          id={`locjson-${docId}`}
+          header={
+            <Flex align="center" gap={3}>
+              <Text weight="semibold">LocJSON · {type} · {title}</Text>
+              <Button
+                icon={DownloadIcon}
+                text="Download"
+                mode="ghost"
+                fontSize={1}
+                padding={2}
+                disabled={content == null}
+                onClick={download}
+              />
+            </Flex>
+          }
+          onClose={() => setOpen(false)}
+          width={3}
+        >
+          <Box padding={4}>
+            {error ? (
+              <Text size={1} muted>
+                {error}
+              </Text>
+            ) : content === null ? (
+              <Flex align="center" justify="center" padding={5}>
+                <Spinner muted />
+              </Flex>
+            ) : (
+              <CodeArea
+                readOnly
+                spellCheck={false}
+                value={content}
+                onFocus={(e) => e.currentTarget.select()}
+              />
+            )}
+          </Box>
+        </Dialog>
+      )}
+    </>
+  )
+}

package/src/tool/processing.test.ts

@@ -1,7 +1,7 @@
 import {beforeAll, describe, expect, it} from 'vitest'
 import {Schema} from '@sanity/schema'
 import {JSDOM} from 'jsdom'
-import {applyImportedTranslations, prepareExport, type ProcessingClient} from './processing'
+import {applyImportedTranslations, prepareExport, siblingsQuery, type ProcessingClient} from './processing'
 
 // processing.ts uses the browser's global DOMParser; provide one via jsdom.
 beforeAll(() => {
@@ -696,3 +696,13 @@ describe('nested + array-member field-level translation', () => {
     ])
   })
 })
+
+describe('siblingsQuery', () => {
+  // The v5+ translation.metadata member stores its locale in a language field
+  // with a uuid `_key`; reading only `_key` (the v4.x layout) missed every v5+
+  // sibling, so send-existing attached no target for document-level items.
+  it('reads the locale from the configured field, falling back to `_key` (v4.x)', () => {
+    expect(siblingsQuery('language')).toContain('"language": coalesce(language, _key)')
+    expect(siblingsQuery('_key')).toContain('"language": coalesce(_key, _key)')
+  })
+})

package/src/tool/processing.ts

@@ -153,10 +153,16 @@ const ITEMS_QUERY = `*[_id == $id][0]{
  * group, every locale variant's `{language, doc}` — the send-existing flow reads
  * each target language's sibling as the translation to upload. Document-level
  * only; field-level types keep all languages inline on the same document.
+ *
+ * The variant's locale lives in its language field (v5+, with a uuid `_key`) or
+ * in `_key` itself (v4.x); `coalesce` reads whichever applies per the configured
+ * {@link fieldLanguageKey}. Reading only `_key` misses v5+ siblings entirely.
  */
-const SIBLINGS_QUERY = `*[_type == "translation.metadata" && references($ids)]{
-  "variants": translations[]{ "language": _key, "doc": value-> }
+export function siblingsQuery(fieldLanguageKey: string): string {
+  return `*[_type == "translation.metadata" && references($ids)]{
+  "variants": translations[]{ "language": coalesce(${fieldLanguageKey}, _key), "doc": value-> }
 }`
+}
 
 export async function prepareExport({
   client,
@@ -222,7 +228,7 @@ export async function prepareExport({
     .map((item) => publishedId((item.doc as {_id: string})._id))
   if (flaggedDocLevelIds.length > 0) {
     const groups = await client.fetch<{variants: {language: string; doc: TargetDoc | null}[]}[]>(
-      SIBLINGS_QUERY,
+      siblingsQuery(fieldLanguageKey),
       {ids: flaggedDocLevelIds},
     )
     for (const group of groups ?? []) {