Extract bordered list into UI List

Documents and data requests duplicated the same card and
row chrome. A shared List primitive keeps those surfaces
consistent across the portal.

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

apps/compliance-portal/src/pages/documents/DocumentsPageSkeleton.tsx

@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+import { ListSkeleton } from "@probo/ui/src/v2/List/ListSkeleton";
 import { TabsSkeleton } from "@probo/ui/src/v2/Tabs/TabsSkeleton";
 import { HeadingSkeleton } from "@probo/ui/src/v2/typography/HeadingSkeleton";
 import { TextSkeleton } from "@probo/ui/src/v2/typography/TextSkeleton";
@@ -27,7 +28,6 @@ import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
 import { documentsLayout } from "./variants";
 
 const SECTION_PLACEHOLDERS = ["a", "b"];
-const ROW_PLACEHOLDERS = ["x", "y", "z"];
 
 export function DocumentsPageSkeleton() {
   const { page, results } = documentsLayout();
@@ -45,11 +45,7 @@ export function DocumentsPageSkeleton() {
           {SECTION_PLACEHOLDERS.map(section => (
             <div key={section} className="flex flex-col gap-3">
               <TextSkeleton size={3} className="w-40" />
-              <div className="overflow-hidden rounded-4 border border-sand-a4 bg-sand-1">
-                {ROW_PLACEHOLDERS.map(row => (
-                  <div key={row} className="h-16 animate-pulse border-b border-sand-a3 bg-sand-2 last:border-b-0" />
-                ))}
-              </div>
+              <ListSkeleton count={3} />
             </div>
           ))}
         </div>

apps/compliance-portal/src/pages/documents/_components/DocumentEntry.tsx

@@ -18,11 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+import { ListItem } from "@probo/ui/src/v2/List/ListItem";
+import { ListItemContent } from "@probo/ui/src/v2/List/ListItemContent";
 import { Text } from "@probo/ui/src/v2/typography/Text";
 import type { ReactNode } from "react";
 
 import { DocumentAccessAction } from "./DocumentAccessAction";
-import { documentListItem } from "./variants";
 
 interface DocumentEntryProps {
   // Primary line (document title, file name, or framework name).
@@ -53,18 +54,16 @@ export function DocumentEntry({
   onGetAccess,
   isRequesting,
 }: DocumentEntryProps) {
-  const { root, content } = documentListItem();
-
   return (
-    <div className={root()}>
-      <div className={content()}>
+    <ListItem>
+      <ListItemContent>
         <Text size={2} weight="medium" color="neutral" highContrast className="truncate">
           {title}
         </Text>
         <Text size={1} color="gold" className="truncate">
           {meta}
         </Text>
-      </div>
+      </ListItemContent>
       <DocumentAccessAction
         isAuthorized={isAuthorized}
         requested={requested}
@@ -72,6 +71,6 @@ export function DocumentEntry({
         onGetAccess={onGetAccess}
         isRequesting={isRequesting}
       />
-    </div>
+    </ListItem>
   );
 }

apps/compliance-portal/src/pages/documents/_components/DocumentSection.tsx

@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+import { List } from "@probo/ui/src/v2/List/List";
 import { Text } from "@probo/ui/src/v2/typography/Text";
 import type { ReactNode } from "react";
 
@@ -32,7 +33,7 @@ interface DocumentSectionProps {
 
 // One category group: a localized header above a bordered list of rows.
 export function DocumentSection({ title, description, children }: DocumentSectionProps) {
-  const { root, header, list } = documentSection();
+  const { root, header } = documentSection();
 
   return (
     <section className={root()}>
@@ -46,7 +47,7 @@ export function DocumentSection({ title, description, children }: DocumentSectio
           </Text>
         )}
       </div>
-      <div className={list()}>{children}</div>
+      <List>{children}</List>
     </section>
   );
 }

apps/compliance-portal/src/pages/documents/_components/variants.ts

@@ -20,22 +20,13 @@
 
 import { tv } from "tailwind-variants/lite";
 
-// Document list: category sections, each a titled block above a bordered list.
-// Entries share a common layout (title + accent metadata + trailing access
-// action).
+// Document list: category section chrome (title + description). The bordered
+// list surface and row layout live in @probo/ui List.
 
 export const documentSection = tv({
   slots: {
     root: "flex flex-col gap-3",
     header: "flex flex-col gap-0.5",
-    list: "overflow-hidden rounded-4 border border-sand-a4 bg-sand-1",
-  },
-});
-
-export const documentListItem = tv({
-  slots: {
-    root: "flex items-center gap-4 border-b border-sand-a3 px-4 py-3 last:border-b-0",
-    content: "flex min-w-0 flex-1 flex-col gap-0.5",
   },
 });
 

apps/compliance-portal/src/pages/requests/RequestsPage.tsx

@@ -20,6 +20,7 @@
 
 import { NoteIcon, PlusIcon } from "@phosphor-icons/react";
 import { Button } from "@probo/ui/src/v2/Button/Button";
+import { List } from "@probo/ui/src/v2/List/List";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { PreloadedQuery } from "react-relay";
@@ -37,7 +38,6 @@ import type { RequestsPageQuery } from "./__generated__/RequestsPageQuery.graphq
 import type { RequestsPageRefetchQuery } from "./__generated__/RequestsPageRefetchQuery.graphql";
 import { NewRequestDialog } from "./_components/NewRequestDialog";
 import { RightsRequestListItem } from "./_components/RightsRequestListItem";
-import { rightsRequestList } from "./_components/variants";
 import { requestsLayout } from "./variants";
 
 export const requestsPageQuery = graphql`
@@ -116,7 +116,6 @@ export function RequestsPage({ queryRef }: RequestsPageProps) {
   };
 
   const { page, results, loadMore } = requestsLayout();
-  const { card } = rightsRequestList();
 
   const newRequestButton = (
     <Button
@@ -149,11 +148,11 @@ export function RequestsPage({ queryRef }: RequestsPageProps) {
                 )
               : (
                   <>
-                    <div className={card()}>
+                    <List>
                       {requests.map(request => (
                         <RightsRequestListItem key={request.id} rightsRequestKey={request} />
                       ))}
-                    </div>
+                    </List>
                     {hasNext && (
                       <div className={loadMore()}>
                         <Button

apps/compliance-portal/src/pages/requests/RequestsPageSkeleton.tsx

@@ -18,18 +18,15 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+import { ListSkeleton } from "@probo/ui/src/v2/List/ListSkeleton";
 import { HeadingSkeleton } from "@probo/ui/src/v2/typography/HeadingSkeleton";
 
 import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
 
-import { rightsRequestList } from "./_components/variants";
 import { requestsLayout } from "./variants";
 
-const ROW_PLACEHOLDERS = ["a", "b", "c", "d"];
-
 export function RequestsPageSkeleton() {
   const { page, results } = requestsLayout();
-  const { card } = rightsRequestList();
 
   return (
     <>
@@ -41,14 +38,7 @@ export function RequestsPageSkeleton() {
       </HeaderBand>
       <div className={page()}>
         <div className={results()}>
-          <div className={card()}>
-            {ROW_PLACEHOLDERS.map(row => (
-              <div
-                key={row}
-                className="h-16 animate-pulse border-b border-sand-a3 bg-sand-2 last:border-b-0"
-              />
-            ))}
-          </div>
+          <ListSkeleton count={4} />
         </div>
       </div>
     </>

apps/compliance-portal/src/pages/requests/_components/RightsRequestListItem.tsx

@@ -19,6 +19,8 @@
 // SOFTWARE.
 
 import { Badge } from "@probo/ui/src/v2/Badge/Badge";
+import { ListItem } from "@probo/ui/src/v2/List/ListItem";
+import { ListItemContent } from "@probo/ui/src/v2/List/ListItemContent";
 import { Text } from "@probo/ui/src/v2/typography/Text";
 import { useTranslation } from "react-i18next";
 import { graphql, useFragment } from "react-relay";
@@ -56,14 +58,14 @@ export function RightsRequestListItem({ rightsRequestKey }: RightsRequestListIte
 
   const badge = getRightsRequestStatusBadge(request.requestState);
   const reference = formatRightsRequestReference(request.id, request.createdAt);
-  const { item, icon, content, subline, trailing } = rightsRequestList();
+  const { icon, subline, trailing } = rightsRequestList();
 
   return (
-    <div className={item()}>
+    <ListItem>
       <span className={icon()}>
         {getRightsRequestTypeIcon(request.requestType)}
       </span>
-      <div className={content()}>
+      <ListItemContent>
         <Text size={2} weight="medium" color="neutral" highContrast className="truncate">
           {t(`types.${request.requestType}`)}
         </Text>
@@ -77,7 +79,7 @@ export function RightsRequestListItem({ rightsRequestKey }: RightsRequestListIte
             </Text>
           )}
         </div>
-      </div>
+      </ListItemContent>
       <div className={trailing()}>
         <Text size={1} color="faint">
           {formatRelativeTime(request.createdAt, i18n.language)}
@@ -86,6 +88,6 @@ export function RightsRequestListItem({ rightsRequestKey }: RightsRequestListIte
           {t(`status.${request.requestState}`)}
         </Badge>
       </div>
-    </div>
+    </ListItem>
   );
 }

apps/compliance-portal/src/pages/requests/_components/variants.ts

@@ -20,14 +20,11 @@
 
 import { tv } from "tailwind-variants/lite";
 
-// Data request list: a bordered card of rows, each with a leading type icon, a
-// title + reference/message subline, and a trailing time + status badge.
+// Data request row chrome beyond the shared list surface: leading type icon,
+// reference/message subline, and trailing time + status badge.
 export const rightsRequestList = tv({
   slots: {
-    card: "overflow-hidden rounded-4 border border-sand-a4 bg-sand-1",
-    item: "flex items-center gap-4 border-b border-sand-a3 px-4 py-3 last:border-b-0",
     icon: "flex size-9 shrink-0 items-center justify-center rounded-3 bg-sand-3 text-sand-a11 [&_svg]:size-4",
-    content: "flex min-w-0 flex-1 flex-col gap-0.5",
     subline: "flex min-w-0 items-center gap-1.5",
     trailing: "flex shrink-0 items-center gap-3",
   },