robodev 0.24.0 → 0.26.0

package/templates/marketplace/apps/fe/src/components/features/marketplace/OrdersPage.tsx

@@ -1,12 +1,4 @@
-import {
-  Button,
-  TextArea,
-  TextInput,
-  Typography,
-  useForm,
-  useFormValue,
-  useToast,
-} from "@povio/ui/tanstack";
+import { Button, TextArea, TextInput, Typography, useForm, useFormValue, useToast } from "@povio/ui/tanstack";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
@@ -21,6 +13,9 @@ import { ReviewQueries } from "@/openapi/review/review.queries";
 import { SaleQueries } from "@/openapi/sale/sale.queries";
 import { formatCents } from "@/utils/listing-form";
 
+import { OrderStatusTag } from "./OrderStatusTag";
+import { OrderSummaryCard } from "./OrderSummaryCard";
+
 export function OrdersPage() {
   const { t } = useTranslation();
   const { data: purchases, isLoading: loadingPurchases } = PurchaseQueries.useGetAll();
@@ -30,58 +25,59 @@ export function OrdersPage() {
     <div className="flex flex-col gap-8">
       <PageHeader title={t(($) => $.orders.title)} />
       <section className="flex flex-col gap-3">
-        <Typography size="title-5" variant="prominent-1">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+        >
           {t(($) => $.orders.purchases)}
         </Typography>
         {loadingPurchases ? (
           <LoadingState />
         ) : !purchases || purchases.length === 0 ? (
-          <Typography size="body-3" className="text-text-default-2">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
             {t(($) => $.orders.emptyPurchases)}
           </Typography>
         ) : (
-          purchases.map((order) => <OrderSummary key={order.id} order={order} />)
+          purchases.map((order) => (
+            <OrderSummaryCard
+              key={order.id}
+              order={order}
+            />
+          ))
         )}
       </section>
       <section className="flex flex-col gap-3">
-        <Typography size="title-5" variant="prominent-1">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+        >
           {t(($) => $.orders.sales)}
         </Typography>
         {loadingSales ? (
           <LoadingState />
         ) : !sales || sales.length === 0 ? (
-          <Typography size="body-3" className="text-text-default-2">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
             {t(($) => $.orders.emptySales)}
           </Typography>
         ) : (
-          sales.map((order) => <OrderSummary key={order.id} order={order} />)
+          sales.map((order) => (
+            <OrderSummaryCard
+              key={order.id}
+              order={order}
+            />
+          ))
         )}
       </section>
     </div>
   );
 }
 
-function OrderSummary({ order }: { order: OrderModels.OrderDto }) {
-  const { t } = useTranslation();
-  return (
-    <Card>
-      <Typography size="title-5">{order.items.map((item) => item.title).join(", ")}</Typography>
-      <Typography size="label-3" className="text-text-default-2">
-        {t(($) => $.orders.status[order.status as "paid" | "shipped" | "completed"])} ·{" "}
-        {formatCents(order.totalCents)}
-      </Typography>
-      <Button
-        size="xs"
-        variant="outlined"
-        color="secondary"
-        link={{ to: "/orders/$id", params: { id: order.id } }}
-      >
-        {order.id.slice(0, 8)}
-      </Button>
-    </Card>
-  );
-}
-
 interface OrderDetailPageProps {
   order: OrderModels.OrderDto;
   role: "buyer" | "seller";
@@ -159,34 +155,47 @@ export function OrderDetailPage({ order, role }: OrderDetailPageProps) {
         title={t(($) => $.orders.title)}
       />
       <Card>
-        <Typography size="label-3" className="text-text-default-2">
-          {t(($) => $.orders.status[order.status as "paid" | "shipped" | "completed"])}
-        </Typography>
+        <OrderStatusTag status={order.status} />
         {order.items.map((item) => (
-          <Typography key={item.id} size="body-3">
+          <Typography
+            key={item.id}
+            size="body-3"
+          >
             {item.qty} × {item.title} · {formatCents(item.unitPriceCents)}
           </Typography>
         ))}
         <Typography size="body-3">
           {t(($) => $.orders.total)}: {formatCents(order.totalCents)}
         </Typography>
-        <Typography size="label-3" className="text-text-default-2">
+        <Typography
+          size="label-3"
+          className="text-text-default-2"
+        >
           {order.shippingName}, {order.shippingLine1}, {order.shippingCity}
         </Typography>
         {role === "seller" && order.status === "paid" ? (
-          <Button size="xs" onPress={() => void onShip()}>
+          <Button
+            size="xs"
+            onPress={() => void onShip()}
+          >
             {t(($) => $.orders.ship)}
           </Button>
         ) : null}
         {role === "buyer" && order.status === "shipped" ? (
-          <Button size="xs" onPress={() => void onComplete()}>
+          <Button
+            size="xs"
+            onPress={() => void onComplete()}
+          >
             {t(($) => $.orders.complete)}
           </Button>
         ) : null}
       </Card>
 
       {role === "buyer" && order.status === "completed" ? (
-        <form onSubmit={reviewForm.handleSubmit(onReview)} className="flex max-w-xl flex-col gap-3">
+        <form
+          onSubmit={reviewForm.handleSubmit(onReview)}
+          className="flex max-w-xl flex-col gap-3"
+        >
           <Typography size="title-5">{t(($) => $.orders.review)}</Typography>
           <div className="flex flex-wrap gap-1">
             {order.items.map((item) => (
@@ -214,7 +223,10 @@ export function OrderDetailPage({ order, role }: OrderDetailPageProps) {
             field={{ form: reviewForm, name: "body" }}
             label={t(($) => $.orders.reviewBody)}
           />
-          <Button type="submit" size="xs">
+          <Button
+            type="submit"
+            size="xs"
+          >
             {t(($) => $.orders.reviewSubmit)}
           </Button>
         </form>

package/templates/marketplace/apps/fe/src/components/features/marketplace/WatchlistPage.tsx

@@ -31,13 +31,27 @@ export function WatchlistPage() {
       {isLoading ? (
         <LoadingState />
       ) : items.length === 0 ? (
-        <Typography size="body-3" className="text-text-default-2">
-          {t(($) => $.watchlist.empty)}
-        </Typography>
+        <div className="flex flex-col items-start gap-3">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.watchlist.empty)}
+          </Typography>
+          <Button
+            size="xs"
+            link={{ to: "/" }}
+          >
+            {t(($) => $.layout.header.nav.browse)}
+          </Button>
+        </div>
       ) : (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
           {items.map((item) => (
-            <div key={item.id} className="flex flex-col gap-2">
+            <div
+              key={item.id}
+              className="flex flex-col gap-2"
+            >
               <ListingCard listing={item.listing} />
               <Button
                 size="xs"

package/templates/marketplace/apps/fe/src/components/layout/app-header/AppHeader.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 
 import { BrandLogo } from "@/components/shared/branding/BrandLogo";
 import { useAuth } from "@/hooks/useAuth";
+import { CartQueries } from "@/openapi/cart/cart.queries";
 
 import { MobileNavigation } from "./MobileNavigation";
 import { NavLink } from "./NavLink";
@@ -16,6 +17,10 @@ export function AppHeader() {
   const navigate = useNavigate();
   const { isAuthenticated, user, logout } = useAuth();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const { data: cartItems } = CartQueries.useGetAll();
+  const cartCount = cartItems?.length ?? 0;
+  const cartLabel =
+    cartCount > 0 ? t(($) => $.layout.header.nav.cartCount, { count: cartCount }) : t(($) => $.layout.header.nav.cart);
 
   const menuItems = [
     { label: t(($) => $.layout.header.profile), id: "profile" },
@@ -53,7 +58,7 @@ export function AppHeader() {
           <NavLink to="/my-listings">{t(($) => $.layout.header.nav.sell)}</NavLink>
           <NavLink to="/watchlist">{t(($) => $.layout.header.nav.watchlist)}</NavLink>
           <NavLink to="/orders">{t(($) => $.layout.header.nav.orders)}</NavLink>
-          <NavLink to="/cart">{t(($) => $.layout.header.nav.cart)}</NavLink>
+          <NavLink to="/cart">{cartLabel}</NavLink>
         </nav>
       </div>
 

package/templates/marketplace/apps/fe/src/components/layout/app-header/MobileNavigation.tsx

@@ -5,6 +5,7 @@ import type { Key } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useAuth } from "@/hooks/useAuth";
+import { CartQueries } from "@/openapi/cart/cart.queries";
 
 import { NavLink } from "./NavLink";
 
@@ -12,6 +13,10 @@ export function MobileNavigation() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { isAuthenticated, user, logout } = useAuth();
+  const { data: cartItems } = CartQueries.useGetAll();
+  const cartCount = cartItems?.length ?? 0;
+  const cartLabel =
+    cartCount > 0 ? t(($) => $.layout.header.nav.cartCount, { count: cartCount }) : t(($) => $.layout.header.nav.cart);
   const accountLabel = user?.name || user?.email || t(($) => $.layout.header.profile);
 
   const handleMenuAction = (key: Key) => {
@@ -29,7 +34,7 @@ export function MobileNavigation() {
         <NavLink to="/my-listings">{t(($) => $.layout.header.nav.sell)}</NavLink>
         <NavLink to="/watchlist">{t(($) => $.layout.header.nav.watchlist)}</NavLink>
         <NavLink to="/orders">{t(($) => $.layout.header.nav.orders)}</NavLink>
-        <NavLink to="/cart">{t(($) => $.layout.header.nav.cart)}</NavLink>
+        <NavLink to="/cart">{cartLabel}</NavLink>
       </nav>
 
       {isAuthenticated ? (

package/templates/marketplace/apps/fe/src/components/shared/branding/BrandLogo.tsx

@@ -1,13 +1,16 @@
 import clsx from "clsx";
 import type { HTMLAttributes } from "react";
+import { useTranslation } from "react-i18next";
 
 export function BrandLogo({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  const { t } = useTranslation();
+
   return (
     <span
       className={clsx("inline-flex h-[34px] items-center font-semibold text-xl tracking-tight", className)}
       {...props}
     >
-      Tiny
+      {t(($) => $.appName)}
     </span>
   );
 }

package/templates/marketplace/apps/fe/src/pages/(private)/my-listings.tsx

@@ -1,22 +1,32 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
+import { z } from "zod";
 
 import { MyListingsPage } from "@/components/features/marketplace/MyListingsPage";
 import { AppHead } from "@/components/shared/head/AppHead";
 
+const myListingsSearchSchema = z.object({
+  create: z
+    .union([z.boolean(), z.string()])
+    .optional()
+    .transform((value) => value === true || value === "true"),
+});
+
 function PageComponent() {
   const { t } = useTranslation();
+  const { create } = Route.useSearch();
   return (
     <>
       <AppHead
         title={t(($) => $.sell.head.title)}
         description={t(($) => $.sell.head.description)}
       />
-      <MyListingsPage />
+      <MyListingsPage openCreate={create} />
     </>
   );
 }
 
 export const Route = createFileRoute("/(private)/my-listings")({
   component: PageComponent,
+  validateSearch: myListingsSearchSchema,
 });

package/templates/marketplace/apps/fe/src/pages/(private)/sell/index.tsx

@@ -1,16 +1,12 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
-
-import { ListingFormPage } from "@/components/features/marketplace/ListingFormPage";
-import { AppHead } from "@/components/shared/head/AppHead";
+import { Navigate, createFileRoute } from "@tanstack/react-router";
 
 function PageComponent() {
-  const { t } = useTranslation();
   return (
-    <>
-      <AppHead title={t(($) => $.listingForm.createTitle)} />
-      <ListingFormPage />
-    </>
+    <Navigate
+      to="/my-listings"
+      search={{ create: true }}
+      replace
+    />
   );
 }
 

package/templates/marketplace/openapi.json

@@ -1,7 +1,7 @@
 {
   "info": {
     "title": "Marketplace API",
-    "description": "OpenAPI spec for the Tiny marketplace backend and reserved /api/user auth.",
+    "description": "OpenAPI spec for the Marketplace backend and reserved /api/user auth.",
     "version": "1.0.0"
   },
   "servers": [

package/templates/marketplace/package.json

@@ -11,7 +11,7 @@
     "@robodev-ai/sdk": "^0.6.0"
   },
   "devDependencies": {
-    "robodev": "^0.24.0",
+    "robodev": "^0.26.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }

package/templates/space/package.json

@@ -11,7 +11,7 @@
     "@robodev-ai/sdk": "^0.6.0"
   },
   "devDependencies": {
-    "robodev": "^0.24.0",
+    "robodev": "^0.26.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }