robodev 0.10.0 → 0.12.0

package/templates/space/apps/fe/src/components/features/planets/details/PlanetDetailsPage.tsx

@@ -0,0 +1,139 @@
+import { Button, Typography } from "@povio/ui";
+import { Pencil } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { useAuth } from "@/hooks/useAuth";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { DateUtils } from "@/utils/date.utils";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
+
+interface PlanetDetailsPageProps {
+  planet: PlanetModels.PlanetsGetResponseDto;
+}
+
+export function PlanetDetailsPage({ planet }: PlanetDetailsPageProps) {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const imageSrc = planet.image?.url ?? getFallbackImageUrl({ width: 800, height: 450 });
+  const createdDate = DateUtils.formatDate(new Date(planet.createdAt));
+  const updatedDate = DateUtils.formatDate(new Date(planet.updatedAt));
+  const discoveryDate = planet.discoveryDate ? DateUtils.formatDate(new Date(planet.discoveryDate)) : null;
+  const creatorName = planet.creatorName ?? t(($) => $.planets.card.unknownCreator);
+  // Frontend ownership checks are for UI affordances only; the router enforces ownership again on update/delete.
+  const canEdit = user?.id === planet.userId;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        enableBack
+        backProps={{ backLink: { to: "/planets" } }}
+        title={planet.name}
+        actions={
+          canEdit && (
+            <Button
+              size="s"
+              color="primary"
+              icon={Pencil}
+              link={{ to: "/planets/$id/edit", params: { id: planet.id } }}
+            >
+              {t(($) => $.planets.actions.edit)}
+            </Button>
+          )
+        }
+      />
+
+      <Card className="max-w-3xl overflow-hidden p-0">
+        <div className="aspect-video w-full bg-elevation-fill-default-2">
+          <img
+            src={imageSrc}
+            alt=""
+            className="h-full w-full object-cover"
+          />
+        </div>
+        <div className="flex flex-col gap-5 p-1">
+          <Typography
+            size="title-5"
+            variant="prominent-1"
+            as="h3"
+          >
+            {planet.name}
+          </Typography>
+
+          {planet.description && (
+            <Typography
+              size="body-3"
+              as="p"
+              className="whitespace-pre-wrap text-text-default-2"
+            >
+              {planet.description}
+            </Typography>
+          )}
+
+          <dl className="flex flex-col gap-4 border-elevation-outline-default-1 border-t pt-4 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-4">
+            <div className="flex flex-col gap-1">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planets.detail.createdBy)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="text-text-default-1"
+              >
+                {creatorName}
+              </Typography>
+            </div>
+            <div className="flex flex-col gap-1">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planets.detail.created)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="text-text-default-1"
+              >
+                {createdDate}
+              </Typography>
+            </div>
+            <div className="flex flex-col gap-1 sm:col-span-2">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planets.detail.updated)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="text-text-default-1"
+              >
+                {updatedDate}
+              </Typography>
+            </div>
+            {discoveryDate && (
+              <div className="flex flex-col gap-1 sm:col-span-2">
+                <Typography
+                  size="label-3"
+                  className="text-text-default-2"
+                >
+                  {t(($) => $.planets.detail.discoveryDate)}
+                </Typography>
+                <Typography
+                  size="body-3"
+                  className="text-text-default-1"
+                >
+                  {discoveryDate}
+                </Typography>
+              </div>
+            )}
+          </dl>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/details/PlanetEditPage.tsx

@@ -0,0 +1,266 @@
+import {
+  Button,
+  Confirmation,
+  DatePicker,
+  FileUpload,
+  Modal,
+  QueryAutocomplete,
+  TextArea,
+  TextInput,
+  Typography,
+  useForm,
+  useFormValue,
+  useToast,
+} from "@povio/ui/tanstack";
+import { useNavigate } from "@tanstack/react-router";
+import { Trash } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import { MediaModels } from "@/openapi/media/media.models";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+import { useMediaUploadHandler } from "@/utils/media-upload";
+
+interface PlanetEditPageProps {
+  planet: PlanetModels.PlanetsGetResponseDto;
+  onClose?: () => void;
+  onDeleted?: () => void;
+  onSaved?: () => void;
+}
+
+export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEditPageProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const updatePlanet = PlanetQueries.useUpdate();
+  const deletePlanet = PlanetQueries.useDeleteApiPlanetsById();
+  const { successToast, errorToast } = useToast();
+  const { confirm } = Confirmation.useConfirmation();
+  const [previewImageUrl, setPreviewImageUrl] = useState<string | undefined>(planet.image?.url);
+  // Seed the form from the fetched record, then reset when route data changes between planet IDs.
+  const form = useForm({
+    zodSchema: PlanetModels.PlanetsCreateRequestDtoSchema,
+    defaultValues: {
+      name: planet.name,
+      alienId: planet.alienId ?? undefined,
+      discoveryDate: planet.discoveryDate ?? undefined,
+      description: planet.description ?? "",
+      image: planet.image ? { id: planet.image.id } : undefined,
+    },
+  });
+
+  useEffect(() => {
+    form.reset({
+      name: planet.name,
+      alienId: planet.alienId ?? undefined,
+      discoveryDate: planet.discoveryDate ?? undefined,
+      description: planet.description ?? "",
+      image: planet.image ? { id: planet.image.id } : undefined,
+    });
+    setPreviewImageUrl(planet.image?.url);
+  }, [form, planet]);
+
+  const handleImageUpload = useMediaUploadHandler({
+    resourceName: MediaModels.MediaResourceName["planet-image"],
+    onUploaded: (media) => {
+      form.setFieldValue("image", { id: media.id });
+      setPreviewImageUrl(media.previewUrl);
+    },
+  });
+
+  const handleImageChange = (_file: File | null) => {
+    // When clearing file, keep current image
+    if (!_file) {
+      form.setFieldValue("image", planet.image ? { id: planet.image.id } : undefined);
+      setPreviewImageUrl(planet.image?.url);
+    }
+  };
+
+  const onSubmit = async (data: PlanetModels.PlanetsCreateRequestDto) => {
+    try {
+      await updatePlanet.mutateAsync({ id: planet.id, data });
+      successToast({ text: t(($) => $.planets.edit.success) });
+      if (onSaved) {
+        onSaved();
+      } else {
+        navigate({ to: "/planets/$id", params: { id: planet.id } });
+      }
+    } catch {
+      errorToast({ text: t(($) => $.planets.edit.error) });
+    }
+  };
+
+  const handleDelete = async () => {
+    // Destructive actions should go through a shared confirmation flow before calling the mutation.
+    const confirmed = await confirm({
+      heading: t(($) => $.planets.removeConfirm.heading),
+      description: t(($) => $.planets.removeConfirm.description, { name: planet.name }),
+      confirmLabel: t(($) => $.planets.removeConfirm.confirm),
+      cancelLabel: t(($) => $.planets.removeConfirm.cancel),
+      confirmColor: "error",
+      cancelVariant: "outlined",
+      buttonSize: "s",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await deletePlanet.mutateAsync({ id: planet.id });
+      successToast({ text: t(($) => $.planets.removeConfirm.success) });
+      if (onDeleted) {
+        onDeleted();
+      } else {
+        navigate({ to: "/planets" });
+      }
+    } catch {
+      errorToast({ text: t(($) => $.planets.removeConfirm.error) });
+    }
+  };
+
+  const currentImage = useFormValue(form, (values) => values.image);
+  const currentImageUrl = planet.image && currentImage?.id === planet.image.id ? planet.image.url : previewImageUrl;
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate({ to: "/planets/$id", params: { id: planet.id } });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen
+      onClose={handleClose}
+      aside="right"
+      showCloseIcon
+      modalClassName="h-full min-w-0 overflow-y-auto"
+    >
+      <div className="mb-6 flex items-center justify-between gap-4 pr-10">
+        <Typography
+          as="h2"
+          size="title-5"
+          variant="prominent-1"
+          className="text-text-default-1"
+        >
+          {t(($) => $.planets.edit.title)}
+        </Typography>
+
+        <Button
+          type="button"
+          size="xs"
+          color="error"
+          variant="outlined"
+          icon={Trash}
+          onPress={handleDelete}
+          isDisabled={deletePlanet.isPending}
+        >
+          {t(($) => $.planets.actions.remove)}
+        </Button>
+      </div>
+
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full min-w-0 flex-col gap-4"
+      >
+        <RowInputWrapper
+          label={t(($) => $.planets.edit.name)}
+          isRequired
+        >
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "name" }}
+            label={t(($) => $.planets.edit.name)}
+            placeholder={t(($) => $.planets.edit.namePlaceholder)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.edit.alien)}>
+          <QueryAutocomplete
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "alienId" }}
+            query={AlienQueries.useGetLabels}
+            label={t(($) => $.planets.edit.alien)}
+            placeholder={t(($) => $.planets.edit.alienPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.edit.discoveryDate)}>
+          <DatePicker
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "discoveryDate" }}
+            label={t(($) => $.planets.edit.discoveryDate)}
+            placeholder={t(($) => $.planets.edit.discoveryDatePlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.edit.description)}>
+          <TextArea
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "description" }}
+            label={t(($) => $.planets.edit.description)}
+            placeholder={t(($) => $.planets.edit.descriptionPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <div className="flex flex-col gap-2">
+          <FileUpload
+            label={t(($) => $.planets.edit.image)}
+            emptyText={t(($) => $.planets.edit.imageEmptyText)}
+            uploadText={t(($) => $.planets.edit.imageUploadText)}
+            browseText={t(($) => $.planets.edit.imageBrowseText)}
+            acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
+            onChange={handleImageChange}
+            fileUpload={handleImageUpload}
+          />
+          {currentImageUrl && (
+            <div className="aspect-video w-full overflow-hidden rounded-sm border border-elevation-outline-default-1 bg-elevation-fill-default-2">
+              <img
+                src={currentImageUrl}
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex items-center justify-end gap-2 self-end">
+          <Button
+            type="button"
+            variant="outlined"
+            size="xs"
+            color="secondary"
+            width="hug"
+            onPress={handleClose}
+          >
+            {t(($) => $.planets.edit.cancel)}
+          </Button>
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="xs"
+            color="primary"
+            width="hug"
+            isDisabled={updatePlanet.isPending}
+            isLoading={updatePlanet.isPending}
+          >
+            {t(($) => $.planets.edit.submit)}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/feed/PlanetFeedCard.tsx

@@ -0,0 +1,131 @@
+import { Button, Link, Typography } from "@povio/ui";
+import { Heart, Satellite, UserRound } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { DateUtils } from "@/utils/date.utils";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
+
+type PlanetFeedItem = PlanetModels.PlanetsGetResponseDto;
+
+interface PlanetFeedCardProps {
+  planet: PlanetFeedItem;
+  isLikePending: boolean;
+  onToggleLike: (planet: PlanetFeedItem) => void;
+}
+
+export function PlanetFeedCard({ planet, isLikePending, onToggleLike }: PlanetFeedCardProps) {
+  const { t } = useTranslation();
+  const imageSrc = planet.image?.url ?? getFallbackImageUrl({ width: 960, height: 540 });
+  const discoveryDate = planet.discoveryDate ? DateUtils.formatDate(planet.discoveryDate) : null;
+  const alienName = planet.alienName ?? t(($) => $.planetsFeed.card.noAlien);
+  const isLiked = planet.likedByMe;
+  const likesCount = typeof planet.likesCount === "number" ? planet.likesCount : 0;
+
+  return (
+    <article className="overflow-hidden rounded-m border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-sm">
+      <Link
+        to="/planets/$id"
+        params={{ id: planet.id }}
+        className="block no-underline! outline-none focus-visible:ring-2 focus-visible:ring-interactive-outline-primary-idle"
+      >
+        <div className="aspect-video w-full bg-elevation-fill-default-2">
+          <img
+            src={imageSrc}
+            alt=""
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </Link>
+
+      <div className="flex flex-col gap-4 p-4 sm:p-5">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <Typography
+              as="h2"
+              size="title-4"
+              variant="prominent-1"
+              className="text-text-default-1"
+            >
+              {planet.name}
+            </Typography>
+            {discoveryDate ? (
+              <Typography
+                size="label-3"
+                className="mt-1 text-text-default-2"
+              >
+                {t(($) => $.planetsFeed.card.discovered, { date: discoveryDate })}
+              </Typography>
+            ) : null}
+          </div>
+
+          <Button
+            variant={isLiked ? "contained" : "outlined"}
+            color={isLiked ? "primary" : "secondary"}
+            size="s"
+            icon={Heart}
+            isLoading={isLikePending}
+            onPress={() => onToggleLike(planet)}
+          >
+            {isLiked
+              ? t(($) => $.planetsFeed.card.liked, { count: likesCount })
+              : t(($) => $.planetsFeed.card.like, { count: likesCount })}
+          </Button>
+        </div>
+
+        {planet.description ? (
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {planet.description}
+          </Typography>
+        ) : null}
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="flex min-w-0 items-center gap-3 rounded-s bg-elevation-fill-default-2 px-3 py-2">
+            <Satellite
+              className="size-5 shrink-0 text-text-default-2"
+              aria-hidden
+            />
+            <div className="min-w-0">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planetsFeed.card.alienLabel)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="truncate text-text-default-1"
+              >
+                {alienName}
+              </Typography>
+            </div>
+          </div>
+
+          <div className="flex min-w-0 items-center gap-3 rounded-s bg-elevation-fill-default-2 px-3 py-2">
+            <UserRound
+              className="size-5 shrink-0 text-text-default-2"
+              aria-hidden
+            />
+            <div className="min-w-0">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planetsFeed.card.creatorLabel)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="truncate text-text-default-1"
+              >
+                {planet.creatorName ?? t(($) => $.planets.card.unknownCreator)}
+              </Typography>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/feed/PlanetsFeedPage.tsx

@@ -0,0 +1,119 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Typography } from "@povio/ui";
+import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+
+import { PlanetFeedCard } from "./PlanetFeedCard";
+
+const PAGE_SIZE = 8;
+
+type PlanetFeedItem = PlanetModels.PlanetsGetResponseDto;
+
+export function PlanetsFeedPage() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const loaderRef = useRef<HTMLDivElement | null>(null);
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = PlanetQueries.usePaginateInfinite({
+    cursor: undefined,
+    limit: PAGE_SIZE,
+    order: "-discoveryDate",
+  });
+
+  const likeMutation = PlanetQueries.useLike({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: PlanetQueries.keys.all });
+    },
+  });
+
+  const unlikeMutation = PlanetQueries.useUnlike({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: PlanetQueries.keys.all });
+    },
+  });
+
+  const planets = data?.pages.flatMap((page) => page.items ?? []) ?? [];
+
+  useEffect(() => {
+    const loader = loaderRef.current;
+    if (!loader || !hasNextPage) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && !isFetchingNextPage) {
+          void fetchNextPage();
+        }
+      },
+      { rootMargin: "360px 0px" },
+    );
+
+    observer.observe(loader);
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
+  const toggleLike = useCallback(
+    (planet: PlanetFeedItem) => {
+      if (planet.likedByMe) {
+        unlikeMutation.mutate({ id: planet.id });
+      } else {
+        likeMutation.mutate({ id: planet.id });
+      }
+    },
+    [likeMutation.mutate, unlikeMutation.mutate],
+  );
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+      <PageHeader title={t(($) => $.planetsFeed.page.title)} />
+
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <div className="flex flex-col gap-5">
+          {planets.map((planet) => (
+            <PlanetFeedCard
+              key={planet.id}
+              planet={planet}
+              isLikePending={
+                (likeMutation.isPending && likeMutation.variables?.id === planet.id) ||
+                (unlikeMutation.isPending && unlikeMutation.variables?.id === planet.id)
+              }
+              onToggleLike={toggleLike}
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLoading && planets.length === 0 && (
+        <Typography
+          size="body-3"
+          className="text-text-default-2"
+        >
+          {t(($) => $.planetsFeed.page.empty)}
+        </Typography>
+      )}
+
+      <div
+        ref={loaderRef}
+        className="flex min-h-16 items-center justify-center"
+      >
+        {isFetchingNextPage && <LoadingState />}
+        {!hasNextPage && planets.length > 0 && (
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.planetsFeed.page.end)}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}