robodev 0.11.0 → 0.12.0

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>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetCard.tsx

@@ -0,0 +1,89 @@
+import { IconButton, Link, Typography } from "@povio/ui";
+import { Pencil } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+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 PlanetCardProps {
+  planet: PlanetModels.PlanetsGetResponseDto;
+}
+
+export function PlanetCard({ planet }: PlanetCardProps) {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const imageSrc = planet.image?.url ?? getFallbackImageUrl({ width: 400, height: 300 });
+  const createdDate = DateUtils.formatDate(new Date(planet.createdAt));
+  const creatorName = planet.creatorName ?? t(($) => $.planets.card.unknownCreator);
+  // Match the details/edit pages: show owner-only edit affordances, but keep backend authorization authoritative.
+  const canEdit = user?.id === planet.userId;
+
+  return (
+    <div className="relative overflow-hidden rounded-m border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-sm transition-all hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2">
+      {canEdit && (
+        <div className="absolute right-2 top-2 z-10">
+          <IconButton
+            size="xs"
+            variant="subtle"
+            label={t(($) => $.planets.actions.edit)}
+            icon={Pencil}
+            color="secondary"
+            link={{ to: "/planets/$id/edit", params: { id: planet.id } }}
+          />
+        </div>
+      )}
+
+      <Link
+        to="/planets/$id"
+        params={{ id: planet.id }}
+        className="flex flex-col 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>
+
+        <div className="flex flex-col gap-2 p-4">
+          <Typography
+            size="title-5"
+            variant="prominent-1"
+            as="h3"
+            className="min-w-0 flex-1 text-text-default-1"
+          >
+            {planet.name}
+          </Typography>
+          {planet.description && (
+            <Typography
+              size="body-3"
+              className="line-clamp-2 w-full text-text-default-2"
+            >
+              {planet.description}
+            </Typography>
+          )}
+
+          <Typography
+            size="label-3"
+            className="pt-2 text-text-default-2"
+          >
+            {t(($) => $.planets.card.createdBy, { name: creatorName, date: createdDate })}
+          </Typography>
+
+          {planet.alienName && (
+            <Typography
+              size="label-3"
+              className="text-text-default-2"
+            >
+              {t(($) => $.planets.card.alien, { name: planet.alienName })}
+            </Typography>
+          )}
+        </div>
+      </Link>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetCreateModal.tsx

@@ -0,0 +1,179 @@
+import {
+  Button,
+  DatePicker,
+  FileUpload,
+  Modal,
+  QueryAutocomplete,
+  TextArea,
+  TextInput,
+  Typography,
+  useForm,
+  useToast,
+} from "@povio/ui/tanstack";
+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 PlanetCreateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const useAlienLabelsQuery = AlienQueries.useGetLabels as never;
+
+export function PlanetCreateModal({ isOpen, onClose }: PlanetCreateModalProps) {
+  const { t } = useTranslation();
+  const createPlanet = PlanetQueries.useCreate();
+  const { successToast, errorToast } = useToast();
+  // Generated schemas drive form typing and validation; do not import backend types in frontend code.
+  const form = useForm({
+    zodSchema: PlanetModels.PlanetsCreateRequestDtoSchema,
+    defaultValues: {
+      name: "",
+      alienId: undefined,
+      discoveryDate: undefined,
+      description: "",
+      image: undefined,
+    },
+  });
+
+  const handleImageUpload = useMediaUploadHandler({
+    resourceName: MediaModels.MediaResourceName["planet-image"],
+    onUploaded: (media) => form.setFieldValue("image", { id: media.id }),
+  });
+
+  const handleImageChange = (file: File | null) => {
+    if (!file) {
+      form.setFieldValue("image", undefined);
+    }
+  };
+
+  const onSubmit = async (data: PlanetModels.PlanetsCreateRequestDto) => {
+    try {
+      await createPlanet.mutateAsync({ data });
+      successToast({ text: t(($) => $.planets.create.success) });
+      form.reset();
+      onClose();
+    } catch {
+      errorToast({ text: t(($) => $.planets.create.error) });
+    }
+  };
+
+  const handleClose = () => {
+    form.reset();
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      aside="right"
+      showCloseIcon
+      modalClassName="h-full min-w-0 overflow-y-auto"
+    >
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full min-w-0 flex-col gap-4"
+      >
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+          as="h2"
+          className="mb-2 text-text-default-1"
+        >
+          {t(($) => $.planets.create.title)}
+        </Typography>
+
+        <RowInputWrapper
+          label={t(($) => $.planets.create.name)}
+          isRequired
+        >
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "name" }}
+            label={t(($) => $.planets.create.name)}
+            placeholder={t(($) => $.planets.create.namePlaceholder)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.create.alien)}>
+          <QueryAutocomplete
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "alienId" }}
+            query={useAlienLabelsQuery}
+            label={t(($) => $.planets.create.alien)}
+            placeholder={t(($) => $.planets.create.alienPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.create.discoveryDate)}>
+          <DatePicker
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "discoveryDate" }}
+            label={t(($) => $.planets.create.discoveryDate)}
+            placeholder={t(($) => $.planets.create.discoveryDatePlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.create.description)}>
+          <TextArea
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "description" }}
+            label={t(($) => $.planets.create.description)}
+            placeholder={t(($) => $.planets.create.descriptionPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <FileUpload
+          label={t(($) => $.planets.create.image)}
+          emptyText={t(($) => $.planets.create.imageEmptyText)}
+          uploadText={t(($) => $.planets.create.imageUploadText)}
+          browseText={t(($) => $.planets.create.imageBrowseText)}
+          acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
+          onChange={handleImageChange}
+          fileUpload={handleImageUpload}
+        />
+
+        <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.create.cancel)}
+          </Button>
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="xs"
+            color="primary"
+            width="hug"
+            isDisabled={createPlanet.isPending}
+            isLoading={createPlanet.isPending}
+          >
+            {t(($) => $.planets.create.submit)}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsFilters.css

@@ -0,0 +1,3 @@
+.planets-filters__control-without-label label {
+  display: none !important;
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsFilters.tsx

@@ -0,0 +1,73 @@
+import { Button, DateRangePicker, QueryAutocomplete } from "@povio/ui/tanstack";
+import type { FilterStore } from "@povio/ui/tanstack";
+import { useTranslation } from "react-i18next";
+
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import "./PlanetsFilters.css";
+
+export type PlanetsFiltersValue = NonNullable<PlanetModels.PlanetPaginateFilterParam>;
+
+interface PlanetsFiltersProps {
+  filters: FilterStore<PlanetsFiltersValue>;
+}
+
+function getDateRangeValue(value: PlanetsFiltersValue["discoveryDate"]) {
+  if (!value) {
+    return null;
+  }
+
+  return {
+    start: value.start ?? null,
+    end: value.end ?? null,
+  };
+}
+
+export function PlanetsFilters({ filters }: PlanetsFiltersProps) {
+  const { t } = useTranslation();
+  const handleClearAllFilters = () => filters.clearAllFilters();
+
+  return (
+    <div className="flex flex-wrap items-end gap-1 *:w-fit!">
+      {/* QueryAutocomplete works well with lightweight label endpoints instead of loading full related records. */}
+      <div className="planets-filters__control-without-label">
+        <QueryAutocomplete
+          value={filters.filterData.alienId ?? null}
+          onChange={(alienId) => filters.setFilterValue({ alienId: alienId ? String(alienId) : undefined })}
+          query={AlienQueries.useGetLabels}
+          label={t(($) => $.planets.filters.alien)}
+          placeholder={t(($) => $.planets.filters.alienPlaceholder)}
+          isClearable
+          as="filter"
+          size="extra-small"
+          variant="filled"
+        />
+      </div>
+
+      <div className="planets-filters__control-without-label">
+        <DateRangePicker
+          value={getDateRangeValue(filters.filterData.discoveryDate)}
+          onChange={(discoveryDate) => filters.setFilterValue({ discoveryDate: discoveryDate ?? undefined })}
+          label={t(($) => $.planets.filters.discoveryDate)}
+          placeholder={t(($) => $.planets.filters.discoveryDatePlaceholder)}
+          isClearable
+          // fullIso matches the backend z.iso.datetime schema and avoids local date parsing ambiguity.
+          fullIso
+          as="filter"
+          size="extra-small"
+          variant="filled"
+        />
+      </div>
+
+      <Button
+        variant="subtle"
+        color="secondary"
+        size="xs"
+        onPress={handleClearAllFilters}
+      >
+        {t(($) => $.planets.filters.clearAll)}
+      </Button>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsGridPage.tsx

@@ -0,0 +1,51 @@
+import { Typography, useFilters } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+
+import { PlanetCard } from "./PlanetCard";
+import { PlanetsFilters, type PlanetsFiltersValue } from "./PlanetsFilters";
+
+export function PlanetsGridPage() {
+  const { t } = useTranslation();
+  const filters = useFilters<PlanetsFiltersValue>({}, "", PlanetModels.PlanetPaginateFilterParamSchema);
+
+  const { data, isLoading } = PlanetQueries.usePaginate({
+    page: 1,
+    cursor: undefined,
+    limit: 20,
+    filter: filters.filterData,
+    order: "-discoveryDate",
+  });
+  const planets = data?.items ?? [];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PlanetsFilters filters={filters} />
+
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          {planets.map((planet) => (
+            <PlanetCard
+              key={planet.id}
+              planet={planet}
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLoading && planets.length === 0 && (
+        <Typography
+          size="body-3"
+          className="text-text-default-2"
+        >
+          {t(($) => $.planets.page.empty)}
+        </Typography>
+      )}
+    </div>
+  );
+}