Replace back link with breadcrumb on NewCookieBannerPage and remove CookieBannersLayout

Move the PageHeader into CookieBannersOverviewPage directly since
the layout had only one child route left after extracting the "new"
route as a sibling, making the wrapper unnecessary.

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/pages/organizations/cookie-banners/CookieBannersLayout.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
-//
-// Permission to use, copy, modify, and/or distribute this software for any
-// purpose with or without fee is hereby granted, provided that the above
-// copyright notice and this permission notice appear in all copies.
-//
-// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-// PERFORMANCE OF THIS SOFTWARE.
-
-import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
-import { PageHeader } from "@probo/ui";
-import { Outlet } from "react-router";
-
-export default function CookieBannerLayout() {
-  const { __ } = useTranslate();
-
-  usePageTitle(__("Cookie Banners"));
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title={__("Cookie Banners")}
-        description={__(
-          "Manage cookie consent banners for your websites. Configure categories, cookies, and install the SDK.",
-        )}
-      />
-
-      <Outlet />
-    </div>
-  );
-}

apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx

@@ -16,10 +16,10 @@ import { formatError, type GraphQLError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
 import { useTranslate } from "@probo/i18n";
 import {
+  Breadcrumb,
   Button,
   Card,
   Field,
-  IconChevronLeft,
   Input,
   Label,
   Option,
@@ -29,7 +29,7 @@ import {
 } from "@probo/ui";
 import { type FormEvent, useState } from "react";
 import { useMutation } from "react-relay";
-import { Link, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
 
 import type { NewCookieBannerPageMutation } from "#/__generated__/core/NewCookieBannerPageMutation.graphql";
@@ -99,13 +99,17 @@ export default function NewCookieBannerPage() {
 
   return (
     <div className="space-y-6">
-      <Link
-        to={`/organizations/${organizationId}/cookie-banners`}
-        className="mb-4 inline-flex gap-2 items-center"
-      >
-        <IconChevronLeft size={16} />
-        {__("Back")}
-      </Link>
+      <Breadcrumb
+        items={[
+          {
+            label: __("Cookie Banners"),
+            to: `/organizations/${organizationId}/cookie-banners`,
+          },
+          {
+            label: __("New"),
+          },
+        ]}
+      />
       <PageHeader
         title={__("Create Cookie Banner")}
         description={__(

apps/console/src/pages/organizations/cookie-banners/overview/CookieBannersOverviewPage.tsx

@@ -12,8 +12,9 @@
 // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 // PERFORMANCE OF THIS SOFTWARE.
 
+import { usePageTitle } from "@probo/hooks";
 import { useTranslate } from "@probo/i18n";
-import { Badge, Button, Card } from "@probo/ui";
+import { Badge, Button, Card, PageHeader } from "@probo/ui";
 import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { Link } from "react-router";
 import { graphql } from "relay-runtime";
@@ -52,6 +53,8 @@ export function CookieBannersOverviewPage({ queryRef }: CookieBannersOverviewPag
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
 
+  usePageTitle(__("Cookie Banners"));
+
   const { organization } = usePreloadedQuery(cookieBannersOverviewPageQuery, queryRef);
   if (organization.__typename !== "Organization") {
     throw new Error("invalid type for node");
@@ -62,40 +65,57 @@ export function CookieBannersOverviewPage({ queryRef }: CookieBannersOverviewPag
 
   if (banners.length === 0) {
     return (
-      <CookieBannerEmptyState>
-        <Button to={newBannerHref}>{__("Create your first banner")}</Button>
-      </CookieBannerEmptyState>
+      <div className="space-y-6">
+        <PageHeader
+          title={__("Cookie Banners")}
+          description={__(
+            "Manage cookie consent banners for your websites. Configure categories, cookies, and install the SDK.",
+          )}
+        />
+        <CookieBannerEmptyState>
+          <Button to={newBannerHref}>{__("Create your first banner")}</Button>
+        </CookieBannerEmptyState>
+      </div>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex justify-end">
-        <Button to={newBannerHref}>{__("Create Banner")}</Button>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        title={__("Cookie Banners")}
+        description={__(
+          "Manage cookie consent banners for your websites. Configure categories, cookies, and install the SDK.",
+        )}
+      />
 
-      <Card className="divide-y divide-border rounded-lg border">
-        {banners.map(banner => (
-          <Link
-            key={banner.id}
-            to={`/organizations/${organizationId}/cookie-banners/${banner.id}`}
-            className="flex items-center justify-between gap-4 p-4 hover:bg-muted/50 transition-colors"
-          >
-            <div className="min-w-0 flex-1">
-              <div className="font-medium">{banner.name}</div>
-              <div className="text-sm text-muted-foreground truncate">{banner.origin}</div>
-            </div>
-            <div className="flex items-center gap-3">
-              <Badge variant={banner.state === "ACTIVE" ? "success" : "danger"}>
-                {banner.state === "ACTIVE" ? __("Active") : __("Inactive")}
-              </Badge>
-              <span className="text-xs text-muted-foreground">
-                {new Date(banner.createdAt).toLocaleDateString()}
-              </span>
-            </div>
-          </Link>
-        ))}
-      </Card>
+      <div className="space-y-4">
+        <div className="flex justify-end">
+          <Button to={newBannerHref}>{__("Create Banner")}</Button>
+        </div>
+
+        <Card className="divide-y divide-border rounded-lg border">
+          {banners.map(banner => (
+            <Link
+              key={banner.id}
+              to={`/organizations/${organizationId}/cookie-banners/${banner.id}`}
+              className="flex items-center justify-between gap-4 p-4 hover:bg-muted/50 transition-colors"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="font-medium">{banner.name}</div>
+                <div className="text-sm text-muted-foreground truncate">{banner.origin}</div>
+              </div>
+              <div className="flex items-center gap-3">
+                <Badge variant={banner.state === "ACTIVE" ? "success" : "danger"}>
+                  {banner.state === "ACTIVE" ? __("Active") : __("Inactive")}
+                </Badge>
+                <span className="text-xs text-muted-foreground">
+                  {new Date(banner.createdAt).toLocaleDateString()}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </Card>
+      </div>
     </div>
   );
 }

apps/console/src/pages/organizations/cookie-banners/routes.ts

@@ -24,18 +24,12 @@ export const cookieBannerRoutes = [
   {
     path: "cookie-banners",
     Fallback: PageSkeleton,
-    Component: lazy(() => import("#/pages/organizations/cookie-banners/CookieBannersLayout")),
-    children: [
-      {
-        index: true,
-        Fallback: LinkCardSkeleton,
-        Component: lazy(() => import("#/pages/organizations/cookie-banners/overview/CookieBannersOverviewPageLoader")),
-      },
-      {
-        path: "new",
-        Component: lazy(() => import("#/pages/organizations/cookie-banners/NewCookieBannerPage")),
-      },
-    ],
+    Component: lazy(() => import("#/pages/organizations/cookie-banners/overview/CookieBannersOverviewPageLoader")),
+  },
+  {
+    path: "cookie-banners/new",
+    Fallback: PageSkeleton,
+    Component: lazy(() => import("#/pages/organizations/cookie-banners/NewCookieBannerPage")),
   },
   {
     path: "cookie-banners/:cookieBannerId",