From 47cc88c82081dccedc8b728d8aabc7c11a96e3bd Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 5 Sep 2025 11:44:37 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20disable=20pagination?=
 =?UTF-8?q?=20controls=20at=20first=20and=20last=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Disable previous/next pagination controls when users are on the first or
last page respectively to prevent offering non-functional interactions.

Improves user experience by clearly indicating when navigation options
are unavailable and preventing confusion from inactive controls that
appear interactive.
---
 .../rooms/livekit/components/controls/PaginationControl.tsx   | 4 ++++
 src/frontend/src/primitives/buttonRecipe.ts                   | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx
index 8a51dee8..4ed1ff91 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx
@@ -44,6 +44,8 @@ export function PaginationControl({
     }
   }, [connectedElement])
 
+  if (totalPageCount <= 1) return null
+
   return (
     <div
       className={css({
@@ -66,6 +68,7 @@ export function PaginationControl({
       data-lk-user-interaction={interactive}
     >
       <Button
+        isDisabled={currentPage == 1}
         onPress={prevPage}
         size="xs"
         variant="quaternaryText"
@@ -85,6 +88,7 @@ export function PaginationControl({
         })}
       </span>
       <Button
+        isDisabled={currentPage == totalPageCount}
         onPress={nextPage}
         size="xs"
         variant="quaternaryText"
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index e5563a37..913d110d 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -205,6 +205,10 @@ export const buttonRecipe = cva({
           backgroundColor: 'greyscale.100',
           color: 'greyscale.700',
         },
+        '&[data-disabled]': {
+          backgroundColor: 'transparent',
+          color: 'greyscale.300',
+        },
       },
       greyscale: {
         backgroundColor: 'transparent',