sitero 0.6.0 → 0.7.0

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

@@ -1,5 +1,6 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { useState, useMemo, useEffect } from 'react';
 import { POST_TYPES } from 'sitero-domain';
 import 'mime-types';
@@ -12,7 +13,6 @@ 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 { DO_NOT_FETCH_KEY } from '../../../../../../shared/list-item.js';
-import 'intor/react';
 import 'lucide-react';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
@@ -30,6 +30,7 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../ui/buttons/action-button.js';
 import 'next/link';
 import 'next/navigation';
 import '../../../../../../constants/paths/redirect.js';
@@ -40,6 +41,7 @@ import { toActiveControlFieldFilters } from './search/control-field-filter-state
 import { ControlFieldsFilters } from './search/control-fields-filters.js';
 
 function createPostList({
+  topics = {},
   customControlFields: defaultCustomControlFields = [],
   postFindListCardsAction,
   PostCard,
@@ -49,10 +51,11 @@ function createPostList({
   return function PostList({
     customControlFields = defaultCustomControlFields,
     enabled = true,
+    isDeleted = false,
     usableFields,
     // search
     type = POST_TYPES.POST,
-    topicId,
+    topicKey,
     authorId,
     postIds,
     excludeIds,
@@ -70,6 +73,7 @@ function createPostList({
     // list
     localKey = "post"
   }) {
+    const { t } = useTranslator();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
     const [searchString, setSearchString] = useState("");
@@ -93,13 +97,14 @@ function createPostList({
       customControlFields,
       usableFields
     );
-    const { data, isFetching } = useQuery(
+    const { data, isFetching, isError, isSuccess, refetch } = useQuery(
       () => postFindListCardsAction({
         locale: defaultWebLocale,
+        ...isDeleted ? { deletion: "deleted" } : {},
         searchString,
         ...type ? { type } : {},
         ...activeControlFieldFilters,
-        topicId,
+        topicKey,
         authorId,
         postIds,
         excludeIds,
@@ -109,29 +114,58 @@ function createPostList({
       [
         "postFindListCardsAction",
         defaultWebLocale,
+        isDeleted,
         searchString,
         type,
         JSON.stringify(activeControlFieldFilters),
-        topicId,
+        topicKey,
         authorId,
         normalizeUnorderedCacheKey(postIds),
         normalizeUnorderedCacheKey(excludeIds),
         page,
         pageSize
       ],
-      { enabled: enabled && topicId !== DO_NOT_FETCH_KEY }
+      { enabled: enabled && topicKey !== DO_NOT_FETCH_KEY }
     );
     const posts = useMemo(() => ensureArray(data?.items), [data?.items]);
+    const lastPage = Math.max(1, Math.ceil((data?.total ?? 0) / pageSize));
+    if (isSuccess && !isFetching && page > lastPage) setPage(lastPage);
     useEffect(() => {
       setListItemStates?.({
         items: posts,
-        count: data?.total ?? 0,
-        isFetching
+        ...isSuccess && data ? { count: data.total } : {},
+        isError,
+        isFetching,
+        refetch
       });
-    }, [isFetching, data?.total, posts, setListItemStates]);
+    }, [
+      isFetching,
+      isError,
+      isSuccess,
+      data,
+      posts,
+      refetch,
+      setListItemStates
+    ]);
     useEffect(() => {
       onLoadingChange?.(isFetching);
     }, [onLoadingChange, isFetching]);
+    if (isError) {
+      return /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex flex-col items-start gap-3", children: [
+        /* @__PURE__ */ jsx("p", { children: t("ui.operation-error.unknown.text") }),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            isLoading: isFetching,
+            isDisabled: isFetching,
+            onClick: () => {
+              void refetch();
+            },
+            children: t("ui.retry.text")
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ jsx(
       ListContainer,
       {
@@ -173,6 +207,7 @@ function createPostList({
           table: /* @__PURE__ */ jsx(
             Table,
             {
+              topics,
               posts,
               pickedItems,
               onSelect: handleClick,

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

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { Eye, EyeOff, MapPinCheckInside, Star, House } from 'lucide-react';
 import 'mime-types';
 import 'sitero-domain';
@@ -9,9 +10,24 @@ import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
 
 function PostStateIcons({ post }) {
+  const { t } = useTranslator();
   const { isActive, isSlugActive, index, isFeatured, isShownOnHome } = post;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    isActive ? /* @__PURE__ */ jsx(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx(EyeOff, { className: "text-destructive size-4" }),
+    isActive ? /* @__PURE__ */ jsx(
+      Eye,
+      {
+        className: "size-4",
+        role: "img",
+        "aria-label": t("resources.post.published.text")
+      }
+    ) : /* @__PURE__ */ jsx(
+      EyeOff,
+      {
+        className: "text-destructive size-4",
+        role: "img",
+        "aria-label": t("resources.post.unpublished.text")
+      }
+    ),
     index !== void 0 && /* @__PURE__ */ jsx(
       "p",
       {

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

@@ -45,6 +45,7 @@ import { resolvePostPresentation } from './post-presentation.js';
 import { PostStateIcons } from './post-state-icons.js';
 
 function PostTable({
+  topics = {},
   posts,
   contentLocale,
   strategies,
@@ -64,14 +65,17 @@ function PostTable({
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.post.excerpt.text") })
     ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: posts.map((post) => {
-      const topic = post.topic;
-      const topicT = findTranslation(topic?.translations, contentLocale);
+      const topicT = {
+        title: topics[post.topicKey ?? ""]?.title[contentLocale] ?? post.topicKey ?? ""
+      };
       const isPicked = !!pickedItems?.some((item) => item.id === post.id);
       const postT = findTranslation(post.translations, contentLocale);
-      const strategy = strategies?.[post.type]?.[topic?.slug ?? ""] ?? {};
+      const strategy = strategies?.[post.type]?.[post.topicKey ?? ""] ?? {};
       const presentation = resolvePostPresentation(postT, strategy);
       const href = joinUrl(
-        CMS_PATHS.content["content-management"].post.pathname(topic?.slug),
+        CMS_PATHS.content["content-management"].post.pathname(
+          post.topicKey ?? void 0
+        ),
         post?.id
       );
       const title = presentation.title;

package/dist/src/cms/client/interfaces/components/resources/post/search/control-fields-filters.js

@@ -7,7 +7,7 @@ import { resolveControlFieldLabel } from '../content/resolve-control-field-label
 const CONTROL_FIELDS = [
   {
     key: "isActive",
-    label: "ui.control-fields.is-active.text",
+    label: "resources.post.is-public.text",
     icon: Eye
   },
   {
@@ -47,6 +47,10 @@ function ControlFieldsFilters({
         value: controlFields[key] ?? null,
         onChange: (value) => setControlFields((previous) => ({ ...previous, [key]: value })),
         label: t(label),
+        ...key === "isActive" ? {
+          trueLabel: t("resources.post.published.text"),
+          falseLabel: t("resources.post.unpublished.text")
+        } : {},
         icon: Icon
       },
       key

package/dist/src/cms/client/interfaces/components/resources/seo-metadata/seo-form/seo-form.js

@@ -39,6 +39,7 @@ import { SeoFormSideFields } from './seo-form-side-fields.js';
 
 function createSeoForm({
   postFindDetailAction,
+  pageFindDetailAction,
   seoMetadataUpsertAction,
   useSeoMetadataUpsertFormData,
   BasicTags,
@@ -50,22 +51,37 @@ function createSeoForm({
   function allowField(field) {
     return fields.includes(field);
   }
-  return function SeoForm({ id, isArticle, setIsOpen }) {
+  return function SeoForm({
+    id,
+    ownerType = "post",
+    isArticle,
+    setIsOpen
+  }) {
     const { t, locale } = useTranslator();
     const {
       data: post,
       isFetching,
       refetch
     } = useCmsQuery(
-      () => postFindDetailAction({ id }),
-      ["postFindDetailAction", id],
-      { select: (data) => data?.post }
+      async () => {
+        if (ownerType === "page") {
+          if (!pageFindDetailAction)
+            return { success: false, error: { code: "PAGE_UNAVAILABLE" } };
+          const result2 = await pageFindDetailAction({ id });
+          return result2.success ? { success: true, data: { resource: result2.data.page } } : result2;
+        }
+        const result = await postFindDetailAction({ id });
+        return result.success ? { success: true, data: { resource: result.data.post } } : result;
+      },
+      ["seoMetadataOwnerDetail", ownerType, id],
+      { select: (data) => data?.resource }
     );
     const hasCreated = ensureArray(post?.seoMetadatas).length > 0;
-    const postTranslations = ensureArray(post?.translations);
+    const postTranslations = post?.translations;
     const { formData, setFormData } = useSeoMetadataUpsertFormData({
       id,
-      post
+      post,
+      ownerType
     });
     const { execute, isPending, fieldErrors } = useCmsCommand(
       () => seoMetadataUpsertAction({ formData }),
@@ -76,15 +92,14 @@ function createSeoForm({
       locale,
       fieldErrors
     );
-    const isProcessing = isFetching || isPending;
+    const isProcessing = isFetching || isPending || !post;
     useEffect(() => {
       if (!hasCreated && post && postTranslations) {
         setFormData((prev) => ({
-          ...prev,
-          postId: post.id,
+          ...ownerType === "page" ? { pageId: post.id } : { postId: post.id },
           translations: prev.translations.map((t2) => {
             const postT = postTranslations.find((pt) => pt.locale === t2.locale);
-            if (!postT) throw new Error("No translations (seeder problem?)");
+            if (!postT) return t2;
             const title = postT.title ?? t2.title;
             const description = postT.description ?? t2.description;
             return {
@@ -96,63 +111,71 @@ function createSeoForm({
           })
         }));
       }
-    }, [post, hasCreated, postTranslations, setFormData]);
-    return /* @__PURE__ */ jsx(Form, { onSubmit: () => void execute(), children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-6 pb-64", children: [
-        /* @__PURE__ */ jsx(
-          BasicTags,
-          {
-            formData,
-            setFormData,
-            errors: localizedFieldErrors,
-            isProcessing,
-            isArticle,
-            allowField
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          OpenGraphTags,
-          {
-            formData,
-            setFormData,
-            errors: localizedFieldErrors,
-            isProcessing,
-            isArticle,
-            allowField
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TwitterTags,
-          {
-            formData,
-            setFormData,
-            errors: localizedFieldErrors,
-            isProcessing,
-            isArticle,
-            allowField
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          JsonLdTags,
-          {
-            formData,
-            setFormData,
-            errors: localizedFieldErrors,
-            isProcessing,
-            allowField
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "max-lg:fixed max-lg:bottom-0 max-lg:left-1/2 max-lg:w-full max-lg:-translate-x-1/2", children: /* @__PURE__ */ jsx(
-        SeoFormSideFields,
-        {
-          hasCreated,
-          isLoading: isFetching,
-          isTriggering: isPending,
-          setIsOpen
-        }
-      ) })
-    ] }) });
+    }, [post, ownerType, hasCreated, postTranslations, setFormData]);
+    return /* @__PURE__ */ jsx(
+      Form,
+      {
+        onSubmit: () => {
+          if (!isProcessing) void execute();
+        },
+        children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-6 pb-64", children: [
+            /* @__PURE__ */ jsx(
+              BasicTags,
+              {
+                formData,
+                setFormData,
+                errors: localizedFieldErrors,
+                isProcessing,
+                isArticle,
+                allowField
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              OpenGraphTags,
+              {
+                formData,
+                setFormData,
+                errors: localizedFieldErrors,
+                isProcessing,
+                isArticle,
+                allowField
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TwitterTags,
+              {
+                formData,
+                setFormData,
+                errors: localizedFieldErrors,
+                isProcessing,
+                isArticle,
+                allowField
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              JsonLdTags,
+              {
+                formData,
+                setFormData,
+                errors: localizedFieldErrors,
+                isProcessing,
+                allowField
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-lg:fixed max-lg:bottom-0 max-lg:left-1/2 max-lg:w-full max-lg:-translate-x-1/2", children: /* @__PURE__ */ jsx(
+            SeoFormSideFields,
+            {
+              hasCreated,
+              isLoading: isFetching || !post,
+              isTriggering: isPending,
+              setIsOpen
+            }
+          ) })
+        ] })
+      }
+    );
   };
 }
 

package/dist/src/cms/client/interfaces/components/resources/seo-metadata/seo-metadata-dialog.js

@@ -39,6 +39,7 @@ function createSeoMetadataDialog({
   return function SeoMetadataDialog({
     id,
     isArticle = false,
+    ownerType = "post",
     // ui states
     isLoading = false,
     isDisabled = false
@@ -58,7 +59,16 @@ function createSeoMetadataDialog({
       ) }),
       /* @__PURE__ */ jsxs(DialogContent, { className: "w-[calc(100%-24px)] max-lg:px-0", children: [
         /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Dialog" }),
-        /* @__PURE__ */ jsx("div", { className: "relative flex h-[80svh] w-full gap-4", children: /* @__PURE__ */ jsx("div", { className: "w-80 flex-1 overflow-auto p-2", children: id && /* @__PURE__ */ jsx(SeoForm, { id, isArticle, setIsOpen }) }) })
+        /* @__PURE__ */ jsx("div", { className: "relative flex h-[80svh] w-full gap-4", children: /* @__PURE__ */ jsx("div", { className: "w-80 flex-1 overflow-auto p-2", children: id && /* @__PURE__ */ jsx(
+          SeoForm,
+          {
+            ownerType,
+            id,
+            isArticle,
+            setIsOpen
+          },
+          `${ownerType}:${id}`
+        ) }) })
       ] })
     ] });
   };

package/dist/src/cms/client/interfaces/components/ui/blocks/list-container/list-container.js

@@ -105,7 +105,7 @@ function ListContainer({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: isFetching ? /* @__PURE__ */ jsx(Spinner, {}) : isNotFound ? /* @__PURE__ */ jsx(NoData, {}) : isCardDisplay ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: displayedContent }) : displayedContent }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: isFetching || isNotFound ? /* @__PURE__ */ jsx("div", { className: "flex h-10 items-center", children: isFetching ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(NoData, {}) }) : isCardDisplay ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start gap-4", children: displayedContent }) : displayedContent }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("div", { className: "flex w-52 gap-3", children: isSwitchable && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(

package/dist/src/cms/client/interfaces/components/ui/blocks/list-container/pagination.js

@@ -35,16 +35,16 @@ function Pagination({
   total = 0
 }) {
   const isMobile = useIsMobile();
-  const totalPages = Math.ceil(total / pageSize);
-  const isFirst = page === 1;
-  const isLastPage = page === totalPages;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const isFirst = page <= 1;
+  const isLastPage = page >= totalPages;
   const handlePrev = () => {
     if (isFirst) return;
-    setPage((prev) => prev - 1);
+    setPage((prev) => Math.max(1, Math.min(prev - 1, totalPages)));
   };
   const handleNext = () => {
     if (isLastPage) return;
-    setPage((prev) => prev + 1);
+    setPage((prev) => Math.min(totalPages, prev + 1));
   };
   const siblingsCount = 2;
   let startPage = Math.max(2, page - siblingsCount);
@@ -62,15 +62,15 @@ function Pagination({
   for (let i = startPage; i <= endPage; i++) {
     pages.push(i);
   }
-  const isAtFirstPage = page === 1;
-  const isAtLastPage = page === totalPages;
+  const isAtFirstPage = page <= 1;
+  const isAtLastPage = page >= totalPages;
   return /* @__PURE__ */ jsx(Pagination$1, { className: "flex-1", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
     /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { disabled: isAtFirstPage, onClick: handlePrev }) }),
     !isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
         PaginationLink,
         {
-          isActive: page === 1,
+          isActive: page <= 1,
           disabled: isAtFirstPage,
           onClick: () => setPage(1),
           children: "1"
@@ -92,7 +92,7 @@ function Pagination({
       totalPages > 1 && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
         PaginationLink,
         {
-          isActive: page === totalPages,
+          isActive: page >= totalPages,
           disabled: isAtLastPage,
           onClick: () => setPage(totalPages),
           children: totalPages

package/dist/src/cms/client/interfaces/components/ui/features/accordion/accordion-header.js

@@ -10,19 +10,31 @@ import { cn } from '../../../../../../../shared/utils/cn.js';
 
 function AccordionHeader({
   count,
+  showCount = count !== void 0,
   children
 }) {
+  const isZero = count === 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center gap-3 font-medium", children: [
-    count !== void 0 && /* @__PURE__ */ jsx(
+    showCount && /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "flex-center",
-          "h-5 rounded-full px-3",
+          "h-5 w-14 shrink-0 rounded-full px-2",
           "bg-primary-foreground",
           "shadow-xs"
         ),
-        children: /* @__PURE__ */ jsx("p", { className: "text-xs", children: count })
+        children: count !== void 0 && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "truncate text-xs tabular-nums",
+              isZero ? "text-muted-foreground" : "font-semibold"
+            ),
+            title: String(count),
+            children: count
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsx("div", { className: cn("text-sm", "font-500"), children })

package/dist/src/cms/client/interfaces/components/ui/features/accordion/accordion.js

@@ -11,7 +11,7 @@ import { cn } from '../../../../../../../shared/utils/cn.js';
 import AccordionHeader from './accordion-header.js';
 
 function Accordion({
-  initialOpen = false,
+  initialOpen,
   deps,
   // children
   children,
@@ -21,14 +21,12 @@ function Accordion({
   className,
   ...props
 }) {
-  const [isOpen, setIsOpen] = useState(initialOpen);
+  const [open, setOpen] = useState(initialOpen);
+  if (open === void 0 && initialOpen !== void 0) setOpen(initialOpen);
+  const isOpen = open ?? initialOpen ?? false;
   const containerRef = useRef(null);
   const contentId = useId();
   const triggerId = useId();
-  useEffect(() => {
-    const el = containerRef.current;
-    if (el) el.style.maxHeight = initialOpen ? `${el.scrollHeight}px` : "0";
-  }, [initialOpen]);
   useEffect(() => {
     const el = containerRef.current;
     if (el) el.style.maxHeight = isOpen ? `${el.scrollHeight}px` : "0";
@@ -50,7 +48,7 @@ function Accordion({
             id: triggerId,
             "aria-controls": contentId,
             "aria-expanded": isOpen,
-            onClick: () => setIsOpen((prev) => !prev),
+            onClick: () => setOpen(!isOpen),
             className: cn(
               "h-9 w-full",
               "flex items-center justify-between",

package/dist/src/cms/client/interfaces/components/ui/form/control-fields/control-fields-display.js

@@ -26,7 +26,7 @@ function ControlFieldsDisplay({
       {
         label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
           formData["isActive"] ? /* @__PURE__ */ jsx(Eye, {}) : /* @__PURE__ */ jsx(EyeOff, { className: "text-destructive" }),
-          t("ui.control-fields.is-active.text")
+          fields.find((field) => field.key === "isActive")?.label ?? t("ui.control-fields.is-active.text")
         ] }),
         children: /* @__PURE__ */ jsx(
           Checkbox,

package/dist/src/cms/client/interfaces/components/ui/form/control-fields/control-fields-input.js

@@ -37,7 +37,7 @@ function ControlFieldsInput({
         htmlFor: "isActive",
         label: /* @__PURE__ */ jsxs("span", { className: "flex-center gap-2", children: [
           formData["isActive"] ? /* @__PURE__ */ jsx(Eye, {}) : /* @__PURE__ */ jsx(EyeOff, { className: "text-destructive" }),
-          t("ui.control-fields.is-active.text")
+          fields.find((field) => field.key === "isActive")?.label ?? t("ui.control-fields.is-active.text")
         ] }),
         children: /* @__PURE__ */ jsx(
           Checkbox,