From c7a2f4209b0d5cc69d55d06bd9563f6cc5cc7e20 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Sun, 5 Apr 2026 19:34:40 +0200
Subject: [PATCH] fix(web): add proper disabled state to Pagination
 Previous/Next

Apply opacity-50, pointer-events-none, aria-disabled, and tabIndex=-1
when disabled. Prevents navigation and gives visual feedback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 webui2/src/components/shared/pagination.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/webui2/src/components/shared/pagination.tsx b/webui2/src/components/shared/pagination.tsx
index a7e91c542e5121d0dc27a6fc12949847b5735d7f..c7b2b200c3558dcc0dc42de822d89eafa6a4521f 100644
--- a/webui2/src/components/shared/pagination.tsx
+++ b/webui2/src/components/shared/pagination.tsx
@@ -36,12 +36,15 @@ export function Info({ children }: InfoProps) {
 const PreviousComponent = React.forwardRef<
   HTMLAnchorElement,
   { className?: string; children?: React.ReactNode; disabled?: boolean } & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, disabled, ...props }, ref) => (
   <a
     ref={ref}
+    aria-disabled={disabled || undefined}
+    tabIndex={disabled ? -1 : undefined}
     className={cn(
       buttonVariants({ variant: "ghost", size: "sm" }),
       "text-muted-foreground gap-1",
+      disabled && "pointer-events-none opacity-50",
       className,
     )}
     {...props}
@@ -60,12 +63,15 @@ export const Previous: LinkComponent<typeof PreviousComponent> = (props) => (
 const NextComponent = React.forwardRef<
   HTMLAnchorElement,
   { className?: string; children?: React.ReactNode; disabled?: boolean } & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, disabled, ...props }, ref) => (
   <a
     ref={ref}
+    aria-disabled={disabled || undefined}
+    tabIndex={disabled ? -1 : undefined}
     className={cn(
       buttonVariants({ variant: "ghost", size: "sm" }),
       "text-muted-foreground gap-1",
+      disabled && "pointer-events-none opacity-50",
       className,
     )}
     {...props}