create-m5kdev 0.25.1 → 0.25.2

package/templates/minimal-app/apps/webapp/src/modules/posts/components/PostCard.tsx.tpl

@@ -0,0 +1,138 @@
+import { Button, Card, Chip } from "@heroui/react";
+import { EyeIcon, PencilLineIcon, SendHorizontalIcon, Trash2Icon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { PostRow } from "../hooks/usePostsList";
+import { formatDate, getReadingTime } from "../posts.utils";
+
+interface PostCardProps {
+  row: PostRow;
+  isSelected: boolean;
+  isPublishing: boolean;
+  isDeleting: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  onPublish: () => void;
+  onDelete: () => void;
+}
+
+export function PostCard({
+  row,
+  isSelected,
+  isPublishing,
+  isDeleting,
+  onSelect,
+  onEdit,
+  onPublish,
+  onDelete,
+}: PostCardProps) {
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: post row card with nested action buttons
+    <Card
+      role="button"
+      tabIndex={0}
+      onClick={(event) => {
+        if ((event.target as HTMLElement).closest("button")) {
+          return;
+        }
+        onSelect();
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSelect();
+        }
+      }}
+      className={
+        isSelected
+          ? "cursor-pointer rounded-[30px] border border-emerald-300 bg-emerald-950 text-emerald-50 shadow-[0_20px_44px_rgba(31,79,70,0.24)]"
+          : "cursor-pointer rounded-[30px] border border-white/70 bg-panel shadow-[0_18px_40px_rgba(81,50,24,0.1)]"
+      }
+    >
+      <Card.Header className="flex items-start justify-between gap-4 px-5 pt-5">
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <Chip
+              size="sm"
+              color={row.status === "published" ? "success" : "default"}
+              variant={isSelected ? "primary" : "soft"}
+            >
+              {row.status === "published" ? t("posts.filters.published") : t("posts.filters.draft")}
+            </Chip>
+            <span className={isSelected ? "text-emerald-100/80" : "text-muted-ink"}>
+              {getReadingTime(row.content)}
+            </span>
+          </div>
+          <div>
+            <h3 className="font-editorial text-3xl leading-none">{row.title}</h3>
+            <p
+              className={
+                isSelected
+                  ? "mt-3 text-sm leading-7 text-emerald-100/80"
+                  : "mt-3 text-sm leading-7 text-muted-ink"
+              }
+            >
+              {row.excerpt}
+            </p>
+          </div>
+        </div>
+        <Button
+          isIconOnly
+          className={`rounded-full ${isSelected ? "bg-emerald-100 text-emerald-950" : "bg-white/80 text-ink"}`}
+          variant={isSelected ? "secondary" : "ghost"}
+        >
+          <EyeIcon className="h-4 w-4" />
+        </Button>
+      </Card.Header>
+      <Card.Content className="flex flex-col gap-4 px-5 pb-5">
+        <div className="flex flex-wrap items-center gap-3 text-sm">
+          <span className={isSelected ? "text-emerald-100/80" : "text-muted-ink"}>
+            {t("posts.meta.updated")}: {formatDate(row.updatedAt ?? row.createdAt)}
+          </span>
+          {row.publishedAt ? (
+            <span className={isSelected ? "text-emerald-100/80" : "text-muted-ink"}>
+              {t("posts.meta.published")}: {formatDate(row.publishedAt)}
+            </span>
+          ) : null}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            className={`rounded-full ${isSelected ? "bg-emerald-100 text-emerald-950" : ""}`}
+            variant={isSelected ? "secondary" : "ghost"}
+            onPress={onEdit}
+          >
+            <span className="inline-flex items-center gap-2">
+              <PencilLineIcon className="h-4 w-4" />
+              {t("posts.actions.edit")}
+            </span>
+          </Button>
+          {row.status === "draft" ? (
+            <Button
+              className="rounded-full"
+              variant="secondary"
+              isPending={isPublishing}
+              onPress={onPublish}
+            >
+              <span className="inline-flex items-center gap-2">
+                <SendHorizontalIcon className="h-4 w-4" />
+                {t("posts.actions.publish")}
+              </span>
+            </Button>
+          ) : null}
+          <Button
+            className="rounded-full"
+            variant="danger"
+            isPending={isDeleting}
+            onPress={onDelete}
+          >
+            <span className="inline-flex items-center gap-2">
+              <Trash2Icon className="h-4 w-4" />
+              {t("posts.actions.delete")}
+            </span>
+          </Button>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/posts/components/PostEditorModal.tsx.tpl

@@ -0,0 +1,124 @@
+import { Button, FieldError, Form, Input, Label, Modal, TextArea, TextField } from "@heroui/react";
+import type { PostCreateInputSchema } from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
+import type { FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import type { PostRow } from "../hooks/usePostsList";
+
+interface PostEditorModalProps {
+  isOpen: boolean;
+  /** Row being edited; undefined means creating a new post. */
+  post?: PostRow;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: (payload: PostCreateInputSchema, id?: string) => Promise<boolean>;
+}
+
+/**
+ * Uncontrolled HeroUI form: native HTML validation (`isRequired`) guards the
+ * fields and values are read from FormData on submit — no form library, no
+ * per-field state.
+ */
+export function PostEditorModal({ isOpen, post, isSaving, onClose, onSave }: PostEditorModalProps) {
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const payload: PostCreateInputSchema = {
+      title: String(formData.get("title") ?? "").trim(),
+      slug: String(formData.get("slug") ?? "").trim() || undefined,
+      excerpt: String(formData.get("excerpt") ?? "").trim() || undefined,
+      content: String(formData.get("content") ?? "").trim(),
+    };
+
+    if (await onSave(payload, post?.id)) {
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <Modal.Backdrop>
+        <Modal.Container scroll="inside" size="lg" className="max-w-5xl">
+          <Modal.Dialog>
+            {/* key remounts the form so defaultValue resets when switching rows */}
+            <Form key={post?.id ?? "new"} className="contents" onSubmit={onSubmit}>
+              <Modal.Header className="flex flex-col gap-2 px-6 pt-6">
+                <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-amber-700/80">
+                  {post ? t("posts.editor.editEyebrow") : t("posts.editor.newEyebrow")}
+                </p>
+                <Modal.Heading className="font-editorial text-4xl leading-none text-ink">
+                  {post ? t("posts.editor.editTitle") : t("posts.editor.newTitle")}
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="grid gap-4 px-6 pb-2">
+                <TextField
+                  isRequired
+                  name="title"
+                  defaultValue={post?.title ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label className="text-sm font-medium">{t("posts.editor.fields.title")}</Label>
+                  <Input className="rounded-lg" />
+                  <FieldError />
+                </TextField>
+                <TextField
+                  name="slug"
+                  defaultValue={post?.slug ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label className="text-sm font-medium">{t("posts.editor.fields.slug")}</Label>
+                  <Input className="rounded-lg" />
+                  <FieldError />
+                </TextField>
+                <TextField
+                  name="excerpt"
+                  defaultValue={post?.excerpt ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label className="text-sm font-medium">{t("posts.editor.fields.excerpt")}</Label>
+                  <TextArea className="rounded-lg min-h-[5.5rem]" rows={3} />
+                  <FieldError />
+                </TextField>
+                <TextField
+                  isRequired
+                  name="content"
+                  defaultValue={post?.content ?? ""}
+                  variant="secondary"
+                  className="grid gap-2"
+                >
+                  <Label className="text-sm font-medium">{t("posts.editor.fields.content")}</Label>
+                  <TextArea className="rounded-lg min-h-[12rem]" rows={10} />
+                  <FieldError />
+                </TextField>
+              </Modal.Body>
+              <Modal.Footer className="px-6 pb-6">
+                <Button className="rounded-full" variant="tertiary" type="button" onPress={onClose}>
+                  {t("posts.editor.cancel")}
+                </Button>
+                <Button
+                  className="rounded-full"
+                  variant="primary"
+                  type="submit"
+                  isPending={isSaving}
+                >
+                  {post ? t("posts.editor.save") : t("posts.editor.create")}
+                </Button>
+              </Modal.Footer>
+            </Form>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/posts/hooks/usePostActions.ts.tpl

@@ -0,0 +1,116 @@
+import { useDialog } from "@m5kdev/web-ui/components/DialogProvider";
+import type {
+  PostCreateInputSchema,
+  PostPublishInputSchema,
+  PostSoftDeleteInputSchema,
+  PostUpdateInputSchema,
+} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useTRPC } from "@/utils/trpc";
+
+/**
+ * Reusable post mutations: save (create/update), publish, and delete with a
+ * confirmation dialog. Toasts and list invalidation live here so any component
+ * can trigger the same action with the same behavior.
+ */
+export function usePostActions() {
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const showDialog = useDialog();
+
+  const invalidateList = async () => {
+    await queryClient.invalidateQueries(trpc.posts.list.queryFilter());
+  };
+
+  const onError = (error: unknown) => {
+    toast.error(error instanceof Error ? error.message : String(error));
+  };
+
+  const createMutation = useMutation(
+    trpc.posts.create.mutationOptions({
+      onSuccess: async () => {
+        toast.success(t("posts.toast.created"));
+        await invalidateList();
+      },
+      onError,
+    })
+  );
+
+  const updateMutation = useMutation(
+    trpc.posts.update.mutationOptions({
+      onSuccess: async () => {
+        toast.success(t("posts.toast.updated"));
+        await invalidateList();
+      },
+      onError,
+    })
+  );
+
+  const publishMutation = useMutation(
+    trpc.posts.publish.mutationOptions({
+      onSuccess: async () => {
+        toast.success(t("posts.toast.published"));
+        await invalidateList();
+      },
+      onError,
+    })
+  );
+
+  const deleteMutation = useMutation(
+    trpc.posts.softDelete.mutationOptions({
+      onSuccess: async () => {
+        toast.success(t("posts.toast.deleted"));
+        await invalidateList();
+      },
+      onError,
+    })
+  );
+
+  /** Create when `id` is missing, update otherwise. Resolves false on failure (toast already shown). */
+  const savePost = async (payload: PostCreateInputSchema, id?: string): Promise<boolean> => {
+    try {
+      if (id) {
+        await updateMutation.mutateAsync({ id, ...payload } as PostUpdateInputSchema);
+      } else {
+        await createMutation.mutateAsync(payload);
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const publishPost = (id: string) => {
+    void publishMutation
+      .mutateAsync({ id } satisfies PostPublishInputSchema)
+      .catch(() => undefined);
+  };
+
+  const deletePost = (id: string) => {
+    showDialog({
+      title: t("posts.deleteDialog.title"),
+      description: t("posts.deleteDialog.body"),
+      intent: "danger",
+      cancelable: true,
+      confirmLabel: t("posts.deleteDialog.confirm"),
+      cancelLabel: t("posts.deleteDialog.cancel"),
+      onConfirm: () => {
+        void deleteMutation
+          .mutateAsync({ id } satisfies PostSoftDeleteInputSchema)
+          .catch(() => undefined);
+      },
+    });
+  };
+
+  return {
+    savePost,
+    publishPost,
+    deletePost,
+    isSaving: createMutation.isPending || updateMutation.isPending,
+    publishingId: publishMutation.isPending ? publishMutation.variables?.id : undefined,
+    deletingId: deleteMutation.isPending ? deleteMutation.variables?.id : undefined,
+  };
+}

package/templates/minimal-app/apps/webapp/src/modules/posts/hooks/usePostsList.ts.tpl

@@ -0,0 +1,92 @@
+import {
+  POST_FILTER_VALUES,
+  POSTS_PAGE_SIZE,
+} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.constants";
+import type {
+  PostsListInputSchema,
+  PostsListOutputSchema,
+} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { parseAsInteger, parseAsString, parseAsStringLiteral, useQueryState } from "nuqs";
+import { startTransition, useDeferredValue, useMemo } from "react";
+import { useTRPC } from "@/utils/trpc";
+
+export type PostStatusFilter = (typeof POST_FILTER_VALUES)[number];
+export type PostRow = PostsListOutputSchema["rows"][number];
+
+const STATUS_PARSER = parseAsStringLiteral(POST_FILTER_VALUES).withDefault("all");
+
+/** List query plus its URL state (search, status filter, page) and derived stats. */
+export function usePostsList() {
+  const trpc = useTRPC();
+
+  const [search, setSearchParam] = useQueryState("search", parseAsString.withDefault(""));
+  const [status, setStatusParam] = useQueryState<PostStatusFilter>("status", STATUS_PARSER);
+  const [page, setPageParam] = useQueryState("page", parseAsInteger.withDefault(1));
+
+  const deferredSearch = useDeferredValue(search);
+
+  const listInput = useMemo<PostsListInputSchema>(
+    () => ({
+      page,
+      limit: POSTS_PAGE_SIZE,
+      search: deferredSearch || undefined,
+      status: status === "all" ? undefined : status,
+      sort: "updatedAt",
+      order: "desc",
+    }),
+    [deferredSearch, page, status]
+  );
+
+  const { data, isLoading, isFetching } = useQuery(
+    trpc.posts.list.queryOptions(listInput) as unknown as UseQueryOptions<PostsListOutputSchema>
+  );
+
+  const rows = data?.rows ?? [];
+  const total = data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / POSTS_PAGE_SIZE));
+
+  const stats = useMemo(
+    () => ({
+      published: rows.filter((row) => row.status === "published").length,
+      drafts: rows.filter((row) => row.status === "draft").length,
+      total,
+    }),
+    [rows, total]
+  );
+
+  const setSearch = (value: string) => {
+    startTransition(() => {
+      void setSearchParam(value || null);
+      void setPageParam(1);
+    });
+  };
+
+  const setStatus = (value: PostStatusFilter) => {
+    startTransition(() => {
+      void setStatusParam(value);
+      void setPageParam(1);
+    });
+  };
+
+  const goToPage = (next: number) => {
+    startTransition(() => {
+      void setPageParam(Math.min(Math.max(1, next), pageCount));
+    });
+  };
+
+  return {
+    rows,
+    total,
+    pageCount,
+    stats,
+    page,
+    search,
+    status,
+    isLoading,
+    isFetching,
+    setSearch,
+    setStatus,
+    goToPage,
+  };
+}

package/templates/minimal-app/apps/webapp/src/modules/posts/hooks/usePostsRoute.ts.tpl

@@ -0,0 +1,13 @@
+import { usePostActions } from "./usePostActions";
+import { usePostsList } from "./usePostsList";
+
+/**
+ * Screen-level hook for the posts route: composes the list query/URL state and
+ * the reusable post actions so the route component makes a single call.
+ */
+export function usePostsRoute() {
+  const list = usePostsList();
+  const actions = usePostActions();
+
+  return { ...list, ...actions };
+}

package/templates/minimal-app/apps/webapp/src/modules/posts/posts.utils.ts.tpl

@@ -0,0 +1,16 @@
+export function formatDate(value: Date | null | undefined): string {
+  if (!value) {
+    return "Not scheduled";
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+export function getReadingTime(content: string): string {
+  const words = content.trim().split(/\s+/).filter(Boolean).length;
+  const minutes = Math.max(1, Math.ceil(words / 180));
+  return `${minutes} min read`;
+}

package/templates/minimal-app/apps/webapp/src/navigation/navigation.config.tsx.tpl

@@ -0,0 +1,85 @@
+import type { TFunction } from "i18next";
+import {
+  BookTextIcon,
+  Building2Icon,
+  GiftIcon,
+  SettingsIcon,
+  ShieldCheckIcon,
+  UserCogIcon,
+  UsersIcon,
+} from "lucide-react";
+
+/** Single source of truth for app paths — used by the Router and the sidebar. */
+export const APP_ROUTES = {
+  home: "/",
+  posts: "/posts",
+  organization: {
+    members: "/organization/members",
+    manage: "/organization/manage",
+    preferences: "/organization/preferences",
+  },
+  user: {
+    preferences: "/user/preferences",
+    invite: "/user/invite",
+  },
+  admin: "/admin/users",
+  billing: "/billing",
+} as const;
+
+/**
+ * Sidebar navigation for AppSidebarContent: top-level items plus collapsible
+ * groups. Labels are translated by the caller so the config stays a plain list.
+ */
+export function buildNavigationItems(t: TFunction) {
+  return [
+    {
+      label: t("layout.navigation.posts"),
+      icon: <BookTextIcon className="h-4 w-4" />,
+      link: APP_ROUTES.posts,
+    },
+    {
+      label: t("layout.navigation.organization"),
+      icon: <Building2Icon className="h-4 w-4" />,
+      link: APP_ROUTES.organization.members,
+      subItems: [
+        {
+          label: t("layout.navigation.members"),
+          icon: <UsersIcon className="h-4 w-4" />,
+          link: APP_ROUTES.organization.members,
+        },
+        {
+          label: t("layout.navigation.childOrgs"),
+          icon: <Building2Icon className="h-4 w-4" />,
+          link: APP_ROUTES.organization.manage,
+        },
+        {
+          label: t("layout.navigation.orgPreferences"),
+          icon: <SettingsIcon className="h-4 w-4" />,
+          link: APP_ROUTES.organization.preferences,
+        },
+      ],
+    },
+    {
+      label: t("layout.navigation.account"),
+      icon: <UserCogIcon className="h-4 w-4" />,
+      link: APP_ROUTES.user.preferences,
+      subItems: [
+        {
+          label: t("layout.navigation.profile"),
+          icon: <UserCogIcon className="h-4 w-4" />,
+          link: APP_ROUTES.user.preferences,
+        },
+        {
+          label: t("layout.navigation.invites"),
+          icon: <GiftIcon className="h-4 w-4" />,
+          link: APP_ROUTES.user.invite,
+        },
+      ],
+    },
+    {
+      label: t("layout.navigation.admin"),
+      icon: <ShieldCheckIcon className="h-4 w-4" />,
+      link: APP_ROUTES.admin,
+    },
+  ];
+}

package/templates/minimal-app/apps/webapp/translations/en/blog-app.json.tpl

@@ -13,6 +13,8 @@
     },
     "navigation": {
       "posts": "Posts",
+      "organization": "Organization",
+      "account": "Account",
       "members": "Members",
       "childOrgs": "Child orgs",
       "orgPreferences": "Org preferences",

package/templates/minimal-app/pnpm-workspace.yaml.tpl

@@ -6,11 +6,12 @@ catalog:
   '@heroui/react': 3.0.3
   '@heroui/styles': 3.0.3
   '@libsql/client': 0.17.0
-  '@m5kdev/backend': 0.21.3
-  '@m5kdev/commons': 0.21.3
-  '@m5kdev/config': 0.21.3
-  '@m5kdev/frontend': 0.21.3
-  '@m5kdev/web-ui': 0.21.3
+  '@m5kdev/backend': 0.25.1
+  '@m5kdev/commons': 0.25.1
+  '@m5kdev/config': 0.25.1
+  '@m5kdev/email': 0.25.1
+  '@m5kdev/frontend': 0.25.1
+  '@m5kdev/web-ui': 0.25.1
   '@react-email/components': 1.0.1
   '@tailwindcss/vite': 4.1.11
   '@tanstack/react-query': 5.83.0