🚸(frontend) disable pagination controls at first and last pages

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.

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"

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',