apps/dashboard/src/components/app-square.tsx:1

• Direct access to window.location.href will cause hydration mismatch in SSR environments. Use usePathname() hook from Next.js navigation instead.

import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";

• .claude/settings.json
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/page.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/@modal/(.)apps/[appId]/page-client.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/@modal/(.)apps/[appId]/page.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/@modal/default.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/apps/[appId]/page-client.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/apps/[appId]/page.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/apps/page-client.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/apps/page.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/layout.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
• apps/dashboard/src/components/app-square.tsx
• apps/dashboard/src/components/app-store-entry.tsx
• apps/dashboard/src/components/link.tsx
• apps/dashboard/src/components/project-switcher.tsx
• apps/dashboard/src/lib/apps-frontend.tsx
• packages/stack-shared/src/apps/apps-config.ts
• packages/stack-shared/src/utils/react.tsx
• packages/stack-shared/src/utils/urls.tsx
• packages/stack-ui/src/components/ui/dialog.tsx

apps/dashboard/src/components/link.tsx (1)

28-35: Fix duplicate onClick invocation when needConfirm is true.

The current logic calls onClick twice when needConfirm is true: once inside the conditional block (line 31) and again unconditionally (line 34). This causes side effects to execute twice.

Apply this diff to fix:

     onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
       if (needConfirm) {
         e.preventDefault();
         onClick?.();
         router.push(href);
+        return;
       }
       onClick?.();
     }}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/@modal/(.)apps/[appId]/page-client.tsx (2)

16-22: Handle enable failures gracefully

project.updateConfig can reject (network/server issues). Right now the rejection bubbles into an unhandled promise and the user never learns the app failed to enable. Please guard the call and surface an alert so the flow degrades safely.

   const handleEnable = async () => {
-    await wait(1000);
-    await project.updateConfig({
-      [`apps.installed.${appId}.enabled`]: true,
-    });
-    router.back();
+    try {
+      await wait(1000);
+      await project.updateConfig({
+        [`apps.installed.${appId}.enabled`]: true,
+      });
+      router.back();
+    } catch (error) {
+      console.error("Failed to enable app", error);
+      alert("Failed to enable the app. Please try again.");
+    }
   };

---

25-31: Restore an accessible close affordance

With noCloseButton set, the dialog has no visible/focusable control to dismiss it—keyboard and assistive tech users are stranded unless they discover Escape/back. Please restore the built-in close button (or add an equivalent control inside the content) so the modal remains accessible.

-    <Dialog open={true} onOpenChange={(open) => !open && router.back()} modal>
-      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0" noCloseButton>
+    <Dialog open={true} onOpenChange={(open) => !open && router.back()} modal>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx (4)

10-10: Remove commented-out import

Stray commented import clutters the file.

-// import { UserButton, useUser } from "@stackframe/stack";

---

75-80: Type error: BottomItem lacks regex but used in data and props

bottomItems entries define regex and it’s forwarded later; add it to the type.

 type BottomItem = {
   name: string,
   href: string,
   icon: LucideIcon,
+  regex: RegExp,
   external?: boolean,
 };

---

64-73: Type error: AppSection missing href but provided at usage

Object passed at Line 273 includes href; the type must declare it.

 type AppSection = {
   appId: AppId,
   name: string,
   icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>,
+  href: string,
   items: {
     name: string,
     href: string,
     match: (fullUrl: URL) => boolean,
   }[],
 };

---

197-205: Fix SSR crash: avoid window during render in NavSubItem

Accessing window at render breaks SSR. Use usePathname() and construct a URL instead.

   const ref = useRef<any>(null);
   const hover = useHover(ref);
-  const isActive = item.match(new URL(window.location.href));
+  const pathname = usePathname();
+  const isActive = item.match(new URL(pathname, "https://example.com"));

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx (3)

41-41: Rename local BreadcrumbItem type to avoid collision with imported component

Prevents linter “redeclare” warning and confusion with the JSX component.

-type BreadcrumbItem = { item: React.ReactNode, href: string };
+type Crumb = { item: React.ReactNode, href: string };

Also update other references in this file:

• type Hidden.name: BreadcrumbItem[] | ((...) => BreadcrumbItem[]) → Crumb[] | ((...) => Crumb[])
• const breadcrumbItems: BreadcrumbItem[] = ... → Crumb[]

Based on static analysis hints.

---

11-12: Remove unused router import/variable

useRouter is imported and instantiated but never used.

-import { useRouter } from "@/components/router";

-  const router = useRouter();
-

Also applies to: 222-223

---

220-226: Tighten types for app IDs and enabled apps

Improves safety when indexing ALL_APPS and matches imported AppId.

-  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(["authentication"]));
+  const [expandedSections, setExpandedSections] = useState<Set<AppId>>(new Set<AppId>(["authentication" as AppId]));

-  const enabledApps = typedEntries(config.apps.installed).filter(([_, appConfig]) => appConfig.enabled).map(([appId]) => appId);
+  const enabledApps: AppId[] = typedEntries(config.apps.installed)
+    .filter(([_, appConfig]) => appConfig.enabled)
+    .map(([appId]) => appId as AppId);

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

apps/dashboard/src/components/app-square.tsx (1)

159-161: “Open in new tab” should respect enabled state.

Open appDetailsPath when disabled; appPath when enabled. Same rule as the main Link.

-        <ContextMenuItem onClick={() => window.open(appPath, '_blank')}>
+        <ContextMenuItem onClick={() => window.open(isEnabled ? appPath : appDetailsPath, '_blank')}>
           Open in new tab
         </ContextMenuItem>

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

225-231: Forward onClick to Link so the mobile sheet closes after navigation.

Currently only href is passed; onClick from props is ignored for non‑sections.

-      <ButtonComponent
-        {...(isSection ? { onClick: onToggle } : { href })}
+      <ButtonComponent
+        {...(isSection ? { onClick: onToggle } : { href, onClick })}

apps/dashboard/src/lib/apps-frontend.tsx (2)

41-44: Make the URL construction explicit.

The implicit string coercion in new URL(item.href, new URL(...) + "/") is unclear. When + is applied to a URL object, JavaScript converts it to a string via toString(). While this works correctly, it's not idiomatic and makes the code harder to understand.

Apply this diff to make the trailing-slash handling explicit:

 export function getItemPath(projectId: string, appFrontend: AppFrontend, item: AppFrontend["navigationItems"][number]) {
-  const url = new URL(item.href, new URL(appFrontend.href, `${DUMMY_ORIGIN}/projects/${projectId}/`) + "/");
+  const appUrl = new URL(appFrontend.href, `${DUMMY_ORIGIN}/projects/${projectId}/`);
+  const baseWithSlash = appUrl.href + (appUrl.href.endsWith('/') ? '' : '/');
+  const url = new URL(item.href, baseWithSlash);
   return getRelativePart(url);
 }

---

116-116: Use consistent storeDescription type.

The payments app uses an empty string "" while all other apps use an empty fragment <></>. This causes different fallback behavior in the UI component: the empty string is falsy and triggers a "No additional information available" message, whereas the empty fragment is truthy and renders no content.

Apply this diff for consistency:

-    storeDescription: "",
+    storeDescription: <></>,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/workflows/[workflowId]/page.tsx (3)

41-43: Use inline Alert for errors instead of toast (per guidelines).

Replace error toasts with an inline Alert or surfaced error state within the page.

As per coding guidelines

Example approach:

• Add: const [errorMsg, setErrorMsg] = useState<string | null>(null);
• Set on failure: setErrorMsg("Failed to save workflow") / setErrorMsg("Failed to toggle workflow");
• Render near top inside PageLayout: {errorMsg && {errorMsg}}

Also applies to: 60-61

---

72-72: Avoid JSON.stringify for IDs in UI.

Render as string: {String(workflowId)} to avoid quotes.

-            <p className="text-muted-foreground mb-4">The workflow {JSON.stringify(workflowId)} was not found.</p>
+            <p className="text-muted-foreground mb-4">The workflow {String(workflowId)} was not found.</p>

---

103-103: Prefer overflow: auto over scroll.

Prevents always‑visible scrollbars and shows only when needed.

-        <div className="flex gap-6 flex-1" style={{ flexBasis: "0px", overflow: "scroll" }}>
+        <div className="flex gap-6 flex-1" style={{ flexBasis: "0px", overflow: "auto" }}>

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

1107-1119: Prefer Map over Record for groups prop.

To align with guideline, accept groups as Map<string, {displayName?: string}> (caller can convert from object).

As per coding guidelines

-type CatalogViewProps = {
-  groupedProducts: Map<string | undefined, Array<{ id: string, product: Product }>>,
-  groups: Record<string, { displayName?: string }>,
+type CatalogViewProps = {
+  groupedProducts: Map<string | undefined, Array<{ id: string, product: Product }>>,
+  groups: Map<string, { displayName?: string }>,

And adapt reads: groups.get(catalogId)?.displayName

---

528-533: Replace blocking error toasts with inline validation.

• “Item already included” and “Price ID already exists” are blocking errors; avoid toast per guidelines. Surface inline near the control or disable the conflicting option with a hint.

As per coding guidelines
Example:

• Track a local error state for the row and render … adjacent to the control.
• For the item picker, set disabled with a helper text instead of firing a toast.

Also applies to: 785-786

---

1296-1308: Avoid window.alert; show inline validation.

Use an inline Alert or field error state for catalog ID validation (required, format, uniqueness) instead of blocking browser alerts.

As per coding guidelines

Example:

• const [newCatalogError, setNewCatalogError] = useState<string | null>(null);
• On validation failure, setNewCatalogError("…");
• Render {newCatalogError && {newCatalogError}} below the input.

---

1513-1517: Remove unused handler.

handleCreateProduct is defined but unused; delete to reduce noise.

-  // Check if there are no products and no items
-  // Handler for create product button
-  const handleCreateProduct = () => {
-    setShowProductDialog(true);
-  };

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx (1)

49-79: Guarding the theme editor is correct; consider replacing blocking error toasts with inline Alerts

AppEnabledGuard usage looks good here.

As per coding guidelines, for blocking save errors, prefer an inline Alert in the editor area over a toast. Example pattern (outside this hunk): track a local error and render an Alert near the Save button.

// add state
const [saveError, setSaveError] = useState<string | null>(null);

// update handleSaveTheme
try {
  await stackAdminApp.updateEmailTheme(themeId, currentCode);
  setSaveError(null);
  // success toast can remain if desired (non-blocking), or show inline success banner
} catch (error) {
  if (error instanceof KnownErrors.EmailRenderingError) {
    setSaveError(error.message);
    return;
  }
  throw error;
}

// render near the Save action
{saveError && (
  <Alert variant="destructive">
    Failed to save theme: {saveError}
  </Alert>
)}

As per coding guidelines

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx (1)

23-35: Guard and shared-server UX are solid; add a null-check around “Edit Templates Anyway” navigation

AppEnabledGuard usage and warnings look good.

Add a defensive check to avoid pushing with a null id in rare cases:

- okButton={{
-   label: "Edit Templates Anyway", onClick: async () => {
-     router.push(`email-templates/${sharedSmtpWarningDialogOpen}`);
-   }
- }}
+ okButton={{
+   label: "Edit Templates Anyway",
+   onClick: async () => {
+     if (!sharedSmtpWarningDialogOpen) return "prevent-close";
+     router.push(`email-templates/${sharedSmtpWarningDialogOpen}`);
+   },
+ }}

Also applies to: 36-58, 60-79, 80-81

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/data-vault/stores/page-client.tsx (1)

120-165: Prefer inline validation over blocking dialogs; disable “Create” when invalid/duplicate

Show validation near inputs and prevent submission rather than using blocking alerts. Also disable the Create button when invalid, empty, or duplicate.

As per coding guidelines

               <div className="space-y-2">
                 <Label htmlFor="storeId">Store ID</Label>
                 <Input
                   id="storeId"
                   placeholder="e.g., user-secrets, api-keys"
                   value={newStoreId}
                   onChange={(e) => setNewStoreId(e.target.value)}
                   pattern="[a-z0-9-]+"
                 />
                 <p className="text-xs text-muted-foreground">
                   Lowercase letters, numbers, and hyphens only
                 </p>
+                {newStoreId && !/^[a-z0-9-]+$/.test(newStoreId.trim()) && (
+                  <p className="text-xs text-destructive">
+                    Invalid ID. Use lowercase letters, numbers, and hyphens only.
+                  </p>
+                )}
+                {newStoreId && (newStoreId in stores) && (
+                  <p className="text-xs text-destructive">
+                    A store with this ID already exists.
+                  </p>
+                )}
               </div>
...
-                  <Button onClick={handleCreateStore} disabled={isCreating}>
+                  <Button
+                    onClick={handleCreateStore}
+                    disabled={
+                      isCreating ||
+                      !newStoreId.trim() ||
+                      !/^[a-z0-9-]+$/.test(newStoreId.trim()) ||
+                      (newStoreId in stores)
+                    }
+                  >
                     {isCreating ? "Creating..." : "Create Store"}
                   </Button>

Optional: catch update errors and show an inline Alert in the dialog instead of a toast or window.alert. As per coding guidelines

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/apps/page-client.tsx (2)

13-17: Filter installed to known apps and sort by display name

Avoid unsafe cast by intersecting with ALL_APPS and provide consistent ordering.

-  const installedApps = Object.entries(config.apps.installed)
-    .filter(([_, appConfig]) => appConfig.enabled)
-    .map(([appId]) => appId as AppId);
+  const installedApps = Object.entries(config.apps.installed)
+    .filter(([appId, appConfig]) => appConfig.enabled && (appId in ALL_APPS))
+    .map(([appId]) => appId as AppId)
+    .sort((a, b) => ALL_APPS[a].displayName.localeCompare(ALL_APPS[b].displayName));

---

18-29: Render tags in a deterministic order (use ALL_APP_TAGS keys)

Current Map iteration depends on encounter order. Use ALL_APP_TAGS to drive section order.

   // Group apps by tag
   const appsByTag = new Map<string, AppId[]>();
 
   Object.entries(ALL_APPS).forEach(([appId, app]) => {
     app.tags.forEach(tag => {
       if (!appsByTag.has(tag)) {
         appsByTag.set(tag, []);
       }
       appsByTag.get(tag)?.push(appId as AppId);
     });
   });
+
+  const orderedTags = Object.keys(ALL_APP_TAGS) as (keyof typeof ALL_APP_TAGS)[];
...
-      {Array.from(appsByTag.entries()).filter(([_, apps]) => apps.some(appId => ALL_APPS[appId].stage !== "alpha")).map(([tag, apps]) => (
-        <section key={tag}>
-          <h2 className="font-bold my-4">{ALL_APP_TAGS[tag as keyof typeof ALL_APP_TAGS].displayName}</h2>
-          <div className="flex gap-1 lg:gap-8 flex-wrap">
-            {apps.filter(appId => ALL_APPS[appId].stage !== "alpha").map(appId => (
-              <AppSquare key={appId} appId={appId} />
-            ))}
-          </div>
-        </section>
-      ))}
+      {orderedTags.map((tag) => {
+        const apps = appsByTag.get(tag) ?? [];
+        const visible = apps.some(appId => ALL_APPS[appId].stage !== "alpha");
+        if (!visible) return null;
+        return (
+          <section key={tag}>
+            <h2 className="font-bold my-4">{ALL_APP_TAGS[tag].displayName}</h2>
+            <div className="flex gap-1 lg:gap-8 flex-wrap">
+              {apps
+                .filter(appId => ALL_APPS[appId].stage !== "alpha")
+                .sort((a, b) => ALL_APPS[a].displayName.localeCompare(ALL_APPS[b].displayName))
+                .map(appId => (
+                  <AppSquare key={appId} appId={appId} />
+                ))}
+            </div>
+          </section>
+        );
+      })}

Also applies to: 49-59

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

701-711: Avoid toast for error states; surface inline Alert near the control

Per coding guidelines, prefer an inline Alert for errors (not toast). When test mode update fails, render a small Alert by the switch and preserve tactile feedback.

As per coding guidelines

Apply this diff to adjust the handler:

   const handleToggleTestMode = async (enabled: boolean) => {
     setIsUpdatingTestMode(true);
     try {
       await project.updateConfig({ "payments.testMode": enabled });
       toast({ title: enabled ? "Test mode enabled" : "Test mode disabled" });
-    } catch (_error) {
-      toast({ title: "Failed to update test mode", variant: "destructive" });
+    } catch (_error) {
+      setTestModeError("Failed to update test mode");
     } finally {
       setIsUpdatingTestMode(false);
     }
   };

And render the Alert next to the switch:

         <div className="flex items-center gap-2">
           <Label htmlFor={testModeSwitchId}>Test mode</Label>
           <Switch
             id={testModeSwitchId}
             checked={paymentsConfig.testMode === true}
             disabled={isUpdatingTestMode}
             onCheckedChange={(checked) => void handleToggleTestMode(checked)}
           />
+          {testModeError && (
+            <Alert variant="destructive" className="ml-2">
+              <AlertTitle>Update failed</AlertTitle>
+              <AlertDescription>{testModeError}</AlertDescription>
+            </Alert>
+          )}
         </div>

Add state and imports (outside the shown range):

// imports at top
import { Alert, AlertDescription, AlertTitle } from "@stackframe/stack-ui";
// state near other useState hooks
const [testModeError, setTestModeError] = useState<string | null>(null);

Also applies to: 727-749

---

733-736: Switch used as navigation “view toggle” harms accessibility

The switch is always checked and acts as a navigation trigger. This is confusing for assistive tech. Prefer a segmented control or two buttons/links indicating the current view.

Example (conceptual):

• Replace the Switch with two Buttons: “Pricing table” and “List”. Style the current view as selected. Clicking “Pricing table” calls onViewChange("catalogs").
  As per coding guidelines

Also applies to: 741-746

---

184-221: Throttle scroll/resize path recomputation to avoid jank

updatePath runs on every scroll/resize and calls setState; this can cause layout thrash on large lists. Throttle via requestAnimationFrame or a small debounce.

Example:

useEffect(() => {
  if (!fromRef.current || !toRef.current || !containerRef.current) return;
  let raf = 0;
  const updatePath = () => {
    cancelAnimationFrame(raf);
    raf = requestAnimationFrame(() => {
      // ...existing path calculations...
      setPath(pathStr);
      setMidpoint({ x: midX, y: midY });
    });
  };
  updatePath();
  window.addEventListener('resize', updatePath);
  window.addEventListener('scroll', updatePath, true);
  return () => {
    cancelAnimationFrame(raf);
    window.removeEventListener('resize', updatePath);
    window.removeEventListener('scroll', updatePath, true);
  };
}, [fromRef, toRef, containerRef]);

---

558-565: Prefer Map for refs, and guard lookups

productRefs/itemRefs are Record maps. Use Map for key–value collections and guard lookups before passing to ConnectionLine.

As per coding guidelines

Example:

const productRefs = useMemo(() => {
  const m = new Map<string, React.RefObject<HTMLDivElement>>();
  Object.keys(paymentsConfig.products).forEach(id => m.set(id, React.createRef<HTMLDivElement>()));
  return m;
}, [paymentsConfig.products]);

// usage
fromRef={productRefs.get(hoveredProductId)!}

Also guard to ensure ref exists before rendering a ConnectionLine to avoid undefined refs at boundary cases.

Also applies to: 566-573, 818-839

---

779-783: Use overflow-auto instead of overflow: scroll

Prevents always-visible scrollbars and improves UX.

- style={{ flexBasis: "0px", overflow: "scroll" }}
+ style={{ flexBasis: "0px" }}
+ className="flex gap-6 flex-1 overflow-auto"

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx (1)

42-44: Graceful fallback if active theme ID is invalid

throwErr will crash the page if config is stale. Consider a safe fallback (first theme) plus an inline Alert to inform the user, instead of hard-failing.

Example:

const selectedThemeData = themes.find(t => t.id === activeTheme) ?? themes[0];
const invalidActive = !themes.some(t => t.id === activeTheme);

// Render an Alert above EmailPreview when invalidActive is true.

Also applies to: 55-80

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/launch-checklist/page-client.tsx (2)

259-269: Prefer reactive config consistently over project.config

You already call useConfig(). Mixing project.config.* with config.* may cause stale UI. Read all config fields from config for consistency.

Also applies to: 270-311, 312-349, 350-374, 376-433

---

395-415: Simplify redundant condition

This ternary uses the same check twice. Use productionChecksPassing alone for clarity.

- detail:
-   productionChecksPassing || productionModeErrors.length === 0 ? (
+ detail: productionChecksPassing ? (
    <Typography variant="secondary" className="text-xs">
      All checks are passing.
    </Typography>
  ) : (
    ...
  )

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

14-16: Prefer crypto.randomUUID() for trigger IDs (fallback to current).

More robust and collision‑resistant; keeps current fallback for older browsers.

-function generateTriggerId() {
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-}
+function generateTriggerId() {
+  return typeof crypto !== "undefined" && typeof (crypto as any).randomUUID === "function"
+    ? (crypto as any).randomUUID()
+    : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}

---

20-20: Title consistency: use “Products” to match the route.

This page is under payments/products; showing “Payments” here but “Products” elsewhere can confuse users.

-    <PageLayout title="Payments" description="Set up your pricing table by creating products and items.">
+    <PageLayout title="Products" description="Set up your pricing table by creating products and items.">

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/data-vault/stores/[storeId]/page-client.tsx (1)

54-55: Minor cleanup and resilience: remove dead var; handle clipboard errors.

• remainingStores is computed but unused.
• Clipboard API can fail (permissions/HTTP); handle errors.

-  const { [storeId]: _, ...remainingStores } = config.dataVault.stores;
+  // removed unused destructure of remainingStores

   await project.updateConfig({
     [`dataVault.stores.${storeId}`]: null,
   });

-  const copyToClipboard = async (text: string) => {
-    await navigator.clipboard.writeText(text);
-    toast({ title: "Copied to clipboard" });
-  };
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast({ title: "Copied to clipboard" });
+    } catch {
+      alert("Copy failed. Please copy manually.");
+    }
+  };

Also applies to: 84-87

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

40-40: Rename local Breadcrumb type to avoid shadowing UI component.

Prevents noRedeclare warning and confusion with the imported BreadcrumbItem component.

-type BreadcrumbItem = { item: React.ReactNode, href: string };
+type ResolvedBreadcrumb = { item: React.ReactNode, href: string };

-}): Promise<BreadcrumbItem[]> {
+}): Promise<ResolvedBreadcrumb[]> {

-  const [breadcrumbItems, setBreadcrumbItems] = useState<BreadcrumbItem[]>([]);
+  const [breadcrumbItems, setBreadcrumbItems] = useState<ResolvedBreadcrumb[]>([]);

Also applies to: 120-129, 406-407

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx (1)

229-236: Optional: wrap updates with runAsynchronouslyWithAlert for uniform error UX.

Matches the shared pattern and shows alerts on failures.

Example:

-                await project.update({
+                await runAsynchronouslyWithAlert(project.update({
                   config: {
                     credentialEnabled: checked,
                   },
-                });
+                }));

Also applies to: 244-251, 260-267, 345-354, 366-373

apps/dashboard/src/lib/apps-frontend.tsx (2)

223-242: Consider stronger prop types.

The createSvgIcon function and logo components use any for props, which reduces type safety and IDE autocomplete support.

Consider using explicit SVG prop types:

-function createSvgIcon(ChildrenComponent: () => React.ReactNode): (props: any) => React.ReactNode {
-  const Result = (props: any) => (
+function createSvgIcon(ChildrenComponent: () => React.ReactNode): React.FC<React.SVGProps<SVGSVGElement>> {
+  const Result: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
     <svg
       width="24"

Similarly for logo components:

-    logo: (props: any) => <Image src={NeonLogo} alt="Neon logo" {...props} />,
+    logo: ({ className }: { className?: string }) => <Image src={NeonLogo} alt="Neon logo" className={className} />,

---

244-249: Redundant empty string check after normalization.

Line 245 normalizes relativePart || "/", converting empty strings to "/". The subsequent check on line 247 for normalized === "" is therefore unreachable.

Simplify the condition:

 async function getEmailTemplatesBreadcrumbItems(stackAdminApp: StackAdminApp<false>, relativePart: string) {
   const normalized = relativePart || "/";
   const baseCrumbs = [{ item: "Templates", href: "." }];
-  if (normalized === "/" || normalized === "") {
+  if (normalized === "/") {
     return baseCrumbs;
   }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro