sitero 0.2.0 → 0.3.0

package/dist/src/cms/client/interfaces/components/resources/config/config-show-content.js

@@ -4,6 +4,7 @@ import { useTranslator } from 'intor/react';
 import '../../../../../../constants/paths/redirect.js';
 import { DATE_FORMAT_OPTIONS } from '../../../../../../constants/date.js';
 import '../../../../../../constants/cms-locale.js';
+import { ArrayList } from '../../ui/display/array-list.js';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -12,18 +13,12 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
-import { Field } from '../../ui/form/field.js';
-import { FieldBody } from '../../ui/form/field-body.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 'lucide-react';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
+import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';
 import '../../shadcn/input-group.js';
 import '@radix-ui/react-label';
@@ -35,28 +30,43 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import { Field } from '../../ui/form/field.js';
+import { FieldBody } from '../../ui/form/field-body.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 '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
+import { I18nDisplayField } from '../../ui/i18n/i18n-display-field.js';
 import '../../../../infrastructure/admin-session/admin-context.js';
 import 'next/navigation';
 import 'intor/next';
-import 'next/link';
+import 'zod';
 import { ContentContainer } from '../../ui/layouts/content-container.js';
-import { ArrayList } from '../../ui/display/array-list.js';
 
 function ConfigShowContent({
   config,
   fields = {},
   isFetching,
   isNotFound,
-  I18nDisplay,
-  I18nArrayDisplay,
-  FileCard
+  FileCard,
+  webLocales
 }) {
   const { t, locale, format } = useTranslator();
   return /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [
     /* @__PURE__ */ jsx(MainFields, { children: /* @__PURE__ */ jsx(Fragment, { children: Object.entries(fields).map(([key, field]) => {
       const label = field.label[locale];
       if (key.startsWith("text")) {
-        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(FieldBody, { isLoading: isFetching, children: config?.[key] }) }, key);
+        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
+          FieldBody,
+          {
+            isLoading: isFetching,
+            isEmpty: !config?.[key],
+            className: "whitespace-pre-line",
+            children: config?.[key]
+          }
+        ) }, key);
       } else if (key.startsWith("data")) {
         return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
           ArrayList,
@@ -67,26 +77,53 @@ function ConfigShowContent({
         ) }, key);
       }
       if (key.startsWith("dec") || key.startsWith("int")) {
-        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(FieldBody, { isLoading: isFetching, children: config?.[key] }) }, key);
+        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
+          FieldBody,
+          {
+            isLoading: isFetching,
+            isEmpty: config?.[key] == null,
+            children: config?.[key]
+          }
+        ) }, key);
       }
       if (key.startsWith("i18nText")) {
-        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
-          I18nDisplay,
+        return /* @__PURE__ */ jsx(
+          I18nDisplayField,
           {
             fieldName: key,
+            locales: webLocales,
+            label,
             translations: config?.translations,
-            isLoading: isFetching
-          }
-        ) }, key);
+            children: ({ value }) => /* @__PURE__ */ jsx(
+              FieldBody,
+              {
+                isLoading: isFetching,
+                isEmpty: !value,
+                className: "whitespace-pre-line",
+                children: value
+              }
+            )
+          },
+          key
+        );
       } else if (key.startsWith("i18nData")) {
-        return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
-          I18nArrayDisplay,
+        return /* @__PURE__ */ jsx(
+          I18nDisplayField,
           {
             fieldName: key,
+            locales: webLocales,
+            label,
             translations: config?.translations,
-            isLoading: isFetching
-          }
-        ) }, key);
+            children: ({ value }) => /* @__PURE__ */ jsx(
+              ArrayList,
+              {
+                values: Array.isArray(value) ? value : void 0,
+                isLoading: isFetching
+              }
+            )
+          },
+          key
+        );
       } else if (key.startsWith("file") && !key.startsWith("files")) {
         return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsx(
           FieldBody,
@@ -107,7 +144,7 @@ function ConfigShowContent({
           FieldBody,
           {
             isLoading: isFetching,
-            isEmpty: !config?.[key],
+            isEmpty: !config?.[key].length,
             children: config?.[key].map((file) => /* @__PURE__ */ jsx(FileCard, { file, openNewTab: true }, file.id))
           }
         ) }, key);

package/dist/src/cms/client/interfaces/components/resources/file/file-card.js

@@ -14,8 +14,7 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { joinUrl } from '../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { ResourceCard } from '../../ui/cards/resource-card/resource-card.js';
+import { ResourceCard } from '../../ui/cards/resource-card.js';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -32,15 +31,19 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
 import 'next/link';
+import 'next/navigation';
+import { NoData } from '../../ui/display/no-data.js';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
 import { FileStateIcons } from './file-state-icons.js';
 
 const WIDTH = "160px";
 const HEIGHT = "160px";
 function createFileCard({
   SmartImage,
-  storageUrl
+  storageUrl,
+  defaultWebLocale
 }) {
   return function FileCard({
     file,
@@ -48,33 +51,40 @@ function createFileCard({
     openNewTab,
     // pick
     isPicked,
+    onSelect,
     // base
-    anchorProps,
     className = ""
   }) {
-    const { t, locale } = useTranslator();
+    const { t } = useTranslator();
     const isImage = file?.type === "IMAGE";
     const isVideo = file?.type === "VIDEO";
-    const fileT = findTranslation(file?.translations, locale);
+    const fileT = findTranslation(file?.translations, defaultWebLocale);
     const href = joinUrl(CMS_PATHS.system.storage.file.pathname, file?.id);
-    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       ResourceCard,
       {
+        interaction: onSelect ? {
+          type: "select",
+          isSelected: !!isPicked,
+          onSelect
+        } : {
+          type: "navigate",
+          href,
+          openNewTab
+        },
+        identity: {
+          icon: /* @__PURE__ */ jsx(Image, {}),
+          badge: t(
+            `resources.file.file-type.${(file?.type ?? "OTHER").toLowerCase()}.text`
+          )
+        },
+        state: /* @__PURE__ */ jsx(FileStateIcons, { file }),
+        media: /* @__PURE__ */ jsx("div", { className: cn("flex-center size-full", "overflow-hidden"), children: isImage ? /* @__PURE__ */ jsx(SmartImage, { fileKey: file.key, width: 160, height: 160 }) : isVideo ? /* @__PURE__ */ jsx("video", { src: joinUrl(storageUrl, file.key), autoPlay: true, loop: true, muted: true }) : /* @__PURE__ */ jsx("span", { className: cn("scale-[2]"), children: "\u{1F4C4}" }) }),
+        title: fileT.name || /* @__PURE__ */ jsx(NoData, {}),
         className,
-        style: { width: WIDTH, height: HEIGHT },
-        href,
-        openNewTab,
-        anchorProps,
-        isPicked,
-        modelIcon: /* @__PURE__ */ jsx(Image, {}),
-        badge: t(
-          `resources.file.file-type.${(file?.type ?? "OTHER").toLowerCase()}.text`
-        ),
-        statesChildren: /* @__PURE__ */ jsx(FileStateIcons, { file }),
-        titleChildren: fileT.name,
-        children: /* @__PURE__ */ jsx("div", { className: cn("flex-center flex-1", "overflow-hidden"), children: isImage ? /* @__PURE__ */ jsx(SmartImage, { fileKey: file.key, width: 160, height: 160 }) : isVideo ? /* @__PURE__ */ jsx("video", { src: joinUrl(storageUrl, file.key), autoPlay: true, loop: true, muted: true }) : /* @__PURE__ */ jsx("span", { className: cn("scale-[2]"), children: "\u{1F4C4}" }) })
+        style: { width: WIDTH, height: HEIGHT }
       }
-    ) });
+    );
   };
 }
 

package/dist/src/cms/client/interfaces/components/resources/file/file-list.js

@@ -1,6 +1,5 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
 import 'mime-types';
 import 'sitero-domain';
@@ -12,7 +11,6 @@ import { cn } from '../../../../../../shared/utils/cn.js';
 import { debounce } from '../../../../../../shared/utils/debounce.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
 import { normalizeUnorderedCacheKey } from '../../../../../../shared/utils/normalize-unordered-cache-key.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -30,24 +28,30 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'intor/react';
+import 'next/link';
 import 'next/navigation';
 import '../../../../../../constants/paths/redirect.js';
 import '../../../../../../constants/cms-locale.js';
 import { ListContainer } from '../../ui/blocks/list-container/list-container.js';
 import { FileTable } from './file-table.js';
-import { IsLockedButtons } from './search/is-locked-buttons.js';
-import { TypeButtons } from './search/type-buttons.js';
+import { IsInUseFilter } from './search/is-in-use-filter.js';
+import { IsLockedFilter } from './search/is-locked-filter.js';
+import { TypeFilter } from './search/type-filter.js';
 
 function createFileList({
   fileFindListCardsAction,
-  FileCard
+  FileCard,
+  defaultWebLocale
 }) {
   return function FileList({
     setListItemStates,
+    onLoadingChange,
     // search
     isDeleted,
     // Use in Trash Page
     fileIds,
+    allowedTypes,
     // link
     openNewTab = false,
     // pick
@@ -56,7 +60,6 @@ function createFileList({
     // list
     localKey = "file"
   }) {
-    const { locale } = useTranslator();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
     const [searchString, setSearchString] = useState("");
@@ -64,30 +67,46 @@ function createFileList({
       () => debounce((v) => setSearchString(v), 300),
       []
     );
-    const [type, setType] = useState(null);
+    const [types, setTypes] = useState([]);
+    const effectiveTypes = types.filter(
+      (type) => !allowedTypes || allowedTypes.includes(type)
+    );
+    const queryTypes = effectiveTypes.length ? effectiveTypes : allowedTypes;
     const [isLocked, setIsLocked] = useState(null);
-    useEffect(() => {
+    const [isInUse, setIsInUse] = useState(null);
+    const setIsInUseWithPageReset = (value) => {
+      setPage(1);
+      setIsInUse(value);
+    };
+    const setTypesWithPageReset = (value) => {
       setPage(1);
-    }, [setPage, type, isLocked]);
+      setTypes(value);
+    };
+    const setIsLockedWithPageReset = (value) => {
+      setPage(1);
+      setIsLocked(value);
+    };
     const { data, isFetching, refetch } = useQuery(
       () => fileFindListCardsAction({
-        locale,
+        locale: defaultWebLocale,
         searchString,
-        type,
+        types: queryTypes,
         isDeleted,
         // Use in Trash
         isLocked,
+        isInUse,
         fileIds,
         page,
         pageSize
       }),
       [
         "fileFindListCardsAction",
-        locale,
+        defaultWebLocale,
         searchString,
-        type,
+        normalizeUnorderedCacheKey(queryTypes),
         isDeleted,
         isLocked,
+        isInUse,
         normalizeUnorderedCacheKey(fileIds),
         page,
         pageSize
@@ -102,10 +121,12 @@ function createFileList({
         refetch
       });
     }, [files, data?.total, isFetching, setListItemStates]);
+    useEffect(() => {
+      onLoadingChange?.(isFetching);
+    }, [onLoadingChange, isFetching]);
     return /* @__PURE__ */ jsx(
       ListContainer,
       {
-        localKey,
         setListItemStates,
         page,
         setPage,
@@ -115,39 +136,61 @@ function createFileList({
         searchString,
         setSearchString: debouncedSetSearchString,
         isFetching,
-        headerChildren: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 overflow-x-auto", children: [
-          /* @__PURE__ */ jsx(TypeButtons, { type: type || null, setType }),
-          /* @__PURE__ */ jsx("div", { className: "py-1", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }) }),
-          /* @__PURE__ */ jsx(IsLockedButtons, { isLocked, setIsLocked })
+        filters: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 overflow-x-auto", children: [
+          (!allowedTypes || allowedTypes.length > 1) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              TypeFilter,
+              {
+                types: effectiveTypes,
+                setTypes: setTypesWithPageReset,
+                allowedTypes
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "py-1", children: /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            IsLockedFilter,
+            {
+              isLocked,
+              setIsLocked: setIsLockedWithPageReset
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IsInUseFilter,
+            {
+              isInUse,
+              setIsInUse: setIsInUseWithPageReset
+            }
+          )
         ] }),
-        cardChildren: files.map((file) => {
-          const isPicked = !!pickedItems?.some((item) => item.id === file.id);
-          return /* @__PURE__ */ jsx(
-            FileCard,
+        display: {
+          mode: "switchable",
+          localKey,
+          cards: files.map((file) => {
+            const isPicked = !!pickedItems?.some((item) => item.id === file.id);
+            return /* @__PURE__ */ jsx(
+              FileCard,
+              {
+                file,
+                openNewTab,
+                isPicked,
+                onSelect: handleClick ? () => handleClick(file) : void 0,
+                className: cn(pickedItems && !isPicked && "opacity-50")
+              },
+              file.id
+            );
+          }),
+          table: /* @__PURE__ */ jsx(
+            FileTable,
             {
-              file,
+              files,
+              pickedItems,
+              onSelect: handleClick,
               openNewTab,
-              isPicked,
-              anchorProps: handleClick && {
-                onClick: (e) => {
-                  e.preventDefault();
-                  handleClick(file);
-                }
-              },
-              className: cn(pickedItems && !isPicked && "opacity-50")
-            },
-            file.id
-          );
-        }),
-        tableChildren: /* @__PURE__ */ jsx(
-          FileTable,
-          {
-            files,
-            pickedItems,
-            handleClick,
-            openNewTab
-          }
-        )
+              contentLocale: defaultWebLocale
+            }
+          )
+        }
       }
     );
   };

package/dist/src/cms/client/interfaces/components/resources/file/file-relations-link.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Network } from 'lucide-react';
+import Link from 'next/link';
+import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../constants/paths/redirect.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 'clsx';
+import 'tailwind-merge';
+import { joinUrl } from '../../../../../../shared/utils/join-url.js';
+
+function FileRelationsLink({ fileId }) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: joinUrl(
+        CMS_PATHS.system.storage.file.pathname,
+        fileId,
+        "relations"
+      ),
+      className: "border-border hover:bg-accent/50 flex h-9 items-center gap-3 rounded-md border px-3 text-sm transition-colors duration-100",
+      children: [
+        /* @__PURE__ */ jsx(Network, { "aria-hidden": true, className: "text-muted-foreground size-4" }),
+        /* @__PURE__ */ jsx("p", { className: "line-clamp-1 font-medium", children: t("resources.related-resources.text") })
+      ]
+    }
+  );
+}
+
+export { FileRelationsLink };

package/dist/src/cms/client/interfaces/components/resources/file/file-state-icons.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { Lock, Trash2 } from 'lucide-react';
 import 'mime-types';
 import 'sitero-domain';
@@ -7,13 +8,23 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 
 function FileStateIcons({ file }) {
+  const { t } = useTranslator();
   const isLocked = !!file?.isLocked;
   const isTrash = !!file?.deletedAt;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(Lock, { className: cn(!isLocked && "opacity-10") }),
+    /* @__PURE__ */ jsx(
+      Lock,
+      {
+        className: cn(!isLocked && "opacity-10"),
+        role: "img",
+        "aria-label": t(
+          isLocked ? "resources.file.locked.text" : "resources.file.not-locked.text"
+        ),
+        "aria-hidden": false
+      }
+    ),
     /* @__PURE__ */ jsx(Trash2, { className: cn(isTrash ? "text-destructive" : "opacity-10") })
   ] });
 }

package/dist/src/cms/client/interfaces/components/resources/file/file-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { File } from 'lucide-react';
+import { Circle, Image } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../constants/paths/redirect.js';
@@ -15,7 +15,6 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { joinUrl } from '../../../../../../shared/utils/join-url.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -34,6 +33,9 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '.
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import 'next/link';
+import { NoData } from '../../ui/display/no-data.js';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
 import { Badge } from '../../ui/display/badge.js';
 import { Tick } from '../../ui/features/tick.js';
 import 'next/image';
@@ -41,55 +43,69 @@ import { FileStateIcons } from './file-state-icons.js';
 
 function FileTable({
   files,
+  contentLocale,
   pickedItems,
-  handleClick,
+  onSelect,
   openNewTab
 }) {
-  const { t, locale } = useTranslator();
+  const { t } = useTranslator();
   const router = useRouter();
   return /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "text-muted-foreground", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      onSelect && /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
       /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.file.file-type.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.states.text") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.file.file-type.text") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.states.text") }),
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.file.name.text") }),
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.file.alt.text") })
     ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: files.map((file) => {
       const isPicked = !!pickedItems?.some((item) => item.id === file.id);
-      const fileT = findTranslation(file.translations, locale);
-      const href = joinUrl(
-        CMS_PATHS.system.storage.file.pathname,
-        file?.id
+      const fileT = findTranslation(file.translations, contentLocale);
+      const href = joinUrl(CMS_PATHS.system.storage.file.pathname, file.id);
+      const name = fileT.name || void 0;
+      const alt = fileT.alt || void 0;
+      const title = name ?? t("ui.no-data.text");
+      const isSelecting = onSelect !== void 0;
+      const selectionLabel = t(
+        isPicked ? "ui.picked.text" : "ui.pick.text"
       );
+      function activateRow() {
+        if (onSelect) {
+          onSelect(file);
+          return;
+        }
+        if (openNewTab) {
+          globalThis.open(href, "_blank", "noopener,noreferrer");
+          return;
+        }
+        router.push(href);
+      }
       return /* @__PURE__ */ jsxs(
         TableRow,
         {
+          "data-state": isPicked ? "selected" : void 0,
           className: cn(
-            "cursor-pointer",
+            "focus-visible:outline-ring cursor-pointer focus-visible:outline-2",
             pickedItems && !isPicked && "opacity-50"
           ),
-          onClick: () => {
-            if (handleClick === void 0) {
-              if (openNewTab) {
-                globalThis.open(href);
-              } else {
-                router.push(href);
-              }
-            } else {
-              handleClick(file);
-            }
+          tabIndex: 0,
+          "aria-label": `${isSelecting ? selectionLabel : t("resources.file.text")}: ${title}`,
+          onClick: activateRow,
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            activateRow();
           },
           children: [
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Tick, { isPicked }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(File, { className: "text-muted-foreground" }) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { children: t(
+            isSelecting && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex-center text-muted-foreground/60", children: isPicked ? /* @__PURE__ */ jsx(Tick, { isPicked: true }) : /* @__PURE__ */ jsx(Circle, { "aria-hidden": true, className: "size-5!" }) }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(Image, { className: "text-muted-foreground" }) }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(Badge, { className: "h-5.5 w-fit max-w-32 min-w-0 px-3", children: t(
               `resources.file.file-type.${(file?.type ?? "OTHER").toLowerCase()}.text`
             ) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(FileStateIcons, { file }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("div", { className: "truncate", children: fileT.name }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("p", { className: "truncate", children: fileT.alt }) })
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(FileStateIcons, { file }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: name ? /* @__PURE__ */ jsx("p", { className: "truncate", children: name }) : /* @__PURE__ */ jsx(NoData, {}) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: alt ? /* @__PURE__ */ jsx("p", { className: "truncate", children: alt }) : /* @__PURE__ */ jsx(NoData, {}) })
           ]
         },
         file.id