Refactor UX to remove useless page

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

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

@@ -18,10 +18,10 @@ import {
   Badge,
   Breadcrumb,
   Button,
-  IconImage,
   IconListStack,
   IconPageTextLine,
   IconSettingsGear2,
+  IconSquareBehindSquare2,
   PageHeader,
   TabLink,
   Tabs,
@@ -190,7 +190,31 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
             )}
           </div>
         )}
-        description={banner.origin}
+        description={(
+          <span className="flex items-center gap-3 text-sm text-txt-secondary">
+            <span>
+              <span className="font-medium text-txt-primary">{__("Origin")}</span>
+              {" "}
+              {banner.origin}
+            </span>
+            <span className="text-border-primary">·</span>
+            <span className="flex items-center gap-1">
+              <span className="font-medium text-txt-primary">{__("ID")}</span>
+              {" "}
+              {banner.id}
+              <button
+                type="button"
+                className="p-1 rounded hover:bg-bg-hover transition-colors cursor-pointer"
+                onClick={() => {
+                  void navigator.clipboard.writeText(banner.id);
+                  toast({ title: __("Copied"), description: __("Banner ID copied to clipboard"), variant: "success" });
+                }}
+              >
+                <IconSquareBehindSquare2 size={16} />
+              </button>
+            </span>
+          </span>
+        )}
       >
         <Badge variant={banner.state === "ACTIVE" ? "success" : "danger"}>
           {banner.state === "ACTIVE" ? __("Active") : __("Inactive")}
@@ -220,11 +244,7 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
         </TabLink>
         <TabLink to={`/organizations/${organizationId}/cookie-banners/${cookieBannerId}/snippet`}>
           <IconPageTextLine size={20} />
-          {__("Snippet")}
-        </TabLink>
-        <TabLink to={`/organizations/${organizationId}/cookie-banners/${cookieBannerId}/theme`}>
-          <IconImage size={20} />
-          {__("Theme")}
+          {__("JS / CSS snippets")}
         </TabLink>
       </Tabs>
 

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

@@ -274,9 +274,20 @@ export function CategorySection({ categoryKey }: CategorySectionProps) {
               </div>
             )}
         {!isEditingCategory && (
-          <p className="mt-1 text-sm text-muted-foreground">
-            {category.description}
-          </p>
+          <>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {category.description}
+            </p>
+            <p className="mt-2 text-xs text-txt-secondary/70">
+              {__("Block elements until consent is given:")}
+              {" "}
+              <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
+                data-cookie-consent=&quot;
+                {category.name.toLowerCase()}
+                &quot;
+              </code>
+            </p>
+          </>
         )}
       </div>
 

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

@@ -16,6 +16,8 @@ import { useTranslate } from "@probo/i18n";
 import { Card } from "@probo/ui";
 import type { ReactNode } from "react";
 
+import { ThemePreview } from "#/pages/organizations/cookie-banners/configuration/theme/_components/ThemePreview";
+
 import { CodeSnippets } from "./_components/CodeSnippets";
 
 export default function CookieBannerSnippetPage() {
@@ -33,6 +35,14 @@ export default function CookieBannerSnippetPage() {
 
       <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 />
+      </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.")}
       >

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

@@ -18,13 +18,13 @@ import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { Link } from "react-router";
 import { graphql } from "relay-runtime";
 
-import type { CookieBannerOverviewPageQuery } from "#/__generated__/core/CookieBannerOverviewPageQuery.graphql";
+import type { CookieBannersOverviewPageQuery } from "#/__generated__/core/CookieBannersOverviewPageQuery.graphql";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
 
 import { CookieBannerEmptyState } from "./_components/CookieBannerEmptyState";
 
-export const cookieBannerOverviewPageQuery = graphql`
-  query CookieBannerOverviewPageQuery($organizationId: ID!) {
+export const cookieBannersOverviewPageQuery = graphql`
+  query CookieBannersOverviewPageQuery($organizationId: ID!) {
     organization: node(id: $organizationId) {
       __typename
       ... on Organization {
@@ -44,15 +44,15 @@ export const cookieBannerOverviewPageQuery = graphql`
   }
 `;
 
-interface CookieBannerOverviewPageProps {
-  queryRef: PreloadedQuery<CookieBannerOverviewPageQuery>;
+interface CookieBannersOverviewPageProps {
+  queryRef: PreloadedQuery<CookieBannersOverviewPageQuery>;
 }
 
-export default function CookieBannerOverviewPage({ queryRef }: CookieBannerOverviewPageProps) {
+export function CookieBannersOverviewPage({ queryRef }: CookieBannersOverviewPageProps) {
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
 
-  const { organization } = usePreloadedQuery(cookieBannerOverviewPageQuery, queryRef);
+  const { organization } = usePreloadedQuery(cookieBannersOverviewPageQuery, queryRef);
   if (organization.__typename !== "Organization") {
     throw new Error("invalid type for node");
   }

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

@@ -15,15 +15,15 @@
 import { Suspense, useEffect } from "react";
 import { useQueryLoader } from "react-relay";
 
-import type { CookieBannerOverviewPageQuery } from "#/__generated__/core/CookieBannerOverviewPageQuery.graphql";
+import type { CookieBannersOverviewPageQuery } from "#/__generated__/core/CookieBannersOverviewPageQuery.graphql";
 import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
 
-import CookieBannerOverviewPage, { cookieBannerOverviewPageQuery } from "./CookieBannerOverviewPage";
+import { CookieBannersOverviewPage, cookieBannersOverviewPageQuery } from "./CookieBannersOverviewPage";
 
-export default function CookieBannerOverviewPageLoader() {
+export default function CookieBannersOverviewPageLoader() {
   const organizationId = useOrganizationId();
-  const [queryRef, loadQuery] = useQueryLoader<CookieBannerOverviewPageQuery>(cookieBannerOverviewPageQuery);
+  const [queryRef, loadQuery] = useQueryLoader<CookieBannersOverviewPageQuery>(cookieBannersOverviewPageQuery);
 
   useEffect(() => {
     loadQuery({ organizationId });
@@ -35,7 +35,7 @@ export default function CookieBannerOverviewPageLoader() {
 
   return (
     <Suspense fallback={<PageSkeleton />}>
-      <CookieBannerOverviewPage queryRef={queryRef} />
+      <CookieBannersOverviewPage queryRef={queryRef} />
     </Suspense>
   );
 }

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

@@ -24,12 +24,12 @@ export const cookieBannerRoutes = [
   {
     path: "cookie-banners",
     Fallback: PageSkeleton,
-    Component: lazy(() => import("#/pages/organizations/cookie-banners/CookieBannerLayout")),
+    Component: lazy(() => import("#/pages/organizations/cookie-banners/CookieBannersLayout")),
     children: [
       {
         index: true,
         Fallback: LinkCardSkeleton,
-        Component: lazy(() => import("#/pages/organizations/cookie-banners/overview/CookieBannerOverviewPageLoader")),
+        Component: lazy(() => import("#/pages/organizations/cookie-banners/overview/CookieBannersOverviewPageLoader")),
       },
       {
         path: "new",
@@ -65,11 +65,6 @@ export const cookieBannerRoutes = [
         Fallback: LinkCardSkeleton,
         Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPage")),
       },
-      {
-        path: "theme",
-        Fallback: LinkCardSkeleton,
-        Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/theme/CookieBannerThemePage")),
-      },
     ],
   },
 ] satisfies AppRoute[];

packages/ui/src/Molecules/PageHeader/PageHeader.tsx

@@ -16,7 +16,7 @@ import type { PropsWithChildren, ReactNode } from "react";
 
 type Props = PropsWithChildren<{
   title: ReactNode;
-  description?: string | null;
+  description?: ReactNode;
 }>;
 
 export function PageHeader({ title, description, children }: Props) {