From 4c17255a5891b836e8212ba669fd23bfe43b41df Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Tue, 8 Feb 2022 20:49:19 +0100
Subject: [PATCH] wip(lab): Work on i18n-next

---
 .../components/workbench/draft/error.js       | 22 ++++++++-----
 .../workbench/draft/text-on-path/index.js     |  5 ++-
 .../components/workbench/draft/text/index.js  |  5 ++-
 .../workbench/inputs/design-option-count.js   |  8 +++--
 .../workbench/inputs/design-option-list.js    |  6 ++--
 .../workbench/inputs/design-option-pct-deg.js | 10 +++---
 .../workbench/measurements/index.js           |  2 +-
 .../menu/core-settings/core-setting-bool.js   |  6 ++--
 .../menu/core-settings/core-setting-list.js   |  4 ++-
 .../menu/core-settings/core-setting-mm.js     |  6 ++--
 .../menu/core-settings/core-setting-nr.js     |  6 ++--
 .../menu/core-settings/core-setting-only.js   |  8 +++--
 .../core-settings/core-setting-sa-bool.js     | 10 +++---
 .../menu/core-settings/core-setting-sa-mm.js  |  6 ++--
 .../workbench/menu/core-settings/index.js     | 31 +++++++++++--------
 .../workbench/menu/core-settings/setting.js   | 29 ++++++++---------
 .../workbench/menu/design-options/index.js    |  4 ++-
 .../menu/design-options/option-group.js       |  4 ++-
 .../menu/design-options/option-sub-group.js   |  4 ++-
 .../workbench/menu/design-options/option.js   | 18 ++++++-----
 .../components/workbench/menu/xray/disable.js | 29 ++++++++++-------
 .../components/workbench/menu/xray/index.js   |  8 +++--
 .../components/workbench/menu/xray/list.js    | 10 +++---
 .../components/workbench/menu/xray/path.js    |  5 +--
 .../components/workbench/menu/xray/reset.js   | 25 +++++++++------
 .../freesewing.shared/config/i18n.config.mjs  |  4 +++
 26 files changed, 170 insertions(+), 105 deletions(-)

diff --git a/packages/freesewing.shared/components/workbench/draft/error.js b/packages/freesewing.shared/components/workbench/draft/error.js
index ff05f20ea30..43fc2e2f316 100644
--- a/packages/freesewing.shared/components/workbench/draft/error.js
+++ b/packages/freesewing.shared/components/workbench/draft/error.js
@@ -1,15 +1,21 @@
 import Robot from 'shared/components/robot/index.js'
 import Events from './events.js'
+import { useTranslation } from 'next-i18next'
 
-const Error = props => (
-  <div className="mt-12">
-    <div className="flex flex-row items-center justify-around">
-      <h1>{props.app.t('errors.something')}</h1>
-      <div className="max-w-96"><Robot pose='fail' embed/></div>
+const Error = props => {
+  const { t } = useTranslation(['errors'])
+
+  return (
+    <div className="mt-12">
+      <div className="flex flex-row items-center justify-around">
+        <h1>{t('errors:something')}</h1>
+        <div className="max-w-96"><Robot pose='fail' embed/></div>
+      </div>
+      <Events events={props.draft.events} />
     </div>
-    <Events events={props.draft.events} />
-  </div>
-)
+  )
+}
+
 
 export default Error
 
diff --git a/packages/freesewing.shared/components/workbench/draft/text-on-path/index.js b/packages/freesewing.shared/components/workbench/draft/text-on-path/index.js
index 29eb91d25c0..9714cfb95b5 100644
--- a/packages/freesewing.shared/components/workbench/draft/text-on-path/index.js
+++ b/packages/freesewing.shared/components/workbench/draft/text-on-path/index.js
@@ -1,9 +1,12 @@
+import { useTranslation } from 'next-i18next'
+
 const TextOnPath = (props) => {
+  const { t } = useTranslation(['app'])
   const text = []
   // Handle translation (and spaces)
   let translated = ''
   for (let string of props.path.attributes.getAsArray('data-text')) {
-    translated += props.app.t(string, false, props.locale).replace(/&quot;/g, '"') + ' '
+    translated += t(string).replace(/&quot;/g, '"') + ' '
   }
   const textPathProps = {
     xlinkHref: '#' + props.pathId,
diff --git a/packages/freesewing.shared/components/workbench/draft/text/index.js b/packages/freesewing.shared/components/workbench/draft/text/index.js
index c75044569c1..7671e38e2b1 100644
--- a/packages/freesewing.shared/components/workbench/draft/text/index.js
+++ b/packages/freesewing.shared/components/workbench/draft/text/index.js
@@ -1,9 +1,12 @@
+import { useTranslation } from 'next-i18next'
+
 const Text = (props) => {
+  const { t } = useTranslation(['app'])
   let text = []
   // Handle translation
   let translated = ''
   for (let string of props.point.attributes.getAsArray('data-text')) {
-    translated += props.app.t(string.toString(), false, props.locale).replace(/&quot;/g, '"') + ' '
+    translated += t(string.toString()).replace(/&quot;/g, '"') + ' '
   }
   // Handle muti-line text
   if (translated.indexOf('\n') !== -1) {
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-count.js b/packages/freesewing.shared/components/workbench/inputs/design-option-count.js
index d69c2693307..20bb961ec3a 100644
--- a/packages/freesewing.shared/components/workbench/inputs/design-option-count.js
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-count.js
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import ClearIcon from 'shared/components/icons/clear.js'
 import EditIcon from 'shared/components/icons/edit.js'
+import { useTranslation } from 'next-i18next'
 
 const EditCount = props => (
   <div className="form-control mb-2 w-full">
@@ -25,6 +26,7 @@ const EditCount = props => (
 
 
 const DesignOptionCount = props => {
+  const { t } = useTranslation(['app'])
   const { count, max, min } = props.pattern.config.options[props.option]
   const val = (typeof props.gist?.options?.[props.option] === 'undefined')
     ? count
@@ -53,7 +55,7 @@ const DesignOptionCount = props => {
               min={min}
               max={max}
               setEditCount={setEditCount}
-              t={props.app.t}
+              t={t}
             />
           : (
             <>
@@ -84,7 +86,7 @@ const DesignOptionCount = props => {
         <span></span>
         <div>
           <button
-            title={props.app.t('app.reset')}
+            title={t('reset')}
             className="btn btn-ghost btn-xs text-accent"
             disabled={val === count}
             onClick={reset}
@@ -92,7 +94,7 @@ const DesignOptionCount = props => {
             <ClearIcon />
           </button>
           <button
-            title={props.app.t('app.editThing', { thing: '#' })}
+            title={t('editThing', { thing: '#' })}
             className={`
               btn btn-ghost btn-xs hover:text-secondary-focus
               ${editCount
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-list.js b/packages/freesewing.shared/components/workbench/inputs/design-option-list.js
index 62f7b67fba0..46ccc526dce 100644
--- a/packages/freesewing.shared/components/workbench/inputs/design-option-list.js
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-list.js
@@ -1,7 +1,9 @@
 import { useState } from 'react'
 import ClearIcon from 'shared/components/icons/clear.js'
+import { useTranslation } from 'next-i18next'
 
 const DesignOptionList = props => {
+  const { t } = useTranslation(['app'])
   const { dflt, list } = props.pattern.config.options[props.option]
   const val = (typeof props.gist?.options?.[props.option] === 'undefined')
     ? dflt
@@ -45,12 +47,12 @@ const DesignOptionList = props => {
               `}>
                 <>&deg;</>
               </span>
-              {props.app.t(`options.${props.pattern.config.name}.${props.option}.options.${choice}`)}
+              {t(`options.${props.pattern.config.name}.${props.option}.options.${choice}`)}
             </button>
           ))}
         </div>
         <button
-          title={props.app.t('app.reset')}
+          title={t('reset')}
           className=""
           disabled={val === dflt}
           onClick={reset}
diff --git a/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js b/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
index 7476542e6c7..0b6638e227f 100644
--- a/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
+++ b/packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import ClearIcon from 'shared/components/icons/clear.js'
 import EditIcon from 'shared/components/icons/edit.js'
 import { formatMm, round } from 'shared/utils.js'
+import { useTranslation } from 'next-i18next'
 
 const EditOption = props => (
   <div className="form-control mb-2 w-full">
@@ -26,6 +27,7 @@ const EditOption = props => (
 
 
 const DesignOptionPctDeg = props => {
+  const { t } = useTranslation(['app'])
   const suffix = props.type === 'deg' ? '°' : '%'
   const factor = props.type === 'deg' ? 1 : 100
   const { max, min } = props.pattern.config.options[props.option]
@@ -50,7 +52,7 @@ const DesignOptionPctDeg = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {props.app.t(`options.${props.pattern.config.name}.${props.option}.description`, props.app.locale)}
+        {t(`options:${props.pattern.config.name}.${props.option}.description`, props.app.locale)}
       </p>
       <div className="flex flex-row justify-between">
         {editOption
@@ -60,7 +62,7 @@ const DesignOptionPctDeg = props => {
               min={min}
               max={max}
               setEditOption={setEditOption}
-              t={props.app.t}
+              t={t}
               suffix={suffix}
             />
           : (
@@ -97,7 +99,7 @@ const DesignOptionPctDeg = props => {
         </span>
         <div>
           <button
-            title={props.app.t('app.reset')}
+            title={t('reset')}
             className="btn btn-ghost btn-xs text-accent"
             disabled={val === dflt}
             onClick={reset}
@@ -105,7 +107,7 @@ const DesignOptionPctDeg = props => {
             <ClearIcon />
           </button>
           <button
-            title={props.app.t('app.editThing', { thing: suffix })}
+            title={t('editThing', { thing: suffix })}
             className={`
               btn btn-ghost btn-xs hover:text-secondary-focus
               ${editOption
diff --git a/packages/freesewing.shared/components/workbench/measurements/index.js b/packages/freesewing.shared/components/workbench/measurements/index.js
index a0cd87f56ee..fec3c8803e0 100644
--- a/packages/freesewing.shared/components/workbench/measurements/index.js
+++ b/packages/freesewing.shared/components/workbench/measurements/index.js
@@ -87,7 +87,7 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
       </details>
 
       <details>
-        <summary><h2 className="inline-block">{t('enterMeasurements')}</h2></summary>
+        <summary><h2 className="inline-block">{t('cfp:enterMeasurements')}</h2></summary>
         <div className="ml-2 pl-4 border-l-2">
           {pattern.config.measurements && (
             <>
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js
index fbb2be48d1f..99d1b669024 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-bool.js
@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import { SecText, SumButton, Li, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingBool = props => {
 
+  const { t } = useTranslation(['app'])
   const [value, setValue] = useState(props.gist[props.setting])
 
   const toggle = (evt) => {
@@ -15,9 +17,9 @@ const CoreSettingBool = props => {
       <SumButton onClick={toggle}>
         <SumDiv>
           <Deg />
-          <span>{ props.app.t(`settings.${props.setting}.title`) }</span>
+          <span>{ t(`settings.${props.setting}.title`) }</span>
         </SumDiv>
-        <SecText>{props.app.t('app.'+ (value ? 'yes' : 'no'))}</SecText>
+        <SecText>{ t(value ? 'yes' : 'no')}</SecText>
       </SumButton>
     </Li>
   )
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
index 761c57e0890..3c3e491dfea 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js
@@ -1,7 +1,9 @@
 import { useState } from 'react'
 import { Deg } from 'shared/components/workbench/menu/index.js'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingList = props => {
+  const { t } = useTranslation(['settings'])
   const { dflt, list } = props
   const val = props.gist?.[props.setting]
 
@@ -23,7 +25,7 @@ const CoreSettingList = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {props.app.t(`settings.${props.setting}.description`)}
+        {t(`settings:${props.setting}.description`)}
       </p>
       <div className="flex flex-row">
         <div className="grow">
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js
index 0b0e630b3f4..c47a8e7b9bb 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-mm.js
@@ -2,8 +2,10 @@ import { useState } from 'react'
 import { formatMm } from 'shared/utils.js'
 import ClearIcon from 'shared/components/icons/clear.js'
 import EditIcon from 'shared/components/icons/edit.js'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingMm = props => {
+  const { t } = useTranslation(['app', 'settings'])
   const { dflt, min, max } = props
   const val = props.gist?.[props.setting]
 
@@ -27,7 +29,7 @@ const CoreSettingMm = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {props.app.t(`settings.${props.setting}.description`)}
+        {t(`settings:${props.setting}.description`)}
       </p>
       <div className="flex flex-row justify-between">
         <span
@@ -58,7 +60,7 @@ const CoreSettingMm = props => {
       <div className="flex flex-row justify-between">
         <span />
         <button
-          title={props.app.t('app.reset')}
+          title={t('reset')}
           className="btn btn-ghost btn-xs text-accent"
           disabled={val === dflt}
           onClick={reset}
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js
index a4ed544c03e..77ab5242c0c 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js
@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import ClearIcon from 'shared/components/icons/clear.js'
 import EditIcon from 'shared/components/icons/edit.js'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingNr = props => {
+  const { t } = useTranslation(['app', 'settings'])
   const { dflt, min, max } = props
   const val = props.gist?.[props.setting]
 
@@ -26,7 +28,7 @@ const CoreSettingNr = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {props.app.t(`settings.${props.setting}.description`)}
+        {t(`settings:${props.setting}.description`)}
       </p>
       <div className="flex flex-row justify-between">
         <span className="opacity-50">
@@ -54,7 +56,7 @@ const CoreSettingNr = props => {
       <div className="flex flex-row justify-between">
         <span />
         <button
-          title={props.app.t('app.reset')}
+          title={t('reset')}
           className="btn btn-ghost btn-xs text-accent"
           disabled={val === dflt}
           onClick={reset}
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js
index 539e14fba0a..5bbb3efaf0f 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-only.js
@@ -1,9 +1,11 @@
 import ClearIcon from 'shared/components/icons/clear.js'
 import orderBy from 'lodash.orderby'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingOnly = props => {
+  const { t } = useTranslation(['app', 'parts', 'settings'])
   const list = props.pattern.config.draftOrder
-  const partNames = list.map(part => ({ id: part, name: props.app.t(`parts.${part}`, props.app.locale) }))
+  const partNames = list.map(part => ({ id: part, name: t(`parts:${part}`) }))
 
   const togglePart = part => {
     const parts = props.gist.only || []
@@ -21,7 +23,7 @@ const CoreSettingOnly = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {props.app.t(`settings.only.description`)}
+        {t(`settings:only.description`)}
       </p>
       <div className="flex flex-row">
         <div className="grow">
@@ -47,7 +49,7 @@ const CoreSettingOnly = props => {
       </div>
       <div className="flex flex-row-reverse">
         <button
-          title={props.app.t('app.reset')}
+          title={t('reset')}
           className="btn btn-ghost btn-xs text-accent"
           disabled={!props.gist.only || props.gist.only.length < 1}
           onClick={reset}
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js
index 6766e1fc1ba..16a844732a5 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-bool.js
@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import { SecText, SumButton, Li, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingSaBool = props => {
 
+  const { t } = useTranslation(['app', 'settings'])
   const [value, setValue] = useState(props.gist.saBool || false)
 
   const toggle = () => {
@@ -19,13 +21,13 @@ const CoreSettingSaBool = props => {
       <SumButton onClick={toggle}>
         <SumDiv>
           <Deg />
-          <span>{ props.app.t(`settings.sa.title`) }</span>
+          <span>{ t(`settings:sa.title`) }</span>
           <span className="ml-4 opacity-50">
-            [ { props.app.t(`app.yes`) }/
-            { props.app.t(`app.no`) } ]
+            [ { t(`yes`) }/
+            { t(`no`) } ]
           </span>
         </SumDiv>
-        <SecText>{props.app.t('app.'+ (value ? 'yes' : 'no'))}</SecText>
+        <SecText>{t(value ? 'yes' : 'no')}</SecText>
       </SumButton>
     </Li>
   )
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js
index 941bdfa1aeb..0ca36fe4919 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-sa-mm.js
@@ -2,8 +2,10 @@ import { useState } from 'react'
 import { formatMm } from 'shared/utils.js'
 import ClearIcon from 'shared/components/icons/clear.js'
 import EditIcon from 'shared/components/icons/edit.js'
+import { useTranslation } from 'next-i18next'
 
 const CoreSettingMm = props => {
+  const { t } = useTranslation(['app', 'settings'])
   const { dflt, min, max } = props
   const val = props.gist?.[props.setting]
 
@@ -29,7 +31,7 @@ const CoreSettingMm = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {props.app.t(`settings.sa.description`)}
+        {t(`settings.sa.description`)}
       </p>
       <div className="flex flex-row justify-between">
         <span
@@ -60,7 +62,7 @@ const CoreSettingMm = props => {
       <div className="flex flex-row justify-between">
         <span />
         <button
-          title={props.app.t('app.reset')}
+          title={t('reset')}
           className="btn btn-ghost btn-xs text-accent"
           disabled={val === dflt}
           onClick={reset}
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/index.js b/packages/freesewing.shared/components/workbench/menu/core-settings/index.js
index 81c622ab939..ef5047fdbae 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/index.js
@@ -2,6 +2,7 @@ import SettingsIcon from 'shared/components/icons/settings.js'
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import Setting from './setting.js'
 import { Ul, Details, TopSummary, TopSumTitle } from '../index.js'
+import { useTranslation } from 'next-i18next'
 
 const settings = {
   paperless: {
@@ -47,18 +48,22 @@ const settings = {
   },
 }
 
-const CoreSettings = props => (
-  <Details open>
-    <TopSummary icon={<SettingsIcon />}>
-      <TopSumTitle>{props.app.t('app.settings')}</TopSumTitle>
-      <Chevron />
-    </TopSummary>
-    <Ul>
-      {Object.keys(settings).map(setting => (
-        <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
-      ))}
-    </Ul>
-  </Details>
-)
+const CoreSettings = props => {
+  const { t } = useTranslation(['app'])
+
+  return (
+    <Details open>
+      <TopSummary icon={<SettingsIcon />}>
+        <TopSumTitle>{t('settings')}</TopSumTitle>
+        <Chevron />
+      </TopSummary>
+      <Ul>
+        {Object.keys(settings).map(setting => (
+          <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
+        ))}
+      </Ul>
+    </Details>
+  )
+}
 
 export default CoreSettings
diff --git a/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js b/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
index eef31c32db1..60b3db7664f 100644
--- a/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
+++ b/packages/freesewing.shared/components/workbench/menu/core-settings/setting.js
@@ -10,31 +10,32 @@ import SaBoolSetting from './core-setting-sa-bool.js'
 import SaMmSetting from './core-setting-sa-mm.js'
 import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
 import { SecText, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu/index.js'
+import { useTranslation } from 'next-i18next'
 
 const settings = {
   paperless: props => (
     <SecText>
-      {props.app.t(`app.${props.gist.paperless ? 'yes' : 'no'}`)}
+      {props.t(props.gist.paperless ? 'yes' : 'no')}
     </SecText>
   ),
   complete: props => (
     <SecText>
-      {props.app.t(`app.${props.gist.complete ? 'yes' : 'no'}`)}
+      {props.t(props.gist.complete ? 'yes' : 'no')}
     </SecText>
   ),
   debug: props => (
     <SecText>
-      {props.app.t(`app.${props.gist.debug ? 'yes' : 'no'}`)}
+      {props.t(props.gist.debug ? 'yes' : 'no')}
     </SecText>
   ),
   locale: props => (
     <SecText>
-      {props.app.t(`i18n.${props.gist.locale}`)}
+      {props.t(`i18n:${props.gist.locale}`)}
     </SecText>
   ),
   units: props => (
     <SecText>
-      {props.app.t(`app.${props.gist.units}Units`)}
+      {props.t(`${props.gist.units}Units`)}
     </SecText>
   ),
   margin: props => <SecText raw={formatMm(props.gist.margin, props.gist.units)} />,
@@ -49,7 +50,7 @@ const settings = {
   ),
   only: props => (props.gist?.only && props.gist.only.length > 0)
     ? <SecText>{props.gist.only.length}</SecText>
-    : <span className="text-secondary">{props.app.t('app.default')}</span>
+    : <span className="text-secondary">{props.t('default')}</span>
 }
 
 const inputs = {
@@ -57,14 +58,14 @@ const inputs = {
     {...props}
     list={props.config.list.map(key => ({
       key,
-      title: props.app.t(`i18n.${key}`)
+      title: props.t(`i18n:${key}`)
     }))}
   />,
   units: props => <ListSetting
     {...props}
     list={props.config.list.map(key => ({
       key,
-      title: props.app.t(`app.${key}Units`)
+      title: props.t(`${key}Units`)
     }))}
   />,
   margin: props => <MmSetting {...props} {...props.config} />,
@@ -81,7 +82,7 @@ const inputs = {
 }
 
 const Setting = props => {
-
+  const { t } = useTranslation(['app', 'i18n', 'settings'])
   if (props.setting === 'saBool')
     return <SaBoolSetting {...props} {...props.config} />
   if (['paperless', 'complete', 'debug', 'xray'].indexOf(props.setting) !== -1)
@@ -99,17 +100,17 @@ const Setting = props => {
             {props.setting === 'saMm'
               ? (
                 <>
-                  <span>{props.app.t(`settings.sa.title`)}</span>
-                  <span className="ml-4 opacity-50">[ {props.app.t(`app.size`)} ]</span>
+                  <span>{t(`settings:sa.title`)}</span>
+                  <span className="ml-4 opacity-50">[ {t(`size`)} ]</span>
                 </>
               )
-              : <span>{props.app.t(`settings.${props.setting}.title`)}</span>
+              : <span>{t(`settings:${props.setting}.title`)}</span>
             }
           </SumDiv>
-          <Value setting={props.setting} {...props} />
+          <Value setting={props.setting} {...props} t={t}/>
           <Chevron />
         </Summary>
-        <Input {...props} />
+        <Input {...props} t={t} />
       </Details>
     </Li>
   )
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/index.js b/packages/freesewing.shared/components/workbench/menu/design-options/index.js
index 321dad6a005..57bb34081a0 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/index.js
@@ -2,13 +2,15 @@ import OptionsIcon from 'shared/components/icons/options.js'
 import { Chevron } from 'shared/components/navigation/primary.js'
 import OptionGroup from './option-group'
 import { Ul, Details, TopSummary, TopSumTitle } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
 const DesignOptions = props => {
+  const { t } = useTranslation(['app'])
 
   return (
     <Details open>
       <TopSummary icon={<OptionsIcon />}>
-        <TopSumTitle>{props.app.t('app.designOptions')}</TopSumTitle>
+        <TopSumTitle>{('designOptions')}</TopSumTitle>
         <Chevron />
       </TopSummary>
       <Ul className="pl-5 list-inside">
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js b/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
index 39d132344b5..c04d2660341 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option-group.js
@@ -2,8 +2,10 @@ import { Chevron } from 'shared/components/navigation/primary.js'
 import Option from './option'
 import OptionSubGroup from './option-sub-group'
 import { Li, Ul, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
 const OptionGroup = props => {
+  const { t } = useTranslation(['app'])
   const config = props.config || props.pattern.config.optionGroups[props.group]
   return (
     <Li>
@@ -12,7 +14,7 @@ const OptionGroup = props => {
           <SumDiv>
             <Deg />
             <span className="font-bold">
-              { props.app.t(`optiongroups.${props.group}`) }
+              { t(`optiongroups.${props.group}`) }
             </span>
           </SumDiv>
           <Chevron />
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js b/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
index ccc52c7c09b..9eee8c4a142 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option-sub-group.js
@@ -1,15 +1,17 @@
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import Option from './option'
 import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
 const OptionSubGroup = props => {
+  const { t } = useTranslation(['app'])
   return Object.keys(props.sub).map(name => (
     <Li>
       <Details>
         <Summary>
           <SumDiv>
             <Deg />
-            <span className="font-bold">{ props.app.t(`optiongroups.${name}`) }</span>
+            <span className="font-bold">{ t(`optiongroups.${name}`) }</span>
           </SumDiv>
           <Chevron />
         </Summary>
diff --git a/packages/freesewing.shared/components/workbench/menu/design-options/option.js b/packages/freesewing.shared/components/workbench/menu/design-options/option.js
index 5394e8ce202..fc2552c0552 100644
--- a/packages/freesewing.shared/components/workbench/menu/design-options/option.js
+++ b/packages/freesewing.shared/components/workbench/menu/design-options/option.js
@@ -4,6 +4,7 @@ import CountOption from 'shared/components/workbench/inputs/design-option-count'
 import ListOption from 'shared/components/workbench/inputs/design-option-list'
 import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
 import { Li, Ul, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
 const values = {
   pct: props => {
@@ -34,8 +35,8 @@ const values = {
           : 'text-accent'
       }>
         {props.gist?.options?.[props.option]
-          ? props.app.t('app.yes')
-          : props.app.t('app.no')
+          ? props.t('app.yes')
+          : props.t('app.no')
         }
       </span>
     )
@@ -52,8 +53,8 @@ const values = {
     const current = props.gist?.options?.[props.option]
     const prefix = `options.${props.pattern.config.name}.${props.option}.options.`
     return (dflt==current || typeof current === 'undefined')
-      ? <span className="text-secondary">{props.app.t(prefix+dflt)}</span>
-      : <span className="text-accent">{props.app.t(prefix+current)}</span>
+      ? <span className="text-secondary">{props.t(prefix+dflt)}</span>
+      : <span className="text-accent">{props.t(prefix+current)}</span>
   },
   deg: props => {
     const dflt = props.pattern.config.options[props.option].deg
@@ -83,6 +84,7 @@ const inputs = {
 
 
 const Option = props => {
+  const { t } = useTranslation(['app'])
   const type = optionType(props.pattern.config.options[props.option])
   const Input = inputs[type]
   const Value = values[type]
@@ -102,10 +104,10 @@ const Option = props => {
           <SumDiv>
             <Deg />
             <span>
-              { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
+              { t(`options.${props.pattern.config.name}.${props.option}.title`) }
             </span>
           </SumDiv>
-          <Value type={type} {...props} />
+          <Value type={type} {...props} t={t} />
         </SumButton>
       </Li>
     ) : (
@@ -115,10 +117,10 @@ const Option = props => {
             <SumDiv>
               <Deg />
               <span>
-                { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
+                { t(`options.${props.pattern.config.name}.${props.option}.title`) }
               </span>
             </SumDiv>
-            <Value type={type} {...props} />
+            <Value type={type} {...props} t={t} />
             <Chevron w={6} m={3}/>
           </Summary>
           <Input {...props} />
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/disable.js b/packages/freesewing.shared/components/workbench/menu/xray/disable.js
index 9a3b1a3c848..5a3323fd9c2 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/disable.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/disable.js
@@ -1,16 +1,21 @@
 import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
-const DisableXray = props => (
-  <Li>
-    <SumButton onClick={() => props.updateGist(['xray', 'enabled'], false)}>
-      <SumDiv>
-        <Deg />
-        <span>
-          {props.app.t('cfp.thingIsEnabled', { thing: props.app.t('settings.xray.title') })}
-        </span>
-      </SumDiv>
-    </SumButton>
-  </Li>
-)
+const DisableXray = props => {
+  const { t } = useTranslation(['cfp', 'settings'])
+
+  return (
+    <Li>
+      <SumButton onClick={() => props.updateGist(['xray', 'enabled'], false)}>
+        <SumDiv>
+          <Deg />
+          <span>
+            {t('cfp:thingIsEnabled', { thing: t('settings:xray.title') })}
+          </span>
+        </SumDiv>
+      </SumButton>
+    </Li>
+  )
+}
 
 export default DisableXray
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/index.js b/packages/freesewing.shared/components/workbench/menu/xray/index.js
index 03c6d87bd0d..d213616ba44 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/index.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/index.js
@@ -4,8 +4,10 @@ import Reset from './reset.js'
 import Disable from './disable.js'
 import List from './list.js'
 import { Ul, Details, TopSummary } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
 const Xray = props => {
+  const { t } = useTranslation(['app', 'settings'])
 
   return (
     <Details open>
@@ -14,7 +16,7 @@ const Xray = props => {
           ? (
             <>
               <span className={`grow ${linkClasses} hover:cursor-resize font-bold uppercase`}>
-                {props.app.t('settings.xray.title')}
+                {t('settings:xray.title')}
               </span>
               <Chevron />
             </>
@@ -24,10 +26,10 @@ const Xray = props => {
               className={`grow ${linkClasses} hover:cursor-resize uppercase font-bold text-left`}
               onClick={() => props.updateGist(['xray', 'enabled'], true)}
             >
-              {props.app.t('settings.xray.title')}
+              {t('settings:xray.title')}
             </button>
             <span className="text-normal text-secondary">
-              {props.app.t('cfp.thingIsDisabled', { thing: props.app.t('settings.xray.title') })}
+              {t('cfp:thingIsDisabled', { thing: t('settings:xray.title') })}
             </span>
             </>
           )
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/list.js b/packages/freesewing.shared/components/workbench/menu/xray/list.js
index aa67a5e96d2..1134dee3be3 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/list.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/list.js
@@ -5,6 +5,7 @@ import SearchIcon from 'shared/components/icons/search.js'
 import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
 import Path from './path.js'
 import Point from './point.js'
+import { useTranslation } from 'next-i18next'
 
 const types = {
   paths: Path,
@@ -12,8 +13,9 @@ const types = {
 }
 
 const XrayList = props => {
+  const { t } = useTranslation(['app', 'parts'])
 
-  let title = props.app.t(`parts.${props.partName}`)
+  let title = t(`parts.${props.partName}`)
   if (title !== props.partName || true) title + ` (${props.partName})`
 
   const part = props.gist.xray.parts[props.partName]
@@ -36,7 +38,7 @@ const XrayList = props => {
           </SumDiv>
           <button
             className={`px-3 hover:text-secondary-focus ${only ? 'text-accent' : 'text-secondary'}`}
-            title={props.app.t('app.filter')}
+            title={t('filter')}
             onClick={only
               ? () => props.unsetGist(['only'])
               : () => props.updateGist(['only'], [props.partName])
@@ -111,14 +113,14 @@ const XrayList = props => {
                             pathName={id}
                             partName={props.partName}
                             draft={props.draft}
-                            t={props.app.t}
+                            t={t}
                             units={props.gist.units}
                           />}
                           {type === 'points' && <Point
                             pointName={id}
                             partName={props.partName}
                             draft={props.draft}
-                            t={props.app.t}
+                            t={t}
                           />}
                         </Details>
                       </Li>
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/path.js b/packages/freesewing.shared/components/workbench/menu/xray/path.js
index 53a86518683..b24642e62a4 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/path.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/path.js
@@ -6,14 +6,15 @@ import Ops from './path-ops.js'
 const XrayPath = ({ pathName, partName, draft, t, units }) => {
   const path = draft?.parts?.[partName]?.paths?.[pathName]
 
+  if (!path) return null
   return (
     <Ul>
-      <Attributes attr={path.attributes} />
+      <Attributes attr={path?.attributes} />
       <Li>
         <NoSumDiv>
           <Deg />
           <span className="font-bold mr-2">path.render =</span>
-          <span>{JSON.stringify(path.render)}</span>
+          <span>{JSON.stringify(path?.render)}</span>
         </NoSumDiv>
       </Li>
       <Li>
diff --git a/packages/freesewing.shared/components/workbench/menu/xray/reset.js b/packages/freesewing.shared/components/workbench/menu/xray/reset.js
index 299d3eef173..96652d51818 100644
--- a/packages/freesewing.shared/components/workbench/menu/xray/reset.js
+++ b/packages/freesewing.shared/components/workbench/menu/xray/reset.js
@@ -1,14 +1,19 @@
 import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
+import { useTranslation } from 'next-i18next'
 
-const ResetXray = props =>  (
-  <Li>
-    <SumButton onClick={() => props.updateGist(['xray'], { enabled: true })}>
-      <SumDiv>
-        <Deg />
-        <span>{ props.app.t(`app.reset`) }</span>
-      </SumDiv>
-    </SumButton>
-  </Li>
-)
+const ResetXray = props =>  {
+  const { t } = useTranslation(['app'])
+
+  return (
+    <Li>
+      <SumButton onClick={() => props.updateGist(['xray'], { enabled: true })}>
+        <SumDiv>
+          <Deg />
+          <span>{ t(`reset`) }</span>
+        </SumDiv>
+      </SumButton>
+    </Li>
+  )
+}
 
 export default ResetXray
diff --git a/packages/freesewing.shared/config/i18n.config.mjs b/packages/freesewing.shared/config/i18n.config.mjs
index 49cc0519090..46ad0bbbf2b 100644
--- a/packages/freesewing.shared/config/i18n.config.mjs
+++ b/packages/freesewing.shared/config/i18n.config.mjs
@@ -4,6 +4,10 @@ const i18n = {
   defaultLocale: 'en',
   locales: ['en', 'de', 'es', 'fr', 'nl'],
   defaultNS: 'app',
+  interpolation: {
+    prefix: '{',
+    suffix: '}',
+  }
 }
 
 export default i18n