Reorganize cookie banner configuration pages

Move JS snippet (CodeSnippets) into Settings, move category
sorting (CategoryList) into the renamed Display page, remove
the blocking-scripts step, and rename the Snippet tab to Display.

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

apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx

@@ -247,9 +247,9 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
           <IconGlobe size={20} />
           {__("Translations")}
         </TabLink>
-        <TabLink to={`/organizations/${organizationId}/cookie-banners/${cookieBannerId}/snippet`}>
+        <TabLink to={`/organizations/${organizationId}/cookie-banners/${cookieBannerId}/display`}>
           <IconPageTextLine size={20} />
-          {__("JS / CSS snippets")}
+          {__("Display")}
         </TabLink>
       </Tabs>
 

apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx

@@ -15,7 +15,6 @@
 import { formatError, type GraphQLError } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 import { Badge, Button, Card, IconArrowDown, IconArrowUp, useConfirm, useToast } from "@probo/ui";
-import { useState } from "react";
 import { useFragment, useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -23,8 +22,6 @@ import type { CategoryList_cookieBanner$key } from "#/__generated__/core/Categor
 import type { CategoryListDeleteMutation } from "#/__generated__/core/CategoryListDeleteMutation.graphql";
 import type { CategoryListReorderMutation } from "#/__generated__/core/CategoryListReorderMutation.graphql";
 
-import { CategoryDialog } from "./CategoryDialog";
-
 const categoryListFragment = graphql`
   fragment CategoryList_cookieBanner on CookieBanner {
     id
@@ -88,7 +85,6 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
   const { __ } = useTranslate();
   const { toast } = useToast();
   const confirm = useConfirm();
-  const [showCreateDialog, setShowCreateDialog] = useState(false);
 
   const banner = useFragment(categoryListFragment, cookieBannerKey);
   const connectionId = banner.categories.__id;
@@ -156,12 +152,7 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
       <h3 className="font-medium">{__("Categories Sorting")}</h3>
-        <Button variant="secondary" onClick={() => setShowCreateDialog(true)}>
-          {__("Add Category")}
-        </Button>
-      </div>
       <p className="text-sm text-txt-secondary">
         {__("Categories will be displayed in your cookie banner in the same order as below.")}
       </p>
@@ -210,14 +201,6 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
         ))}
       </Card>
 
-      {showCreateDialog && (
-        <CategoryDialog
-          cookieBannerId={banner.id}
-          connectionId={connectionId}
-          nextRank={sorted.length > 0 ? sorted[sorted.length - 1].rank + 1 : 0}
-          onOpenChange={setShowCreateDialog}
-        />
-      )}
     </div>
   );
 }

apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPage.tsx

@@ -0,0 +1,52 @@
+// 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 { type PreloadedQuery, usePreloadedQuery } from "react-relay";
+import { graphql } from "relay-runtime";
+
+import type { CookieBannerDisplayPageQuery } from "#/__generated__/core/CookieBannerDisplayPageQuery.graphql";
+
+import { CategoryList } from "../_components/CategoryList";
+import { ThemePreview } from "./_components/ThemePreview";
+
+export const cookieBannerDisplayPageQuery = graphql`
+  query CookieBannerDisplayPageQuery($cookieBannerId: ID!) {
+    node(id: $cookieBannerId) @required(action: THROW) {
+      __typename
+      ... on CookieBanner {
+        ...CategoryList_cookieBanner
+        ...ThemePreview_cookieBanner
+      }
+    }
+  }
+`;
+
+interface CookieBannerDisplayPageProps {
+  queryRef: PreloadedQuery<CookieBannerDisplayPageQuery>;
+}
+
+export default function CookieBannerDisplayPage({ queryRef }: CookieBannerDisplayPageProps) {
+  const data = usePreloadedQuery(cookieBannerDisplayPageQuery, queryRef);
+
+  if (data.node.__typename !== "CookieBanner") {
+    throw new Error("invalid type for node");
+  }
+
+  return (
+    <div className="space-y-8">
+      <CategoryList cookieBannerKey={data.node} />
+      <ThemePreview cookieBannerKey={data.node} />
+    </div>
+  );
+}

apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader.tsx

@@ -16,14 +16,14 @@ import { Suspense, useEffect } from "react";
 import { useQueryLoader } from "react-relay";
 import { useParams } from "react-router";
 
-import type { CookieBannerSnippetPageQuery } from "#/__generated__/core/CookieBannerSnippetPageQuery.graphql";
+import type { CookieBannerDisplayPageQuery } from "#/__generated__/core/CookieBannerDisplayPageQuery.graphql";
 import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
 
-import CookieBannerSnippetPage, { cookieBannerSnippetPageQuery } from "./CookieBannerSnippetPage";
+import CookieBannerDisplayPage, { cookieBannerDisplayPageQuery } from "./CookieBannerDisplayPage";
 
-export default function CookieBannerSnippetPageLoader() {
+export default function CookieBannerDisplayPageLoader() {
   const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
-  const [queryRef, loadQuery] = useQueryLoader<CookieBannerSnippetPageQuery>(cookieBannerSnippetPageQuery);
+  const [queryRef, loadQuery] = useQueryLoader<CookieBannerDisplayPageQuery>(cookieBannerDisplayPageQuery);
 
   useEffect(() => {
     if (cookieBannerId) {
@@ -37,7 +37,7 @@ export default function CookieBannerSnippetPageLoader() {
 
   return (
     <Suspense fallback={<PageSkeleton />}>
-      <CookieBannerSnippetPage queryRef={queryRef} />
+      <CookieBannerDisplayPage queryRef={queryRef} />
     </Suspense>
   );
 }

apps/console/src/pages/organizations/cookie-banners/configuration/display/_components/ThemePreview.tsx

@@ -157,8 +157,6 @@ export function ThemePreview({ cookieBannerKey }: ThemePreviewProps) {
         </div>
       </Card>
 
-      <h3 className="font-medium text-lg">{__("Preview")}</h3>
-
       <Card className="border overflow-hidden">
         <div
           className="relative flex items-end justify-center bg-[repeating-conic-gradient(#e5e7eb_0%_25%,transparent_0%_50%)] bg-size-[20px_20px] p-8"
@@ -169,7 +167,6 @@ export function ThemePreview({ cookieBannerKey }: ThemePreviewProps) {
       </Card>
 
       <div className="flex items-center justify-between">
-        <h3 className="font-medium text-lg">{__("CSS Snippet")}</h3>
         <Button variant="secondary" onClick={handleCopyCSS}>
           {__("Copy")}
         </Button>

apps/console/src/pages/organizations/cookie-banners/configuration/settings/CookieBannerSettingsPage.tsx

@@ -18,7 +18,8 @@ import { graphql } from "relay-runtime";
 import type { CookieBannerSettingsPageQuery } from "#/__generated__/core/CookieBannerSettingsPageQuery.graphql";
 
 import { BannerSettingsForm } from "../_components/BannerSettingsForm";
-import { CategoryList } from "../_components/CategoryList";
+
+import { CodeSnippets } from "./_components/CodeSnippets";
 
 export const cookieBannerSettingsPageQuery = graphql`
   query CookieBannerSettingsPageQuery($cookieBannerId: ID!) {
@@ -26,7 +27,6 @@ export const cookieBannerSettingsPageQuery = graphql`
       __typename
       ... on CookieBanner {
         ...BannerSettingsForm_cookieBanner
-        ...CategoryList_cookieBanner
       }
     }
   }
@@ -48,7 +48,7 @@ export default function CookieBannerSettingsPage({
   return (
     <div className="space-y-8">
       <BannerSettingsForm cookieBannerKey={data.node} />
-      <CategoryList cookieBannerKey={data.node} />
+      <CodeSnippets />
     </div>
   );
 }

apps/console/src/pages/organizations/cookie-banners/configuration/settings/_components/CodeSnippets.tsx

@@ -51,6 +51,7 @@ export function CodeSnippets() {
 
   return (
     <div className="space-y-3">
+      <h3 className="font-medium">{__("JS snippet")}</h3>
       <Card className="rounded-lg border">
         <div className="flex items-center justify-end border-b border-border-low px-1 py-1">
           <Button variant="secondary" onClick={handleCopy}>

apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPage.tsx

@@ -1,129 +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 { useTranslate } from "@probo/i18n";
-import { Card } from "@probo/ui";
-import type { ReactNode } from "react";
-import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
-import { graphql } from "relay-runtime";
-
-import type { CookieBannerSnippetPageQuery } from "#/__generated__/core/CookieBannerSnippetPageQuery.graphql";
-
-import { CodeSnippets } from "./_components/CodeSnippets";
-import { ThemePreview } from "./_components/ThemePreview";
-
-export const cookieBannerSnippetPageQuery = graphql`
-  query CookieBannerSnippetPageQuery($cookieBannerId: ID!) {
-    node(id: $cookieBannerId) @required(action: THROW) {
-      __typename
-      ... on CookieBanner {
-        ...ThemePreview_cookieBanner
-      }
-    }
-  }
-`;
-
-interface CookieBannerSnippetPageProps {
-  queryRef: PreloadedQuery<CookieBannerSnippetPageQuery>;
-}
-
-export default function CookieBannerSnippetPage({ queryRef }: CookieBannerSnippetPageProps) {
-  const { __ } = useTranslate();
-  const data = usePreloadedQuery(cookieBannerSnippetPageQuery, queryRef);
-
-  if (data.node.__typename !== "CookieBanner") {
-    throw new Error("invalid type for node");
-  }
-
-  return (
-    <div className="space-y-10">
-      <Step
-        number={1}
-        title={__("Add the cookie banner snippet")}
-        description={__("Include the Probo cookie banner on your website by adding one of the following snippets. The banner will automatically appear and collect visitor consent.")}
-      >
-        <CodeSnippets />
-      </Step>
-
-      <Step
-        number={2}
-        title={__("Customize the theme")}
-        description={__("Adjust colors, fonts, and spacing to match your brand. The generated CSS snippet can be added to your website to override the default banner styles.")}
-      >
-        <ThemePreview cookieBannerKey={data.node} />
-      </Step>
-
-      <Step
-        number={3}
-        title={__("Tag third-party elements with consent categories")}
-        description={__("Mark scripts, iframes, and other third-party resources with a data-cookie-consent attribute so they only load after the visitor grants consent for the corresponding category. Replace src with data-src (or href with data-href) to prevent the browser from loading the resource before consent is given.")}
-      >
-        <div className="space-y-4">
-          <Card className="border">
-            <pre className="overflow-x-auto p-4 text-sm font-mono text-invert bg-accent rounded-lg">
-              <code>
-                {`<!-- Before: loads immediately -->
-<script src="https://analytics.example.com/tracker.js"></script>
-
-<!-- After: loads only when "analytics" consent is granted -->
-<script
-  type="text/plain"
-  data-cookie-consent="analytics"
-  data-src="https://analytics.example.com/tracker.js"
-></script>`}
-              </code>
-            </pre>
-          </Card>
-
-          <p className="text-sm text-txt-secondary">
-            {__("The same approach works for iframes, images, stylesheets, and other elements.")}
-            {" "}
-            <a
-              href="https://docs.getprobo.com/docs/product/cookie-banner/blocking-resources.html"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-txt-primary underline hover:no-underline"
-            >
-              {__("See our documentation for the full list of supported elements and detailed integration guides.")}
-            </a>
-          </p>
-        </div>
-      </Step>
-    </div>
-  );
-}
-
-interface StepProps {
-  number: number;
-  title: string;
-  description: string;
-  children: ReactNode;
-}
-
-function Step({ number, title, description, children }: StepProps) {
-  return (
-    <div className="flex gap-4">
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-invert">
-        {number}
-      </div>
-      <div className="min-w-0 flex-1 space-y-4">
-        <div>
-          <h3 className="text-lg font-medium">{title}</h3>
-          <p className="mt-1 text-sm text-txt-secondary">{description}</p>
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-}

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

@@ -60,9 +60,9 @@ export const cookieBannerRoutes = [
         Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/translations/CookieBannerTranslationsPageLoader")),
       },
       {
-        path: "snippet",
+        path: "display",
         Fallback: LinkCardSkeleton,
-        Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPageLoader")),
+        Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader")),
       },
     ],
   },