Add GCM consent type mapping to console UI

Display Google Consent Mode mappings as badges on each
category and add a checkbox selector in the edit form
so users can configure which GCM signals each category
controls.

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

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

@@ -59,6 +59,7 @@ export const categorySectionFragment = graphql`
     slug
     description
     kind
+    gcmConsentTypes
     cookies(first: 100, orderBy: { field: CREATED_AT, direction: ASC })
       @connection(key: "CategorySection_cookies", filters: [])
       @required(action: THROW) {
@@ -97,6 +98,7 @@ const updateCategoryMutation = graphql`
         slug
         description
         rank
+        gcmConsentTypes
         updatedAt
       }
       cookieBanner {
@@ -237,7 +239,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
   const cookies = category.cookies.edges.map(e => e.node);
   const isMutating = isUpdating || isCreating || isUpdatingCookie;
 
-  const handleSaveCategory = (name: string, slug: string, description: string) => {
+  const handleSaveCategory = (name: string, slug: string, description: string, gcmConsentTypes: string[]) => {
     updateCategory({
       variables: {
         input: {
@@ -245,6 +247,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
           name,
           slug,
           description,
+          gcmConsentTypes,
         },
       },
       onCompleted(_response, errors) {
@@ -481,6 +484,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
                 name={category.name}
                 slug={category.slug}
                 description={category.description}
+                gcmConsentTypes={[...category.gcmConsentTypes]}
                 isUpdating={isUpdating}
                 onSave={handleSaveCategory}
                 onCancel={() => setIsEditingCategory(false)}
@@ -525,6 +529,18 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
                 "
               </code>
             </p>
+            {category.gcmConsentTypes.length > 0 && (
+              <div className="mt-2 flex items-center gap-1.5">
+                <span className="text-xs text-txt-secondary/70">
+                  {__("Google Consent Mode:")}
+                </span>
+                {category.gcmConsentTypes.map(type => (
+                  <Badge key={type} variant="neutral">
+                    {type}
+                  </Badge>
+                ))}
+              </div>
+            )}
           </>
         )}
       </div>

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

@@ -16,12 +16,23 @@ import { useTranslate } from "@probo/i18n";
 import { Button, Input, Textarea } from "@probo/ui";
 import { useState } from "react";
 
+const GCM_CONSENT_TYPES = [
+  "analytics_storage",
+  "ad_storage",
+  "ad_user_data",
+  "ad_personalization",
+  "functionality_storage",
+  "personalization_storage",
+  "security_storage",
+] as const;
+
 interface EditCategoryFormProps {
   name: string;
   slug: string;
   description: string;
+  gcmConsentTypes: string[];
   isUpdating: boolean;
-  onSave: (name: string, slug: string, description: string) => void;
+  onSave: (name: string, slug: string, description: string, gcmConsentTypes: string[]) => void;
   onCancel: () => void;
 }
 
@@ -29,6 +40,7 @@ export function EditCategoryForm({
   name,
   slug,
   description,
+  gcmConsentTypes,
   isUpdating,
   onSave,
   onCancel,
@@ -37,6 +49,15 @@ export function EditCategoryForm({
   const [editName, setEditName] = useState(name);
   const [editSlug, setEditSlug] = useState(slug);
   const [editDescription, setEditDescription] = useState(description);
+  const [editGcmTypes, setEditGcmTypes] = useState<string[]>(gcmConsentTypes);
+
+  const toggleGcmType = (type: string) => {
+    setEditGcmTypes(prev =>
+      prev.includes(type)
+        ? prev.filter(t => t !== type)
+        : [...prev, type],
+    );
+  };
 
   return (
     <div className="space-y-3">
@@ -57,11 +78,35 @@ export function EditCategoryForm({
         placeholder={__("Category description")}
         rows={2}
       />
+      <div>
+        <label className="text-sm font-medium">
+          {__("Google Consent Mode")}
+        </label>
+        <p className="text-xs text-muted-foreground mb-2">
+          {__("Select the Google Consent Mode signals this category controls.")}
+        </p>
+        <div className="flex flex-wrap gap-2">
+          {GCM_CONSENT_TYPES.map(type => (
+            <label
+              key={type}
+              className="flex items-center gap-1.5 text-xs cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                checked={editGcmTypes.includes(type)}
+                onChange={() => toggleGcmType(type)}
+                className="rounded"
+              />
+              <code className="font-mono">{type}</code>
+            </label>
+          ))}
+        </div>
+      </div>
       <div className="flex items-center gap-2">
         <Button
           onClick={() => {
             if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(editSlug)) return;
-            onSave(editName, editSlug, editDescription);
+            onSave(editName, editSlug, editDescription, editGcmTypes);
           }}
           disabled={isUpdating}
         >