From d2638a3d7808981bdaf5e42055872983a238c6ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Mon, 27 Jul 2026 15:05:39 +0200
Subject: [PATCH] Extract selection bar styles into a tailwind variant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bottom selection action bar carried its layout as inline class
strings on the container divs. Move them into a slotted tv in the
documents variants module, matching the documentsLayout pattern, so the
component consumes named slots instead of ad hoc className literals.

Signed-off-by: Émile Ré <emile@probo.com>
---
 .../documents/_components/DocumentsSelectionBar.tsx    |  9 ++++++---
 apps/compliance-portal/src/pages/documents/variants.ts | 10 ++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/compliance-portal/src/pages/documents/_components/DocumentsSelectionBar.tsx b/apps/compliance-portal/src/pages/documents/_components/DocumentsSelectionBar.tsx
index dd577090b..097a0a5df 100644
--- a/apps/compliance-portal/src/pages/documents/_components/DocumentsSelectionBar.tsx
+++ b/apps/compliance-portal/src/pages/documents/_components/DocumentsSelectionBar.tsx
@@ -26,6 +26,7 @@ import { useTranslation } from "react-i18next";
 import type { DocumentSelectionEntry } from "../_lib/DocumentSelectionContext";
 import { useDocumentSelection } from "../_lib/DocumentSelectionContext";
 import { useBulkRequestAccess } from "../_lib/useBulkRequestAccess";
+import { selectionBar } from "../variants";
 
 interface DocumentsSelectionBarProps {
   // Every selectable row on the page, used to resolve the current selection into
@@ -55,13 +56,15 @@ export function DocumentsSelectionBar({ entries }: DocumentsSelectionBarProps) {
     requestAccess(lockedSelected.map(entry => ({ id: entry.id, kind: entry.kind })));
   };
 
+  const { bar, inner, actions } = selectionBar();
+
   return (
-    <div className="fixed inset-x-0 bottom-0 z-10 border-t border-sand-a3 bg-sand-1/80 px-8 py-4 backdrop-blur max-md:px-4">
-      <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4">
+    <div className={bar()}>
+      <div className={inner()}>
         <Text size={2} weight="medium" color="neutral" highContrast>
           {t("selection.count", { count: selectedIds.size })}
         </Text>
-        <div className="flex items-center gap-2">
+        <div className={actions()}>
           <Button variant="ghost" color="neutral" onClick={clear}>
             {t("selection.clear")}
           </Button>
diff --git a/apps/compliance-portal/src/pages/documents/variants.ts b/apps/compliance-portal/src/pages/documents/variants.ts
index ad8a978cb..180d756fe 100644
--- a/apps/compliance-portal/src/pages/documents/variants.ts
+++ b/apps/compliance-portal/src/pages/documents/variants.ts
@@ -37,3 +37,13 @@ export const documentsLayout = tv({
     busy: false,
   },
 });
+
+// Bottom selection action bar, shown while rows are selected. A fixed, blurred
+// band whose inner column aligns with the results column above it.
+export const selectionBar = tv({
+  slots: {
+    bar: "fixed inset-x-0 bottom-0 z-10 border-t border-sand-a3 bg-sand-1/80 px-8 py-4 backdrop-blur max-md:px-4",
+    inner: "mx-auto flex w-full max-w-5xl items-center justify-between gap-4",
+    actions: "flex items-center gap-2",
+  },
+});