sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/pages/dashboard/system/access/admin/page.js

@@ -1,18 +1,20 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { ShieldUser } from 'lucide-react';
-import { PageHeader } from '../../../../../components/ui/blocks/page-header/page-header.js';
+import { ShieldUser, Plus } from 'lucide-react';
+import { CMS_PATHS } from '../../../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../../constants/cms-locale.js';
+import { PageHeaderLayout } from '../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import 'react';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../../components/shadcn/badge.js';
 import '../../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,12 +30,17 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
-import '../../../../../../../../constants/paths/redirect.js';
-import '../../../../../../../../constants/cms-locale.js';
+import { LinkButton } from '../../../../../components/ui/buttons/link-button.js';
+import { ReturnButton } from '../../../../../components/ui/buttons/return-button.js';
+import 'next/link';
+import '../../../../../components/ui/inputs/input.js';
+import '../../../../../components/ui/inputs/textarea.js';
+import '../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../components/ui/inputs/password-input.js';
 import '../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
-import 'next/link';
+import 'zod';
+import 'next/navigation';
 import { ContentContainer } from '../../../../../components/ui/layouts/content-container.js';
 
 function createAdminIndexPage({
@@ -43,14 +50,22 @@ function createAdminIndexPage({
     const { t } = useTranslator();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "index",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
             icon: ShieldUser,
             title: t("resources.admin.text")
           },
-          createButtonProps: {}
+          actions: /* @__PURE__ */ jsx(
+            LinkButton,
+            {
+              href: `${CMS_PATHS.system.access.admin.pathname}/create`,
+              variant: "success",
+              icon: Plus,
+              children: t("ui.create.text")
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isFixHeight: true, children: /* @__PURE__ */ jsx(AdminList, {}) })

package/dist/src/cms/client/interfaces/pages/dashboard/system/access/page.js

@@ -5,17 +5,16 @@ import { ShieldCheck, ShieldUser } from 'lucide-react';
 import { CMS_PATHS } from '../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
-import { PageHeader } from '../../../../components/ui/blocks/page-header/page-header.js';
+import { PageHeaderLayout } from '../../../../components/ui/blocks/page-header/page-header-layout.js';
 import 'react';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../components/shadcn/badge.js';
 import '../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -31,11 +30,17 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
 import 'next/link';
+import { ReturnButton } from '../../../../components/ui/buttons/return-button.js';
+import '../../../../components/ui/inputs/input.js';
+import '../../../../components/ui/inputs/textarea.js';
+import '../../../../components/ui/inputs/switch-input.js';
+import '../../../../components/ui/inputs/password-input.js';
 import { FeatureCard } from '../../../../components/ui/cards/feature-card.js';
 import '../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
+import 'zod';
+import 'next/navigation';
 import { ContentContainer } from '../../../../components/ui/layouts/content-container.js';
 
 function createAccessPage() {
@@ -43,8 +48,9 @@ function createAccessPage() {
     const { t } = useTranslator();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { href: CMS_PATHS.dashboard.pathname }),
           titleProps: {
             icon: ShieldCheck,
             title: t("main.access.text")

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/file/_id_/edit/page.js

@@ -3,23 +3,24 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { Image } from 'lucide-react';
 import { useRouter, useParams } from 'next/navigation';
+import { useRef } from 'react';
 import { toast } from 'sonner';
 import { CMS_PATHS } from '../../../../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../../../constants/cms-locale.js';
-import 'react';
+import 'mime-types';
+import 'sitero-domain';
 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 { useQuery } from '../../../../../../../../../../shared/client/react-query/use-query.js';
-import 'mime-types';
-import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
 import { joinUrl } from '../../../../../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { PageHeader } from '../../../../../../../components/ui/blocks/page-header/page-header.js';
+import { createTranslationTextBinder } from '../../../../../../../../applications/form/binders/create-translation-text-binder.js';
+import { getCmsLocalizedFieldErrors, getCmsFieldErrorMessageMap } from '../../../../../../../../infrastructure/operation-result/presentation/message.js';
+import { useCmsCommand } from '../../../../../../../../infrastructure/operation-result/use-cms-command.js';
+import { useCmsQuery } from '../../../../../../../../infrastructure/operation-result/use-cms-query.js';
+import { PageHeaderLayout } from '../../../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import '../../../../../../../components/shadcn/badge.js';
 import '../../../../../../../components/shadcn/button.js';
@@ -35,13 +36,20 @@ import '../../../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import { ReturnButton } from '../../../../../../../components/ui/buttons/return-button.js';
 import { Form } from '../../../../../../../components/ui/form/form.js';
-import { Field } from '../../../../../../../components/ui/form/field.js';
+import { FormField } from '../../../../../../../components/ui/form/form-field.js';
 import { FieldsContainer } from '../../../../../../../components/ui/form/containers/fields-container.js';
 import { MainFields } from '../../../../../../../components/ui/form/containers/main-fields.js';
 import { SideFields } from '../../../../../../../components/ui/form/containers/side-fields.js';
-import 'next/link';
+import { Input } from '../../../../../../../components/ui/inputs/input.js';
+import '../../../../../../../components/ui/inputs/textarea.js';
+import '../../../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../../../components/ui/inputs/password-input.js';
 import { ActionButtonsCard } from '../../../../../../../components/ui/cards/action-buttons-card.js';
+import { getLocalFileError } from '../../../../../../../components/ui/features/file/local-files.js';
+import { I18nFormField } from '../../../../../../../components/ui/i18n/i18n-form-field.js';
 import '../../../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
 import { ContentContainer } from '../../../../../../../components/ui/layouts/content-container.js';
@@ -50,34 +58,46 @@ function createFileEditPage({
   maxFileSizeInMb,
   maxFileSizeInBytes,
   useFileUpdateFormData,
+  webLocales,
   fileFindDetailAction,
   fileUpdateAction,
+  fileValidateUpdateAction,
   fileUploadApi,
-  FilePicker,
-  I18nInput
+  FilePicker
 }) {
   return function FileEditPage() {
-    const { t } = useTranslator();
+    const { t, locale } = useTranslator();
     const router = useRouter();
     const { id } = useParams();
     const {
-      execute: executeApi,
+      execute: executeFileValidateUpdateAction,
+      isRedirecting: isValidating,
+      fieldErrors: validationFieldErrors
+    } = useCmsCommand(fileValidateUpdateAction, { clearAll: false });
+    const {
+      execute: executeFileUploadApi,
       isPending,
-      errors: apiErrors
-    } = useCommand(fileUploadApi);
+      fieldErrors: uploadFieldErrors
+    } = useCmsCommand(fileUploadApi);
     const {
       data: file,
       isFetching,
       isNotFound
-    } = useQuery(() => fileFindDetailAction({ id }), ["fileFindDetailAction", id], {
-      select: (data) => data?.file
-    });
+    } = useCmsQuery(
+      () => fileFindDetailAction({ id }),
+      ["fileFindDetailAction", id],
+      { select: (data) => data?.file }
+    );
     const { formData, setFormData } = useFileUpdateFormData(file);
+    const bindTranslationText = createTranslationTextBinder(
+      formData,
+      setFormData
+    );
     const {
-      execute: executeAction,
+      execute: executeFileUpdateAction,
       isRedirecting,
-      errors: actionErrors
-    } = useCommand(
+      fieldErrors
+    } = useCmsCommand(
       (uploadResponse) => {
         const { name = "", size = 0, type = "" } = formData.blobFile || {};
         return fileUpdateAction({
@@ -85,9 +105,9 @@ function createFileEditPage({
           formData: {
             key: uploadResponse?.key,
             fileMeta: { name, size, type },
-            width: formData.blobFile ? formData.blobFile?.width : null,
-            height: formData.blobFile ? formData.blobFile?.height : null,
-            duration: formData.blobFile ? formData.blobFile?.duration : null,
+            width: formData.blobFile ? formData.blobFile.width : null,
+            height: formData.blobFile ? formData.blobFile.height : null,
+            duration: formData.blobFile ? formData.blobFile.duration : null,
             translations: formData.translations
           }
         });
@@ -100,86 +120,112 @@ function createFileEditPage({
         }
       }
     );
+    const submitBusy = useRef(false);
     async function handleSubmit() {
-      if (formData.blobFile && formData.blobFile?.size > maxFileSizeInBytes) {
-        toast.error(
-          `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`
-        );
+      if (submitBusy.current || isProcessing || formData.blobFile?.isReadingMetadata)
+        return;
+      const error = formData.blobFile && getLocalFileError(formData.blobFile, maxFileSizeInBytes);
+      if (error) {
+        toast.error(t(`ui.blob-file.status.${error}.text`));
         return;
       }
-      if (formData.blobFile) {
-        const response = await executeApi(formData);
-        if (response) await executeAction(response);
-      } else {
-        await executeAction(void 0);
+      submitBusy.current = true;
+      try {
+        const validation = await executeFileValidateUpdateAction({
+          id,
+          formData: { translations: formData.translations }
+        });
+        if (!validation) return;
+        if (formData.blobFile) {
+          const response = await executeFileUploadApi(formData);
+          if (response) await executeFileUpdateAction(response);
+          return;
+        }
+        await executeFileUpdateAction(void 0);
+      } finally {
+        submitBusy.current = false;
       }
     }
-    const errors = apiErrors.length > 0 ? apiErrors : actionErrors;
+    const isProcessing = isRedirecting || isPending || isValidating || Boolean(formData.blobFile?.isReadingMetadata);
+    const displayedFieldErrors = validationFieldErrors.length > 0 ? validationFieldErrors : fieldErrors;
+    const localizedFieldErrors = getCmsLocalizedFieldErrors(
+      t,
+      locale,
+      displayedFieldErrors
+    );
+    const uploadFieldErrorMessages = getCmsFieldErrorMessageMap(
+      getCmsLocalizedFieldErrors(t, locale, uploadFieldErrors)
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "edit",
-          titleProps: {
-            icon: Image,
-            title: t("resources.file.text")
-          },
-          isDisabled: isFetching,
-          isNotFound
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
+          titleProps: { icon: Image, title: t("resources.file.text") }
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: /* @__PURE__ */ jsxs(Form, { onSubmit: () => void handleSubmit(), children: [
         /* @__PURE__ */ jsxs(FieldsContainer, { children: [
           /* @__PURE__ */ jsxs(MainFields, { children: [
-            /* @__PURE__ */ jsx(Field, { htmlFor: "name", label: t("resources.file.name.text"), children: /* @__PURE__ */ jsx(
-              I18nInput,
+            /* @__PURE__ */ jsx(
+              I18nFormField,
               {
-                id: "name",
                 fieldName: "name",
+                locales: webLocales,
+                label: t("resources.file.name.text"),
                 translations: formData.translations,
-                setFormData,
-                isLoading: isFetching,
-                isDisabled: isRedirecting,
-                errors,
-                placeholder: t("resources.file.name.placeholder.text")
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    ...bindTranslationText("name", translationLocale),
+                    placeholder: t("resources.file.name.placeholder.text"),
+                    disabled: isFetching || isProcessing,
+                    ...controlProps
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx(
-              Field,
+              I18nFormField,
               {
-                htmlFor: "alt",
+                fieldName: "alt",
+                locales: webLocales,
                 label: t("resources.file.alt.text"),
-                hint: t("resources.file.alt.hint.text"),
-                children: /* @__PURE__ */ jsx(
-                  I18nInput,
+                description: t("resources.file.alt.hint.text"),
+                translations: formData.translations,
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    id: "alt",
-                    fieldName: "alt",
-                    translations: formData.translations,
-                    setFormData,
-                    isLoading: isFetching,
-                    isDisabled: isRedirecting,
-                    errors,
-                    placeholder: t("resources.file.alt.placeholder.text")
+                    type: "text",
+                    ...bindTranslationText("alt", translationLocale),
+                    placeholder: t("resources.file.alt.placeholder.text"),
+                    disabled: isFetching || isProcessing,
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
+                controlId: "blobFile",
                 label: t("resources.file.blob-file.text"),
                 isRequired: true,
-                hint: `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`,
-                children: /* @__PURE__ */ jsx(
+                description: `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`,
+                error: uploadFieldErrorMessages["blobFile"],
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   FilePicker,
                   {
+                    ...controlProps,
                     file,
                     fieldName: "blobFile",
                     formData,
                     setFormData,
                     isLoading: isFetching,
-                    isDisabled: isRedirecting || !!file?.isLocked || !!file?.isInUse
+                    isDisabled: isProcessing || !!file?.isLocked || !!file?.isInUse
                   }
                 )
               }
@@ -190,7 +236,7 @@ function createFileEditPage({
             {
               action: "update",
               isInitializing: isFetching,
-              isProcessing: isRedirecting || isPending
+              isProcessing
             }
           ) }) })
         ] }),
@@ -199,7 +245,7 @@ function createFileEditPage({
           {
             action: "update",
             isInitializing: isFetching,
-            isProcessing: isRedirecting || isPending
+            isProcessing
           }
         ) })
       ] }) })

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/file/_id_/page.js

@@ -1,25 +1,26 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Image } from 'lucide-react';
+import { Image, Pen, Trash2, Lock, Network } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
+import 'zod';
+import { useCmsCommand } from '../../../../../../../infrastructure/operation-result/use-cms-command.js';
+import { useCmsQuery } from '../../../../../../../infrastructure/operation-result/use-cms-query.js';
 import { CMS_PATHS } from '../../../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../../../constants/paths/redirect.js';
 import { DATE_FORMAT_OPTIONS } from '../../../../../../../../../constants/date.js';
 import '../../../../../../../../../constants/cms-locale.js';
+import 'mime-types';
+import 'sitero-domain';
 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 { useQuery } from '../../../../../../../../../shared/client/react-query/use-query.js';
-import { PageHeader } from '../../../../../../components/ui/blocks/page-header/page-header.js';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
+import { joinUrl } from '../../../../../../../../../shared/utils/join-url.js';
+import 'next/link';
+import '@radix-ui/react-avatar';
 import '../../../../../../components/shadcn/badge.js';
 import '../../../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -40,16 +41,25 @@ import { FieldBody } from '../../../../../../components/ui/form/field-body.js';
 import { FieldsContainer } from '../../../../../../components/ui/form/containers/fields-container.js';
 import { MainFields } from '../../../../../../components/ui/form/containers/main-fields.js';
 import { SideFields } from '../../../../../../components/ui/form/containers/side-fields.js';
+import '../../../../../../components/ui/inputs/input.js';
+import '../../../../../../components/ui/inputs/textarea.js';
 import '../../../../../../../infrastructure/admin-session/admin-context.js';
+import { PageHeaderLayout } from '../../../../../../components/ui/blocks/page-header/page-header-layout.js';
+import { ActionButton } from '../../../../../../components/ui/buttons/action-button.js';
+import { LinkButton } from '../../../../../../components/ui/buttons/link-button.js';
+import { ReturnButton } from '../../../../../../components/ui/buttons/return-button.js';
+import '../../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../../components/ui/inputs/password-input.js';
+import 'next/image';
+import { FileRelationsLink } from '../../../../../../components/resources/file/file-relations-link.js';
 import 'intor/next';
-import 'next/link';
 import { ContentContainer } from '../../../../../../components/ui/layouts/content-container.js';
+import { I18nDisplayField } from '../../../../../../components/ui/i18n/i18n-display-field.js';
 
 function createFileShowPage({
+  webLocales,
   fileFindDetailAction,
   fileSoftDeleteAction,
-  FileRelationsSection,
-  I18nDisplay,
   FilePicker
 }) {
   return function FileShowPage() {
@@ -60,57 +70,117 @@ function createFileShowPage({
       data: file,
       isFetching,
       isNotFound
-    } = useQuery(() => fileFindDetailAction({ id }), ["fileFindDetailAction", id], {
-      select: (data) => data?.file
-    });
-    const { execute, isRedirecting } = useCommand(
-      () => fileSoftDeleteAction({ id }),
+    } = useCmsQuery(
+      () => fileFindDetailAction({ id }),
+      ["fileFindDetailAction", id],
       {
-        onSuccess: () => router.replace(CMS_PATHS.system.storage.file.pathname)
+        select: (data) => data?.file
       }
     );
+    const { execute: executeFileSoftDeleteAction, isRedirecting } = useCmsCommand(() => fileSoftDeleteAction({ id }), {
+      onSuccess: () => router.replace(CMS_PATHS.system.storage.file.pathname)
+    });
     const isDestructionBlocked = !!file && (file.isLocked || file.isInUse);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "show",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
             icon: Image,
-            title: t("resources.file.text")
+            title: t("resources.file.text"),
+            rightChildren: /* @__PURE__ */ jsxs(Fragment, { children: [
+              file?.isLocked && /* @__PURE__ */ jsx(
+                Lock,
+                {
+                  className: "size-4",
+                  role: "img",
+                  "aria-label": t("resources.file.locked.text"),
+                  "aria-hidden": false
+                }
+              ),
+              file?.isInUse && /* @__PURE__ */ jsx(
+                Network,
+                {
+                  className: "text-warning size-4",
+                  role: "img",
+                  "aria-label": t("resources.file.in-use.text"),
+                  "aria-hidden": false
+                }
+              )
+            ] })
           },
-          editButtonProps: {},
-          destroyButtonProps: {
-            onClick: () => {
-              if (!confirm(t("ui.dialog.confirm.text"))) return;
-              void execute();
-            },
-            isLoading: isRedirecting,
-            isDisabled: isFetching || isDestructionBlocked
-          },
-          isLocked: file?.isLocked,
-          isDisabled: isFetching,
-          isNotFound
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                variant: "warning",
+                icon: Pen,
+                href: joinUrl(
+                  CMS_PATHS.system.storage.file.pathname,
+                  id,
+                  "edit"
+                ),
+                isDisabled: isFetching,
+                children: t("ui.edit.text")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                variant: "destructive",
+                icon: Trash2,
+                onClick: () => {
+                  if (!confirm(t("ui.dialog.confirm.text"))) return;
+                  void executeFileSoftDeleteAction();
+                },
+                isLoading: isRedirecting,
+                isDisabled: isFetching || isDestructionBlocked,
+                children: t("ui.destroy.text")
+              }
+            )
+          ] })
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [
         /* @__PURE__ */ jsxs(MainFields, { children: [
-          /* @__PURE__ */ jsx(Field, { label: t("resources.file.name.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          file && /* @__PURE__ */ jsx(FileRelationsLink, { fileId: file.id }),
+          /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "name",
+              locales: webLocales,
+              label: t("resources.file.name.text"),
               translations: file?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                FieldBody,
+                {
+                  isLoading: isFetching,
+                  isEmpty: !value,
+                  className: "whitespace-pre-line",
+                  children: value
+                }
+              )
             }
-          ) }),
-          /* @__PURE__ */ jsx(Field, { label: t("resources.file.alt.text"), children: /* @__PURE__ */ jsx(
-            I18nDisplay,
+          ),
+          /* @__PURE__ */ jsx(
+            I18nDisplayField,
             {
               fieldName: "alt",
+              locales: webLocales,
+              label: t("resources.file.alt.text"),
               translations: file?.translations,
-              isLoading: isFetching
+              children: ({ value }) => /* @__PURE__ */ jsx(
+                FieldBody,
+                {
+                  isLoading: isFetching,
+                  isEmpty: !value,
+                  className: "whitespace-pre-line",
+                  children: value
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx(
             Field,
             {
@@ -118,8 +188,7 @@ function createFileShowPage({
               hint: file?.width ? `${file?.width} x ${file?.height} ${file.duration ? `| ${file.duration} ms` : ""}` : void 0,
               children: /* @__PURE__ */ jsx(FilePicker, { file, isLoading: isFetching, isDisplay: true })
             }
-          ),
-          /* @__PURE__ */ jsx(FileRelationsSection, { file: file ?? null })
+          )
         ] }),
         /* @__PURE__ */ jsx(SideFields, { children: /* @__PURE__ */ jsx(
           Field,