From 09ddbb1f51dd5ba6bcde2f90b6a008a31171145e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Mon, 20 Apr 2026 17:13:19 +0400
Subject: [PATCH] Replace back link with breadcrumb on NewCookieBannerPage and
 remove CookieBannersLayout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../cookie-banners/CookieBannersLayout.tsx    | 37 ---------
 .../cookie-banners/NewCookieBannerPage.tsx    | 22 ++---
 .../overview/CookieBannersOverviewPage.tsx    | 80 ++++++++++++-------
 .../organizations/cookie-banners/routes.ts    | 18 ++---
 4 files changed, 69 insertions(+), 88 deletions(-)
 delete mode 100644 apps/console/src/pages/organizations/cookie-banners/CookieBannersLayout.tsx

diff --git a/apps/console/src/pages/organizations/cookie-banners/CookieBannersLayout.tsx b/apps/console/src/pages/organizations/cookie-banners/CookieBannersLayout.tsx
deleted file mode 100644
index a805ffda4..000000000
--- a/apps/console/src/pages/organizations/cookie-banners/CookieBannersLayout.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx b/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx
index 75df1c25b..b53f7cc3d 100644
--- a/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx
+++ b/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={__(
diff --git a/apps/console/src/pages/organizations/cookie-banners/overview/CookieBannersOverviewPage.tsx b/apps/console/src/pages/organizations/cookie-banners/overview/CookieBannersOverviewPage.tsx
index 8ec1d1125..e6be7c896 100644
--- a/apps/console/src/pages/organizations/cookie-banners/overview/CookieBannersOverviewPage.tsx
+++ b/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>
   );
 }
diff --git a/apps/console/src/pages/organizations/cookie-banners/routes.ts b/apps/console/src/pages/organizations/cookie-banners/routes.ts
index f595a53d7..4c6e76ee2 100644
--- a/apps/console/src/pages/organizations/cookie-banners/routes.ts
+++ b/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",