sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/components/resources/post/content/post-create-content.js

@@ -3,23 +3,29 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { useRouter } from 'next/navigation';
 import { POST_TYPES } from 'sitero-domain';
-import { useAdmin } from '../../../../../infrastructure/admin-session/admin-context.js';
+import { POST_CUSTOM_STATE_FIELDS } from '../../../../../../../config/post.js';
+import 'mime-types';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useCommand } from '../../../../../../../shared/client/react-query/use-command.js';
-import 'mime-types';
 import 'clsx';
 import 'tailwind-merge';
 import { joinUrl } from '../../../../../../../shared/utils/join-url.js';
-import 'zod';
+import { createTranslationTextBinder } from '../../../../../applications/form/binders/create-translation-text-binder.js';
+import { createTranslationEditorBinder } from '../../../../../applications/form/binders/create-translation-editor-binder.js';
+import { createTranslationNumberBinder } from '../../../../../applications/form/binders/create-translation-number-binder.js';
+import { createTranslationObjectArrayBinder } from '../../../../../applications/form/binders/create-translation-object-array-binder.js';
 import { getImgIdsFromHtmls } from '../../../../../applications/form/get-img-ids-from-htmls.js';
 import { processContentHtml } from '../../../../../applications/form/process-content-html.js';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
 import { useParentPathname } from '../../../../../applications/ui/use-parent-pathname.js';
 import 'lucide-react';
+import { useAdmin } from '../../../../../infrastructure/admin-session/admin-context.js';
+import { getCmsLocalizedFieldErrors } from '../../../../../infrastructure/operation-result/presentation/message.js';
+import { getObjectArrayItemErrors } from '../../../../../infrastructure/operation-result/presentation/get-object-array-item-errors.js';
+import { useCmsCommand } from '../../../../../infrastructure/operation-result/use-cms-command.js';
 import '@radix-ui/react-avatar';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
@@ -37,43 +43,50 @@ import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import 'next/link';
+import { ActionButtonsCard } from '../../../ui/cards/action-buttons-card.js';
 import { Form } from '../../../ui/form/form.js';
-import { Field } from '../../../ui/form/field.js';
+import { FormField } from '../../../ui/form/form-field.js';
 import { FieldsContainer } from '../../../ui/form/containers/fields-container.js';
 import { MainFields } from '../../../ui/form/containers/main-fields.js';
 import { SideFields } from '../../../ui/form/containers/side-fields.js';
+import { NumberInput } from '../../../ui/inputs/number-input.js';
+import { Textarea } from '../../../ui/inputs/textarea.js';
 import { ControlFields } from '../../../ui/form/control-fields/control-fields.js';
-import { ActionButtonsCard } from '../../../ui/cards/action-buttons-card.js';
-import { PickModal } from '../../../ui/features/pick-modal/pick-modal.js';
+import { PickerInput } from '../../../ui/features/pick-modal/picker-input.js';
 import 'next/image';
+import { I18nFormField } from '../../../ui/i18n/i18n-form-field.js';
+import '../../../ui/inputs/switch-input.js';
+import '../../../ui/inputs/password-input.js';
+import '../../../ui/inputs/input.js';
+import { ObjectArrayInput } from '../../../ui/inputs/object-array-input.js';
 import 'intor/next';
 import { ContentContainer } from '../../../ui/layouts/content-container.js';
-import { AdminCard } from '../../admin/admin-card.js';
-import { CategoryCard } from '../category/category-card.js';
 import { CategoryTable } from '../category/category-table.js';
-import { TagCard } from '../tag/tag-card.js';
 import { TagTable } from '../tag/tag-table.js';
+import { resolveControlFieldLabel } from './resolve-control-field-label.js';
 
 function createPostCreateContent({
+  customControlFields: defaultCustomControlFields = [],
   usePostCreateFormData,
   postCreateAction,
+  AdminCard,
   AdminList,
   PostList,
   PostCard,
   FileList,
   FileCard,
   Uploader,
-  I18nTextarea,
-  I18nEditor,
-  I18nObjectArrayInput,
-  I18nNumberInput
+  Editor,
+  CategoryCard: DefaultCategoryCard,
+  TagCard,
+  webLocales
 }) {
   return function PostCreateContent({
     postType,
     parentType,
     parentLabelKey,
     isSubcategoryParent = false,
-    CategoryCard: CategoryCard$1 = CategoryCard,
+    CategoryCard = DefaultCategoryCard,
     CategoryTable: CategoryTable$1 = CategoryTable,
     tagType = POST_TYPES.TAG,
     topic,
@@ -81,12 +94,14 @@ function createPostCreateContent({
     controlMeta,
     isFetching,
     allowField,
+    customControlFields = defaultCustomControlFields,
     cancelButtonHref
   }) {
-    const { t, locale } = useTranslator();
+    const { t, locale: cmsLocale } = useTranslator();
     const router = useRouter();
     const parentPathname = useParentPathname();
     const { admin } = useAdmin();
+    const editorLocale = cmsLocale.startsWith("zh") ? "zh" : "en";
     const topicSlug = topic?.slug;
     const isFieldAllowed = (type, field, fieldRuleKey) => allowField({ topicSlug, type, field, fieldRuleKey });
     const { formData, setFormData } = usePostCreateFormData({
@@ -94,7 +109,23 @@ function createPostCreateContent({
       admin,
       topic
     });
-    const { execute, isRedirecting, errors } = useCommand(
+    const bindTranslationText = createTranslationTextBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationEditor = createTranslationEditorBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationNumber = createTranslationNumberBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationObjectArray = createTranslationObjectArrayBinder(
+      formData,
+      setFormData
+    );
+    const { execute, isRedirecting, errors, fieldErrors } = useCmsCommand(
       () => {
         const contentImageIds = getImgIdsFromHtmls(
           formData.translations.map((t2) => t2.content ?? "")
@@ -111,89 +142,129 @@ function createPostCreateContent({
         onSuccess: (data) => router.replace(joinUrl(parentPathname, data?.post.id))
       }
     );
+    const localizedFieldErrors = getCmsLocalizedFieldErrors(
+      t,
+      cmsLocale,
+      fieldErrors
+    );
+    const isProcessing = isFetching || isRedirecting;
     return /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(Form, { onSubmit: () => void execute(), children: [
       /* @__PURE__ */ jsxs(FieldsContainer, { children: [
         /* @__PURE__ */ jsxs(MainFields, { children: [
           /* @__PURE__ */ jsxs(Fragment, { children: [
-            isFieldAllowed(postType, "author") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.author.text"), children: /* @__PURE__ */ jsx(
-              PickModal,
+            isFieldAllowed(postType, "author") && /* @__PURE__ */ jsx(
+              FormField,
               {
-                fieldName: "author",
-                formData,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                itemList: /* @__PURE__ */ jsx(AdminList, {}),
-                pickedDisplay: /* @__PURE__ */ jsx(AdminCard, { admin: formData.author })
+                controlId: "author",
+                label: t("resources.post.author.text"),
+                children: (controlProps) => /* @__PURE__ */ jsx(
+                  PickerInput,
+                  {
+                    title: t("resources.post.author.text"),
+                    controlProps,
+                    value: formData.author,
+                    onChange: (value) => setFormData((previous) => ({
+                      ...previous,
+                      author: value
+                    })),
+                    loading: isFetching,
+                    disabled: isProcessing,
+                    renderList: (listProps) => /* @__PURE__ */ jsx(AdminList, { ...listProps }),
+                    renderValue: () => /* @__PURE__ */ jsx(AdminCard, { openNewTab: true, admin: formData.author })
+                  }
+                )
               }
-            ) }),
-            isFieldAllowed(postType, "parents") && parentType && /* @__PURE__ */ jsx(Field, { label: t(parentLabelKey ?? "resources.category.text"), children: /* @__PURE__ */ jsx(
-              PickModal,
+            ),
+            isFieldAllowed(postType, "parents") && parentType && /* @__PURE__ */ jsx(
+              FormField,
               {
-                fieldName: "parents",
-                formData,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                isMultiPick: true,
-                itemList: /* @__PURE__ */ jsx(
-                  PostList,
+                controlId: "parents",
+                label: t(parentLabelKey ?? "resources.category.text"),
+                children: (controlProps) => /* @__PURE__ */ jsx(
+                  PickerInput,
                   {
-                    usableFields: [
-                      ...isFieldAllowed(parentType, "isActive") ? ["isActive"] : [],
-                      ...isFieldAllowed(parentType, "isIndexActive") ? ["isIndexActive"] : [],
-                      ...isFieldAllowed(parentType, "isSlugActive") ? ["isSlugActive"] : [],
-                      ...isFieldAllowed(parentType, "isFeatured") ? ["isFeatured"] : [],
-                      ...isFieldAllowed(parentType, "isShownOnHome") ? ["isShownOnHome"] : []
-                    ],
-                    type: parentType,
-                    topicId: topic?.id,
-                    Card: (props) => /* @__PURE__ */ jsx(
-                      CategoryCard$1,
+                    title: t(parentLabelKey ?? "resources.category.text"),
+                    controlProps,
+                    value: formData.parents[0] ?? null,
+                    onChange: (value) => setFormData((previous) => ({
+                      ...previous,
+                      parents: value ? [value] : []
+                    })),
+                    loading: isFetching,
+                    disabled: isProcessing,
+                    renderList: (listProps) => /* @__PURE__ */ jsx(
+                      PostList,
                       {
-                        ...props,
-                        isSubcategory: isSubcategoryParent
+                        ...listProps,
+                        usableFields: [
+                          ...isFieldAllowed(parentType, "isActive") ? ["isActive"] : [],
+                          ...isFieldAllowed(parentType, "isIndexActive") ? ["isIndexActive"] : [],
+                          ...isFieldAllowed(parentType, "isSlugActive") ? ["isSlugActive"] : [],
+                          ...isFieldAllowed(parentType, "isFeatured") ? ["isFeatured"] : [],
+                          ...isFieldAllowed(parentType, "isShownOnHome") ? ["isShownOnHome"] : [],
+                          ...POST_CUSTOM_STATE_FIELDS.filter(
+                            (key) => isFieldAllowed(parentType, key)
+                          )
+                        ],
+                        type: parentType,
+                        topicId: topic?.id,
+                        Card: (props) => /* @__PURE__ */ jsx(
+                          CategoryCard,
+                          {
+                            ...props,
+                            isSubcategory: isSubcategoryParent
+                          }
+                        ),
+                        Table: (props) => /* @__PURE__ */ jsx(
+                          CategoryTable$1,
+                          {
+                            ...props,
+                            isSubcategory: isSubcategoryParent
+                          }
+                        ),
+                        localKey: `parent-${parentType}`
                       }
                     ),
-                    Table: (props) => /* @__PURE__ */ jsx(
-                      CategoryTable$1,
+                    renderValue: () => formData.parents.map((parent) => /* @__PURE__ */ jsx(
+                      CategoryCard,
                       {
-                        ...props,
+                        openNewTab: true,
+                        post: parent,
+                        topicSlug: topic?.slug,
                         isSubcategory: isSubcategoryParent
-                      }
-                    ),
-                    localKey: `parent-${parentType}`
+                      },
+                      parent.id
+                    ))
                   }
-                ),
-                pickedDisplay: formData.parents.map((parent) => /* @__PURE__ */ jsx(
-                  CategoryCard$1,
-                  {
-                    post: parent,
-                    topicSlug: topic?.slug,
-                    isSubcategory: isSubcategoryParent
-                  },
-                  parent.id
-                ))
+                )
               }
-            ) }),
-            isFieldAllowed(postType, "tags") && /* @__PURE__ */ jsx(Field, { label: t("resources.tag.text"), children: /* @__PURE__ */ jsx(
-              PickModal,
+            ),
+            isFieldAllowed(postType, "tags") && /* @__PURE__ */ jsx(FormField, { controlId: "tags", label: t("resources.tag.text"), children: (controlProps) => /* @__PURE__ */ jsx(
+              PickerInput,
               {
-                fieldName: "tags",
-                formData,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                isMultiPick: true,
-                itemList: /* @__PURE__ */ jsx(
+                title: t("resources.tag.text"),
+                controlProps,
+                value: formData.tags,
+                onChange: (value) => setFormData((previous) => ({
+                  ...previous,
+                  tags: value
+                })),
+                multiple: true,
+                loading: isFetching,
+                disabled: isProcessing,
+                renderList: (listProps) => /* @__PURE__ */ jsx(
                   PostList,
                   {
+                    ...listProps,
                     usableFields: [
                       ...isFieldAllowed(tagType, "isActive") ? ["isActive"] : [],
                       ...isFieldAllowed(tagType, "isIndexActive") ? ["isIndexActive"] : [],
                       ...isFieldAllowed(tagType, "isSlugActive") ? ["isSlugActive"] : [],
                       ...isFieldAllowed(tagType, "isFeatured") ? ["isFeatured"] : [],
-                      ...isFieldAllowed(tagType, "isShownOnHome") ? ["isShownOnHome"] : []
+                      ...isFieldAllowed(tagType, "isShownOnHome") ? ["isShownOnHome"] : [],
+                      ...POST_CUSTOM_STATE_FIELDS.filter(
+                        (key) => isFieldAllowed(tagType, key)
+                      )
                     ],
                     type: tagType,
                     Card: TagCard,
@@ -201,187 +272,265 @@ function createPostCreateContent({
                     localKey: "tag"
                   }
                 ),
-                pickedDisplay: formData.tags.map((tag) => /* @__PURE__ */ jsx(TagCard, { post: tag }, tag.id))
+                renderValue: () => formData.tags.map((tag) => /* @__PURE__ */ jsx(TagCard, { openNewTab: true, post: tag }, tag.id))
               }
             ) }),
-            isFieldAllowed(postType, "coverImage") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.cover-image.text"), children: /* @__PURE__ */ jsx(
-              PickModal,
+            isFieldAllowed(postType, "coverImage") && /* @__PURE__ */ jsx(
+              FormField,
               {
-                fieldName: "coverImage",
-                formData,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                itemList: /* @__PURE__ */ jsx(FileList, {}),
-                pickedDisplay: /* @__PURE__ */ jsx(FileCard, { file: formData.coverImage }),
-                aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "image/*" })
+                controlId: "coverImage",
+                label: t("resources.post.cover-image.text"),
+                children: (controlProps) => /* @__PURE__ */ jsx(
+                  PickerInput,
+                  {
+                    title: t("resources.post.cover-image.text"),
+                    controlProps,
+                    value: formData.coverImage,
+                    onChange: (value) => setFormData((previous) => ({
+                      ...previous,
+                      coverImage: value
+                    })),
+                    loading: isFetching,
+                    disabled: isProcessing,
+                    renderList: (listProps) => /* @__PURE__ */ jsx(
+                      FileList,
+                      {
+                        ...listProps,
+                        allowedTypes: ["IMAGE", "VIDEO"]
+                      }
+                    ),
+                    renderValue: () => /* @__PURE__ */ jsx(FileCard, { openNewTab: true, file: formData.coverImage }),
+                    renderManagement: ({ onItemsCreated }) => /* @__PURE__ */ jsx(
+                      Uploader,
+                      {
+                        onItemsCreated,
+                        accept: "image/*,video/*"
+                      }
+                    )
+                  }
+                )
               }
-            ) })
+            )
           ] }),
           /* @__PURE__ */ jsxs(Fragment, { children: [
             isFieldAllowed(postType, "text-content-separator") && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
-            isFieldAllowed(postType, "title") && /* @__PURE__ */ jsx(Field, { htmlFor: "title", label: t("resources.post.title.text"), children: /* @__PURE__ */ jsx(
-              I18nTextarea,
+            isFieldAllowed(postType, "title") && /* @__PURE__ */ jsx(
+              I18nFormField,
               {
-                id: "title",
-                placeholder: t("resources.post.title.placeholder.text"),
                 fieldName: "title",
+                label: t("resources.post.title.text"),
+                locales: webLocales,
                 translations: formData.translations,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                errors
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    ...bindTranslationText("title", translationLocale),
+                    placeholder: t("resources.post.title.placeholder.text"),
+                    disabled: isProcessing,
+                    ...controlProps
+                  }
+                )
               }
-            ) }),
+            ),
             isFieldAllowed(postType, "subtitle") && /* @__PURE__ */ jsx(
-              Field,
+              I18nFormField,
               {
-                htmlFor: "subtitle",
+                fieldName: "subtitle",
                 label: t("resources.post.subtitle.text"),
-                children: /* @__PURE__ */ jsx(
-                  I18nTextarea,
+                locales: webLocales,
+                translations: formData.translations,
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Textarea,
                   {
-                    id: "subtitle",
+                    ...bindTranslationText("subtitle", translationLocale),
                     placeholder: t(
                       "resources.post.subtitle.placeholder.text"
                     ),
-                    fieldName: "subtitle",
-                    translations: formData.translations,
-                    setFormData,
-                    isLoading: isFetching,
-                    isDisabled: isRedirecting,
-                    errors
+                    disabled: isProcessing,
+                    ...controlProps
                   }
                 )
               }
             ),
             isFieldAllowed(postType, "summary") && /* @__PURE__ */ jsx(
-              Field,
+              I18nFormField,
               {
-                htmlFor: "summary",
+                fieldName: "summary",
                 label: t("resources.post.summary.text"),
-                children: /* @__PURE__ */ jsx(
-                  I18nTextarea,
+                locales: webLocales,
+                translations: formData.translations,
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Textarea,
                   {
-                    id: "summary",
-                    placeholder: t("resources.post.summary.placeholder.text"),
-                    fieldName: "summary",
-                    translations: formData.translations,
-                    setFormData,
-                    isLoading: isFetching,
-                    isDisabled: isRedirecting,
-                    errors
+                    ...bindTranslationText("summary", translationLocale),
+                    placeholder: t(
+                      "resources.post.summary.placeholder.text"
+                    ),
+                    disabled: isProcessing,
+                    ...controlProps
                   }
                 )
               }
             ),
             isFieldAllowed(postType, "description") && /* @__PURE__ */ jsx(
-              Field,
+              I18nFormField,
               {
-                htmlFor: "description",
+                fieldName: "description",
                 label: t("resources.post.description.text"),
-                children: /* @__PURE__ */ jsx(
-                  I18nTextarea,
+                locales: webLocales,
+                translations: formData.translations,
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Textarea,
                   {
-                    id: "description",
+                    ...bindTranslationText(
+                      "description",
+                      translationLocale
+                    ),
                     placeholder: t(
                       "resources.post.description.placeholder.text"
                     ),
-                    fieldName: "description",
-                    translations: formData.translations,
-                    setFormData,
-                    isLoading: isFetching,
-                    isDisabled: isRedirecting,
-                    errors
+                    disabled: isProcessing,
+                    ...controlProps
                   }
                 )
               }
             ),
-            isFieldAllowed(postType, "content") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.content.text"), children: /* @__PURE__ */ jsx(
-              I18nEditor,
+            isFieldAllowed(postType, "content") && /* @__PURE__ */ jsx(
+              I18nFormField,
               {
-                locale,
                 fieldName: "content",
+                label: t("resources.post.content.text"),
+                locales: webLocales,
                 translations: formData.translations,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                errors
+                errors: localizedFieldErrors,
+                children: ({
+                  locale: contentLocale,
+                  controlProps,
+                  errors: activeErrors
+                }) => /* @__PURE__ */ jsx(
+                  Editor,
+                  {
+                    locale: editorLocale,
+                    ...bindTranslationEditor("content", contentLocale),
+                    isLoading: isFetching,
+                    isDisabled: isProcessing,
+                    isError: activeErrors.length > 0,
+                    ...controlProps
+                  },
+                  contentLocale
+                )
               }
-            ) })
+            )
           ] }),
           /* @__PURE__ */ jsxs(Fragment, { children: [
             isFieldAllowed(postType, "better-seo-separator") && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
-            isFieldAllowed(postType, "externalLinks") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.external-links.text"), children: /* @__PURE__ */ jsx(
-              I18nObjectArrayInput,
+            isFieldAllowed(postType, "externalLinks") && /* @__PURE__ */ jsx(
+              I18nFormField,
               {
                 fieldName: "externalLinks",
+                label: t("resources.post.external-links.text"),
+                locales: webLocales,
                 translations: formData.translations,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                errors,
-                fields: [
-                  {
-                    key: "name",
-                    placeholder: t(
-                      "resources.post.external-links.placeholder1.text"
-                    )
-                  },
+                errors: localizedFieldErrors,
+                children: ({
+                  locale: translationLocale,
+                  controlProps,
+                  errors: activeErrors
+                }) => /* @__PURE__ */ jsx(
+                  ObjectArrayInput,
                   {
-                    key: "href",
-                    placeholder: t(
-                      "resources.post.external-links.placeholder2.text"
-                    )
+                    ...bindTranslationObjectArray(
+                      "externalLinks",
+                      translationLocale
+                    ),
+                    fields: [
+                      {
+                        key: "name",
+                        placeholder: t(
+                          "resources.post.external-links.placeholder1.text"
+                        )
+                      },
+                      {
+                        key: "href",
+                        placeholder: t(
+                          "resources.post.external-links.placeholder2.text"
+                        )
+                      }
+                    ],
+                    itemErrors: getObjectArrayItemErrors(activeErrors),
+                    disabled: isProcessing,
+                    ...controlProps
                   }
-                ]
+                )
               }
-            ) }),
-            isFieldAllowed(postType, "faq") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.faq.text"), children: /* @__PURE__ */ jsx(
-              I18nObjectArrayInput,
+            ),
+            isFieldAllowed(postType, "faq") && /* @__PURE__ */ jsx(
+              I18nFormField,
               {
                 fieldName: "faq",
+                label: t("resources.post.faq.text"),
+                locales: webLocales,
                 translations: formData.translations,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                errors,
-                fields: [
-                  {
-                    key: "question",
-                    placeholder: t(
-                      "resources.post.faq.placeholder1.text"
-                    )
-                  },
+                errors: localizedFieldErrors,
+                children: ({
+                  locale: translationLocale,
+                  controlProps,
+                  errors: activeErrors
+                }) => /* @__PURE__ */ jsx(
+                  ObjectArrayInput,
                   {
-                    key: "answer",
-                    placeholder: t(
-                      "resources.post.faq.placeholder2.text"
-                    )
+                    ...bindTranslationObjectArray(
+                      "faq",
+                      translationLocale
+                    ),
+                    fields: [
+                      {
+                        key: "question",
+                        placeholder: t(
+                          "resources.post.faq.placeholder1.text"
+                        )
+                      },
+                      {
+                        key: "answer",
+                        placeholder: t(
+                          "resources.post.faq.placeholder2.text"
+                        )
+                      }
+                    ],
+                    itemErrors: getObjectArrayItemErrors(activeErrors),
+                    disabled: isProcessing,
+                    ...controlProps
                   }
-                ]
+                )
               }
-            ) }),
+            ),
             isFieldAllowed(postType, "readTime") && /* @__PURE__ */ jsx(
-              Field,
+              I18nFormField,
               {
-                htmlFor: "readTime",
+                fieldName: "readTime",
                 label: t("resources.post.read-time.text"),
-                hint: "Minutes",
-                children: /* @__PURE__ */ jsx(
-                  I18nNumberInput,
+                description: t("resources.post.read-time.hint.text"),
+                locales: webLocales,
+                translations: formData.translations,
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  NumberInput,
                   {
-                    id: "readTime",
+                    ...bindTranslationNumber(
+                      "readTime",
+                      translationLocale
+                    ),
                     placeholder: t(
                       "resources.post.read-time.placeholder.text"
                     ),
                     min: 0,
-                    fieldName: "readTime",
-                    translations: formData.translations,
-                    setFormData,
-                    isLoading: isFetching,
-                    isDisabled: isRedirecting,
-                    errors
+                    step: 1,
+                    disabled: isProcessing,
+                    ...controlProps
                   }
                 )
               }
@@ -389,49 +538,63 @@ function createPostCreateContent({
           ] }),
           /* @__PURE__ */ jsxs(Fragment, { children: [
             isFieldAllowed(postType, "related-posts-separator") && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
-            isFieldAllowed(postType, "relatedPosts") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.related-posts.text"), children: /* @__PURE__ */ jsx(
-              PickModal,
+            isFieldAllowed(postType, "relatedPosts") && /* @__PURE__ */ jsx(
+              FormField,
               {
-                fieldName: "relatedPosts",
-                formData,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                isMultiPick: true,
-                itemList: /* @__PURE__ */ jsx(
-                  PostList,
+                controlId: "relatedPosts",
+                label: t("resources.post.related-posts.text"),
+                children: (controlProps) => /* @__PURE__ */ jsx(
+                  PickerInput,
                   {
-                    usableFields: [
-                      ...isFieldAllowed(postType, "isActive") ? ["isActive"] : [],
-                      ...isFieldAllowed(postType, "isIndexActive") ? ["isIndexActive"] : [],
-                      ...isFieldAllowed(postType, "isSlugActive") ? ["isSlugActive"] : [],
-                      ...isFieldAllowed(postType, "isFeatured") ? ["isFeatured"] : [],
-                      ...isFieldAllowed(postType, "isShownOnHome") ? ["isShownOnHome"] : []
-                    ],
-                    type: postType,
-                    topicId: topic?.id
+                    title: t("resources.post.related-posts.text"),
+                    controlProps,
+                    value: formData.relatedPosts,
+                    onChange: (value) => setFormData((previous) => ({
+                      ...previous,
+                      relatedPosts: value
+                    })),
+                    multiple: true,
+                    loading: isFetching,
+                    disabled: isProcessing,
+                    renderList: (listProps) => /* @__PURE__ */ jsx(
+                      PostList,
+                      {
+                        ...listProps,
+                        usableFields: [
+                          ...isFieldAllowed(postType, "isActive") ? ["isActive"] : [],
+                          ...isFieldAllowed(postType, "isIndexActive") ? ["isIndexActive"] : [],
+                          ...isFieldAllowed(postType, "isSlugActive") ? ["isSlugActive"] : [],
+                          ...isFieldAllowed(postType, "isFeatured") ? ["isFeatured"] : [],
+                          ...isFieldAllowed(postType, "isShownOnHome") ? ["isShownOnHome"] : [],
+                          ...POST_CUSTOM_STATE_FIELDS.filter(
+                            (key) => isFieldAllowed(postType, key)
+                          )
+                        ],
+                        type: postType,
+                        topicId: topic?.id
+                      }
+                    ),
+                    renderValue: () => formData.relatedPosts.map((relatedPost) => /* @__PURE__ */ jsx(
+                      PostCard,
+                      {
+                        openNewTab: true,
+                        post: relatedPost,
+                        topicSlug: topic?.slug
+                      },
+                      relatedPost.id
+                    ))
                   }
-                ),
-                pickedDisplay: formData.relatedPosts.map(
-                  (relatedPost) => /* @__PURE__ */ jsx(
-                    PostCard,
-                    {
-                      post: relatedPost,
-                      topicSlug: topic?.slug
-                    },
-                    relatedPost.id
-                  )
                 )
               }
-            ) })
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(SideFields, { children: [
-          /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(SideFields, { className: "lg:max-h-[calc(100dvh-7rem)]", children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 max-lg:hidden", children: /* @__PURE__ */ jsx(
             ActionButtonsCard,
             {
               isInitializing: isFetching,
-              isProcessing: isRedirecting,
+              isProcessing,
               cancelButtonProps: { href: cancelButtonHref }
             }
           ) }),
@@ -444,13 +607,18 @@ function createPostCreateContent({
                 ...isFieldAllowed(postType, "isIndexActive") ? [{ key: "isIndexActive" }] : [],
                 ...isFieldAllowed(postType, "isSlugActive") ? [{ key: "isSlugActive" }] : [],
                 ...isFieldAllowed(postType, "isFeatured") ? [{ key: "isFeatured" }] : [],
-                ...isFieldAllowed(postType, "isShownOnHome") ? [{ key: "isShownOnHome" }] : []
+                ...isFieldAllowed(postType, "isShownOnHome") ? [{ key: "isShownOnHome" }] : [],
+                ...customControlFields.filter(({ key }) => isFieldAllowed(postType, key)).map(({ key, icon, label }) => ({
+                  key,
+                  icon,
+                  label: resolveControlFieldLabel(label, cmsLocale)
+                }))
               ],
               controlMeta,
               formData,
               setFormData,
               isLoading: isFetching,
-              isDisabled: isRedirecting,
+              isDisabled: isProcessing,
               errors
             }
           )
@@ -460,7 +628,7 @@ function createPostCreateContent({
         ActionButtonsCard,
         {
           isInitializing: isFetching,
-          isProcessing: isRedirecting,
+          isProcessing,
           cancelButtonProps: { href: cancelButtonHref }
         }
       ) })