Add JSON import / export

Allows exporting source and translation text of a whole project to JSON format.
Allows importing translation text for a whole project in JSON format.

Author: spaghetti-stack

koharu-rpc/src/routes/projects.rs

@@ -23,7 +23,7 @@ import {
 import { useScene } from '@/hooks/useScene'
 import { getConfig, startPipeline } from '@/lib/api/default/default'
 import { isTauri, openExternalUrl } from '@/lib/backend'
-import { exportCurrentProjectAs, importPages } from '@/lib/io/pagesIo'
+import { exportCurrentProjectAs, importPages, importTranslations } from '@/lib/io/pagesIo'
 import { closeProject, redoOp, selectAllTextNodesOnCurrentPage, undoOp } from '@/lib/io/scene'
 import { formatShortcutForDisplay, getPlatform } from '@/lib/shortcutUtils'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
@@ -165,6 +165,41 @@ export function MenuBar() {
       disabled: !hasScene,
       testId: 'menu-file-export-all-rendered',
     },
+    {
+      label: t('menu.exportSourceTexts'),
+      onSelect: () => void exportCurrentProjectAs('source_texts'),
+      disabled: !hasScene,
+      testId: 'menu-file-export-source-texts',
+    },
+    {
+      label: t('menu.exportTranslations'),
+      onSelect: () => void exportCurrentProjectAs('translations'),
+      disabled: !hasScene,
+      testId: 'menu-file-export-translations',
+    },
+    {
+      label: t('menu.importTranslations'),
+      onSelect: async () => {
+        const result = await importTranslations()
+        if (!result) return
+        if (result.errors.length > 0) {
+          window.alert(t('menu.importTranslationsErrors', { errors: result.errors.join('\n') }))
+          return
+        }
+        const skipSummary = result.skipped
+          .map((s) => `Page ${s.page}: ${s.reason}`)
+          .join('\n')
+        window.alert(
+          t('menu.importTranslationsDone', {
+            applied: result.applied,
+            skipped: result.skipped.length,
+            details: skipSummary,
+          }),
+        )
+      },
+      disabled: !hasScene,
+      testId: 'menu-file-import-translations',
+    },
   ]
 
   const helpMenuItems: MenuItem[] = [

ui/components/MenuBar.tsx

@@ -24,6 +24,7 @@ import type {
   AddImageLayerResponse,
   AppConfig,
   AppEvent,
+  ImportTranslationsResponse,
   CodexAuthStatus,
   CodexDeviceLogin,
   CodexDeviceLoginStatus,
@@ -752,6 +753,24 @@ export const getPutCurrentProjectResponseMock = (
 export const getExportCurrentProjectResponseMock = (): ArrayBuffer =>
   new ArrayBuffer(faker.number.int({ min: 1, max: 64 }))
 
+export const getImportTranslationsResponseMock = (
+  overrideResponse: Partial<Extract<ImportTranslationsResponse, object>> = {},
+): ImportTranslationsResponse => ({
+  applied: faker.number.int({ min: 0 }),
+  errors: Array.from(
+    { length: faker.number.int({ min: 1, max: 10 }) },
+    (_, i) => i + 1,
+  ).map(() => faker.string.alpha({ length: { min: 10, max: 20 } })),
+  skipped: Array.from(
+    { length: faker.number.int({ min: 1, max: 10 }) },
+    (_, i) => i + 1,
+  ).map(() => ({
+    page: faker.number.int({ min: 0 }),
+    reason: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  })),
+  ...overrideResponse,
+})
+
 export const getImportProjectResponseMock = (
   overrideResponse: Partial<Extract<ProjectSummary, object>> = {},
 ): ProjectSummary => ({
@@ -1981,6 +2000,31 @@ export const getDeleteCurrentProjectMockHandler = (
   )
 }
 
+export const getImportTranslationsMockHandler = (
+  overrideResponse?:
+    | ImportTranslationsResponse
+    | ((
+        info: Parameters<Parameters<typeof http.post>[1]>[0],
+      ) => Promise<ImportTranslationsResponse> | ImportTranslationsResponse),
+  options?: RequestHandlerOptions,
+) => {
+  return http.post(
+    '*/projects/current/import-translations',
+    async (info: Parameters<Parameters<typeof http.post>[1]>[0]) => {
+      await delay(0)
+      return HttpResponse.json(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getImportTranslationsResponseMock(),
+        { status: 200 },
+      )
+    },
+    options,
+  )
+}
+
 export const getExportCurrentProjectMockHandler = (
   overrideResponse?:
     | ArrayBuffer
@@ -2145,6 +2189,7 @@ export const getDefaultMock = () => [
   getCreateProjectMockHandler(),
   getPutCurrentProjectMockHandler(),
   getDeleteCurrentProjectMockHandler(),
+  getImportTranslationsMockHandler(),
   getExportCurrentProjectMockHandler(),
   getImportProjectMockHandler(),
   getDeleteProjectMockHandler(),

ui/lib/api/default/default.msw.ts

@@ -24,6 +24,8 @@ import type {
   AddImageLayerResponse,
   AppConfig,
   AppEvent,
+  ImportTranslationsRequest,
+  ImportTranslationsResponse,
   CodexAuthStatus,
   CodexDeviceLogin,
   CodexImageGenerationOptions,
@@ -3310,6 +3312,83 @@ export const useImportProject = <TError = unknown, TContext = unknown>(
 ): UseMutationResult<Awaited<ReturnType<typeof importProject>>, TError, void, TContext> => {
   return useMutation(getImportProjectMutationOptions(options), queryClient)
 }
+export const getImportTranslationsUrl = () => {
+  return `/api/v1/projects/current/import-translations`
+}
+
+export const importTranslations = async (
+  importTranslationsRequest: ImportTranslationsRequest,
+  options?: RequestInit,
+): Promise<ImportTranslationsResponse> => {
+  return fetchApi<ImportTranslationsResponse>(getImportTranslationsUrl(), {
+    ...options,
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    body: JSON.stringify(importTranslationsRequest),
+  })
+}
+
+export const getImportTranslationsMutationOptions = <
+  TError = unknown,
+  TContext = unknown,
+>(options?: {
+  mutation?: UseMutationOptions<
+    Awaited<ReturnType<typeof importTranslations>>,
+    TError,
+    { data: ImportTranslationsRequest },
+    TContext
+  >
+  request?: SecondParameter<typeof fetchApi>
+}): UseMutationOptions<
+  Awaited<ReturnType<typeof importTranslations>>,
+  TError,
+  { data: ImportTranslationsRequest },
+  TContext
+> => {
+  const mutationKey = ['importTranslations']
+  const { mutation: mutationOptions, request: requestOptions } = options
+    ? options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey
+      ? options
+      : { ...options, mutation: { ...options.mutation, mutationKey } }
+    : { mutation: { mutationKey }, request: undefined }
+
+  const mutationFn: MutationFunction<
+    Awaited<ReturnType<typeof importTranslations>>,
+    { data: ImportTranslationsRequest }
+  > = (props) => {
+    const { data } = props ?? {}
+
+    return importTranslations(data, requestOptions)
+  }
+
+  return { mutationFn, ...mutationOptions }
+}
+
+export type ImportTranslationsMutationResult = NonNullable<
+  Awaited<ReturnType<typeof importTranslations>>
+>
+export type ImportTranslationsMutationBody = ImportTranslationsRequest
+export type ImportTranslationsMutationError = unknown
+
+export const useImportTranslations = <TError = unknown, TContext = unknown>(
+  options?: {
+    mutation?: UseMutationOptions<
+      Awaited<ReturnType<typeof importTranslations>>,
+      TError,
+      { data: ImportTranslationsRequest },
+      TContext
+    >
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseMutationResult<
+  Awaited<ReturnType<typeof importTranslations>>,
+  TError,
+  { data: ImportTranslationsRequest },
+  TContext
+> => {
+  return useMutation(getImportTranslationsMutationOptions(options), queryClient)
+}
 export const getDeleteProjectUrl = (id: string) => {
   return `/api/v1/projects/${id}`
 }

ui/lib/api/default/default.ts

@@ -11,4 +11,6 @@ export const ExportFormat = {
   psd: 'psd',
   rendered: 'rendered',
   inpainted: 'inpainted',
+  source_texts: 'source_texts',
+  translations: 'translations',
 } as const

ui/lib/api/schemas/exportFormat.ts

@@ -0,0 +1,12 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+
+export interface ImportTranslationsRequest {
+  /** User-supplied JSON text. May be a raw object, wrapped in a
+  markdown ```json fence, or surrounded by prose. The server
+  extracts the first JSON object it can find. */
+  payload: string
+}

ui/lib/api/schemas/importTranslationsRequest.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+import type { ImportTranslationsSkip } from './importTranslationsSkip'
+
+export interface ImportTranslationsResponse {
+  /**
+   * Number of pages whose translations were applied.
+   * @minimum 0
+   */
+  applied: number
+  /** Top-level parse errors (e.g. could not extract JSON). Empty on success. */
+  errors: string[]
+  /** Per-page reasons for pages that were skipped (missing from response,
+  length mismatch, etc.). Not an error — partial success is normal. */
+  skipped: ImportTranslationsSkip[]
+}

ui/lib/api/schemas/importTranslationsResponse.ts

@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+
+export interface ImportTranslationsSkip {
+  /** @minimum 0 */
+  page: number
+  reason: string
+}

ui/lib/api/schemas/importTranslationsSkip.ts

@@ -7,6 +7,9 @@
 export * from './addImageLayerResponse'
 export * from './appConfig'
 export * from './appEvent'
+export * from './importTranslationsRequest'
+export * from './importTranslationsResponse'
+export * from './importTranslationsSkip'
 export * from './blobRef'
 export * from './codexAuthAttemptStatus'
 export * from './codexAuthStatus'

ui/lib/api/schemas/index.ts

@@ -111,6 +111,32 @@ export async function openKhrFile(): Promise<File | null> {
   }
 }
 
+/** Pick a single JSON file. */
+export async function openJsonFile(): Promise<File | null> {
+  if (isTauri()) {
+    const { open } = await import('@tauri-apps/plugin-dialog')
+    const picked = await open({
+      multiple: false,
+      filters: [{ name: 'JSON', extensions: ['json'] }],
+    })
+    if (!picked || typeof picked !== 'string') return null
+    const [file] = await readTauriFiles([picked])
+    return file ?? null
+  }
+  const { fileOpen } = await import('browser-fs-access')
+  try {
+    const result = await fileOpen({
+      multiple: false,
+      extensions: ['.json'],
+      description: 'JSON',
+    })
+    return Array.isArray(result) ? (result[0] ?? null) : result
+  } catch (e) {
+    if (isAbort(e)) return null
+    throw e
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------