apps/dashboard/src/components/code-block.tsx (1)

50-50:LGTM with optional readability suggestion.

The conditional padding and border logic is correct and handles all prop combinations appropriately.

For improved readability, you could extract the padding logic into a helper function:

constgetHeaderPadding=()=>{if(props.noSeparator)return"pt-1 pb-0";returnprops.compact ?"py-1" :"py-2";};

Then use it as:

-<div className={cn("text-muted-foreground font-medium pl-4 pr-2 text-sm flex justify-between items-center", props.compact && !props.noSeparator && "py-1", !props.compact && !props.noSeparator && "py-2", props.noSeparator && "pt-1 pb-0", !props.noSeparator && "border-b")}>+<div className={cn("text-muted-foreground font-medium pl-4 pr-2 text-sm flex justify-between items-center", getHeaderPadding(), !props.noSeparator && "border-b")}>

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/create-catalog-dialog.tsx (1)

74-76:Sanitization vs validation mismatch (underscores).

You keep underscores in onChange but validation rejects them (regex only allows a–z, 0–9, hyphen). Align both; prefer the shared sanitizer for consistency.

Apply:

-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, SimpleTooltip, Typography } from "@stackframe/stack-ui";+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, SimpleTooltip, Typography } from "@stackframe/stack-ui";+import { sanitizeId } from "./utils";@@-              onChange={(e) => {-                const value = e.target.value.toLowerCase().replace(/[^a-z0-9_\-]/g, '-');-                setCatalogId(value);-                setErrors(prev => ({ ...prev, id: undefined }));-              }}+              onChange={(e) => {+                setCatalogId(sanitizeId(e.target.value));+                setErrors(prev => ({ ...prev, id: undefined }));+              }}

If underscores are intended, update the validation to/^[a-z0-9_-]+$/ and error text to mention underscores. Based on guidelines.

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/layout.tsx (1)

38-40:Add async state and error handling for test mode + onboarding.

Disabling test mode and starting onboarding lack error handling and allow double clicks.

• Disable CTA while awaiting, and catch failures with inline messaging (not toast for blocking flows).
• Example:

-const handleDisableTestMode = async () => {-  await project.updateConfig({ "payments.testMode": false });-};+const [disabling, setDisabling] = useState(false);+const handleDisableTestMode = async () => {+  try {+    setDisabling(true);+    await project.updateConfig({ "payments.testMode": false });+  } catch (e) {+    // TODO: surface inline alert/banner here+  } finally {+    setDisabling(false);+  }+};@@-  <Button+  <Button     size="lg"     variant="outline"-    onClick={() => handleDisableTestMode()}+    onClick={() => handleDisableTestMode()}+    disabled={disabling}   >

Similarly wrap setupPayments() with try/catch and disable its buttons during the request. As per coding guidelines.

Also applies to: 83-111, 140-141

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/product-price-row.tsx (4)

151-163:Avoid saving on every keystroke; debounce amount updates.

Current onChange calls savePriceUpdate() on each character, which can thrash parent state or trigger extra work.

Apply a small debounce:

+  const amountSaveTimer = useRef<number | null>(null);@@-                      onChange={(e) => {+                      onChange={(e) => {                         const v = e.target.value;                         if (v === '' || /^\d*(?:\.?\d{0,2})?$/.test(v)) setAmount(v);-                        savePriceUpdate();+                        if (amountSaveTimer.current) window.clearTimeout(amountSaveTimer.current);+                        amountSaveTimer.current = window.setTimeout(() => {+                          savePriceUpdate();+                        }, 250);                       }}

---

67-69:Trigger label can be stale during edits.

intervalText is derived from price.interval; while editing, the trigger shows the old label until parent updates.

Compute from local state:

-const intervalText = intervalLabel(price.interval);+const intervalText = intervalSelection === 'one-time'+  ? null+  : intervalLabel([intervalSelection === 'custom' ? intervalCount : 1, priceInterval ?? 'month'] as DayInterval);

Also applies to: 175-190

---

295-301:Consistent currency formatting in view mode.

$${+amount} may render 9.9 instead of 9.90, diverging from saved normalization.

Format using the source price or toFixed:

-  <div className="text-xl font-semibold tabular-nums">-    {isFree ? 'Free' : `$${niceAmount}`}-  </div>+  <div className="text-xl font-semibold tabular-nums">+    {isFree ? 'Free' : `$${(+price.USD || 0).toFixed(2).replace(/\.00$/, '')}`}+  </div>

---

20-30:Unused prop: existingPriceIds.

Prop is not referenced. If not needed, drop it to reduce API surface.

Would you like me to remove it and update call sites?

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx (1)

180-221:Throttle scroll/resize path updates (perf).

updatePath runs on every scroll/resize event; add rAF coalescing to avoid jank in large lists.

Apply:

   useEffect(() => {     if (!fromRef.current || !toRef.current || !containerRef.current) return;--    const updatePath = () => {+    let raf = 0;+    const updatePathNow = () => {       const container = containerRef.current;       const from = fromRef.current;       const to = toRef.current;@@       setPath(pathStr);       setMidpoint({ x: midX, y: midY });     };--    updatePath();-    window.addEventListener('resize', updatePath);-    window.addEventListener('scroll', updatePath, true);+    const schedule = () => {+      if (raf) cancelAnimationFrame(raf);+      raf = requestAnimationFrame(updatePathNow);+    };+    schedule();+    window.addEventListener('resize', schedule);+    window.addEventListener('scroll', schedule, true);      return () => {-      window.removeEventListener('resize', updatePath);-      window.removeEventListener('scroll', updatePath, true);+      if (raf) cancelAnimationFrame(raf);+      window.removeEventListener('resize', schedule);+      window.removeEventListener('scroll', schedule, true);     };   }, [fromRef, toRef, containerRef]);

Keeps transitions snappy per animation guidance. As per coding guidelines.

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/components.tsx (1)

94-105:Prefer Map over Record for labels (project TS guideline).

Use ES6 Map for label lookup and access with .get().

-  const buttonLabels: Record<DayInterval[1], string> = useDurationLabels ? {-    day: '1 day',-    week: '1 week',-    month: '1 month',-    year: '1 year',-  } : {-    day: 'daily',-    week: 'weekly',-    month: 'monthly',-    year: 'yearly',-  };+  const buttonLabels = new Map<DayInterval[1], string>(+    useDurationLabels+      ? [['day','1 day'],['week','1 week'],['month','1 month'],['year','1 year']]+      : [['day','daily'],['week','weekly'],['month','monthly'],['year','yearly']]+  );@@-              {buttonLabels[unitOption]}+              {buttonLabels.get(unitOption)}

Also applies to: 173-174

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/utils.ts (2)

39-45:Use Map for unit suffix lookup.

Align with project guidance and avoid object key drift.

-  const map: Record<DayInterval[1], string> = { day: 'd', week: 'wk', month: 'mo', year: 'yr' };-  const suffix = map[unit];+  const map = new Map<DayInterval[1], string>([['day','d'],['week','wk'],['month','mo'],['year','yr']]);+  const suffix = map.get(unit)!;

---

128-130:Low-entropy IDs; add randomness to reduce collision risk.

Two calls in the same ms can collide. Mix time and random.

-export function generateUniqueId(prefix: string): string {-  return `${prefix}-${Date.now().toString(36).slice(2, 8)}`;-}+export function generateUniqueId(prefix: string): string {+  const t = Date.now().toString(36);+  const r = Math.random().toString(36).slice(2, 6);+  return `${prefix}-${t.slice(-6)}${r}`;+}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx (1)

719-723:Animation duration is long; prefer snappy transitions.

600ms on color transitions feels sluggish in UI. Reduce to ~150–250ms.

-    <div className={cn("flex h-full flex-col rounded-3xl border border-border bg-background/95 shadow-lg transition-colors duration-600",+    <div className={cn("flex h-full flex-col rounded-3xl border border-border bg-background/95 shadow-lg transition-colors duration-200",

As per coding guidelines

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro