@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/oauth/RemoteMcpConnectionButton.tsx

@@ -1,8 +1,8 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
-import { Button, Spinner } from '../../core/index.js';
-import { useUITranslation } from '../../i18n/index.js';
 import { CheckCircle2, ExternalLink, ShieldAlertIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
+import { Button, Spinner } from '../../core/index.js';
 import { useOAuthPopup } from './useOAuthPopup.js';
 
 interface RemoteMcpConnectionButtonProps {
@@ -46,7 +46,7 @@ export function RemoteMcpConnectionButton({
     variant = 'default',
     showLabel = false,
     showDisconnect = false,
-    readOnly = false
+    readOnly = false,
 }: RemoteMcpConnectionButtonProps) {
     const { client } = useUserSession();
     const { t } = useUITranslation();
@@ -76,19 +76,19 @@ export function RemoteMcpConnectionButton({
     }, [client, appId, collectionId, providedAuthenticated]);
 
     useEffect(() => {
-        loadStatus();
+        void loadStatus();
     }, [loadStatus]);
 
     const { openOAuthPopup } = useOAuthPopup({
         onComplete: () => {
             setAuthenticating(false);
-            loadStatus();
+            void loadStatus();
             onAuthChange?.();
         },
         onError: (error) => {
             console.error('OAuth failed:', error);
             setAuthenticating(false);
-        }
+        },
     });
 
     const handleConnect = async () => {
@@ -108,9 +108,10 @@ export function RemoteMcpConnectionButton({
             }
         } catch (error) {
             console.error('Failed to authorize:', error);
-            const raw = error instanceof Error
-                ? ((error as { original_message?: string }).original_message ?? error.message)
-                : 'Failed to connect';
+            const raw =
+                error instanceof Error
+                    ? ((error as { original_message?: string }).original_message ?? error.message)
+                    : 'Failed to connect';
             const detail = raw.replace(/^[A-Za-z\s]+:\s/, '');
             onError?.(`${displayName}: ${detail}`);
             setAuthenticating(false);
@@ -168,12 +169,7 @@ export function RemoteMcpConnectionButton({
                     <span>{t('mcpOAuth.connected')}</span>
                 </div>
                 {showDisconnect && (
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={handleDisconnect}
-                        disabled={disconnecting}
-                    >
+                    <Button variant="ghost" size="sm" onClick={handleDisconnect} disabled={disconnecting}>
                         {disconnecting ? <Spinner className="size-4" /> : t('mcpOAuth.disconnect')}
                     </Button>
                 )}
@@ -242,7 +238,7 @@ export function RemoteMcpConnectionButton({
                         </>
                     ) : (
                         <>
-                            <ExternalLink className="size-3 mr-1" />
+                            <ExternalLink className="size-3 me-1" />
                             <span>{t('mcpOAuth.connect')}</span>
                         </>
                     )}
@@ -252,12 +248,7 @@ export function RemoteMcpConnectionButton({
     }
 
     return (
-        <Button
-            variant="outline"
-            size="sm"
-            onClick={handleConnect}
-            disabled={authenticating}
-        >
+        <Button variant="outline" size="sm" onClick={handleConnect} disabled={authenticating}>
             {authenticating ? (
                 <>
                     <Spinner className="size-4" />
@@ -265,7 +256,7 @@ export function RemoteMcpConnectionButton({
                 </>
             ) : (
                 <>
-                    <ExternalLink className="size-4 mr-1" />
+                    <ExternalLink className="size-4 me-1" />
                     <span>{t('mcpOAuth.connect')}</span>
                 </>
             )}

package/src/features/oauth/useOAuthPopup.ts

@@ -69,7 +69,7 @@ export function useOAuthPopup({ onComplete, onError }: UseOAuthPopupOptions) {
         const popup = window.open(
             authorizationUrl,
             'oauth_popup',
-            `width=${width},height=${height},left=${left},top=${top},popup=yes`
+            `width=${width},height=${height},left=${left},top=${top},popup=yes`,
         );
 
         let messageReceived = false;

package/src/features/pdf-viewer/PdfPageRenderer.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef, createContext, useContext, useCallback } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
 import { Loader2 } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
 
 // Configure PDF.js worker - use CDN for the worker
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
@@ -10,7 +10,7 @@ function LoadingSpinner({ className, size = 'md' }: { className?: string; size?:
     const sizeClasses = {
         sm: 'w-4 h-4',
         md: 'w-6 h-6',
-        lg: 'w-8 h-8'
+        lg: 'w-8 h-8',
     };
     return (
         <div className={`flex items-center justify-center ${className || ''}`}>
@@ -38,7 +38,7 @@ export function PdfPageRenderer({
     renderTextLayer = false,
     renderAnnotationLayer = false,
     onLoadSuccess,
-    onError
+    onError,
 }: PdfPageRendererProps) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
@@ -64,15 +64,8 @@ export function PdfPageRenderer({
 
     return (
         <div className={className}>
-            {loading && (
-                <LoadingSpinner className="py-4" size="md" />
-            )}
-            <Document
-                file={pdfUrl}
-                onLoadSuccess={handleLoadSuccess}
-                onLoadError={handleError}
-                loading={null}
-            >
+            {loading && <LoadingSpinner className="py-4" size="md" />}
+            <Document file={pdfUrl} onLoadSuccess={handleLoadSuccess} onLoadError={handleError} loading={null}>
                 <Page
                     pageNumber={pageNumber}
                     width={width}
@@ -95,7 +88,9 @@ interface PageDimensions {
 // PDF document proxy type
 interface PDFDocumentProxy {
     numPages: number;
-    getPage: (pageNum: number) => Promise<{ getViewport: (options: { scale: number }) => { width: number; height: number } }>;
+    getPage: (
+        pageNum: number,
+    ) => Promise<{ getViewport: (options: { scale: number }) => { width: number; height: number } }>;
 }
 
 // Context for sharing PDF state
@@ -136,7 +131,7 @@ export function SharedPdfProvider({ pdfUrl, urlLoading = false, children, onLoad
             setPageDimensions({
                 width: viewport.width,
                 height: viewport.height,
-                aspectRatio: viewport.width / viewport.height
+                aspectRatio: viewport.width / viewport.height,
             });
         } catch (err) {
             console.error('Failed to get page dimensions:', err);
@@ -157,7 +152,7 @@ export function SharedPdfProvider({ pdfUrl, urlLoading = false, children, onLoad
         numPages,
         loading: isLoading,
         error,
-        pageDimensions
+        pageDimensions,
     };
 
     // Render function that children use to render pages
@@ -173,11 +168,7 @@ export function SharedPdfProvider({ pdfUrl, urlLoading = false, children, onLoad
     );
 
     if (error) {
-        return (
-            <div className="flex items-center justify-center text-destructive text-sm py-4">
-                Failed to load PDF
-            </div>
-        );
+        return <div className="flex items-center justify-center text-destructive text-sm py-4">Failed to load PDF</div>;
     }
 
     return (
@@ -280,7 +271,7 @@ function VirtualizedThumbnail({
     onSelect,
     renderThumbnail,
     aspectRatio = A4_ASPECT_RATIO,
-    rootMargin = '200px 0px'
+    rootMargin = '200px 0px',
 }: {
     pageNumber: number;
     width?: number;
@@ -305,7 +296,7 @@ function VirtualizedThumbnail({
                     setHasBeenVisible(true);
                 }
             },
-            { rootMargin, threshold: 0 }
+            { rootMargin, threshold: 0 },
         );
 
         observer.observe(container);
@@ -325,10 +316,7 @@ function VirtualizedThumbnail({
             renderTextLayer={false}
             renderAnnotationLayer={false}
             loading={
-                <div
-                    className="flex items-center justify-center bg-muted"
-                    style={{ height: placeholderHeight }}
-                >
+                <div className="flex items-center justify-center bg-muted" style={{ height: placeholderHeight }}>
                     <LoadingSpinner size="sm" />
                 </div>
             }
@@ -348,7 +336,7 @@ function VirtualizedThumbnail({
                 pageNumber,
                 isSelected,
                 pageElement,
-                onSelect
+                onSelect,
             })}
         </div>
     );
@@ -387,7 +375,7 @@ export function PdfThumbnailList({
     onAspectRatioChange,
     onItemHeightChange,
     calculateItemHeight,
-    onPageCountChange
+    onPageCountChange,
 }: PdfThumbnailListProps) {
     const [error, setError] = useState<Error | null>(null);
     const [visibleRange, setVisibleRange] = useState({ start: 0, end: Math.min(15, pageCount) });
@@ -400,23 +388,26 @@ export function PdfThumbnailList({
     }, []);
 
     // Get actual page dimensions and count from PDF on load
-    const handleLoadSuccess = useCallback(async (pdf: PDFDocumentProxy) => {
-        // Report actual page count from PDF
-        onPageCountChange?.(pdf.numPages);
-
-        try {
-            const page = await pdf.getPage(1);
-            const viewport = page.getViewport({ scale: 1 });
-            const ratio = viewport.width / viewport.height;
-            setAspectRatio(ratio);
-            onAspectRatioChange?.(ratio);
-        } catch (err) {
-            console.error('Failed to get page dimensions:', err);
-            // Fall back to A4 if we can't get dimensions
-            setAspectRatio(A4_ASPECT_RATIO);
-            onAspectRatioChange?.(A4_ASPECT_RATIO);
-        }
-    }, [onAspectRatioChange, onPageCountChange]);
+    const handleLoadSuccess = useCallback(
+        async (pdf: PDFDocumentProxy) => {
+            // Report actual page count from PDF
+            onPageCountChange?.(pdf.numPages);
+
+            try {
+                const page = await pdf.getPage(1);
+                const viewport = page.getViewport({ scale: 1 });
+                const ratio = viewport.width / viewport.height;
+                setAspectRatio(ratio);
+                onAspectRatioChange?.(ratio);
+            } catch (err) {
+                console.error('Failed to get page dimensions:', err);
+                // Fall back to A4 if we can't get dimensions
+                setAspectRatio(A4_ASPECT_RATIO);
+                onAspectRatioChange?.(A4_ASPECT_RATIO);
+            }
+        },
+        [onAspectRatioChange, onPageCountChange],
+    );
 
     // Use A4 as fallback if aspect ratio not yet determined
     const effectiveAspectRatio = aspectRatio ?? A4_ASPECT_RATIO;
@@ -425,9 +416,7 @@ export function PdfThumbnailList({
     const placeholderHeight = thumbnailWidth ? Math.round(thumbnailWidth / effectiveAspectRatio) : 200;
     // Total height per item - use custom calculator if provided, otherwise default formula
     // Default: padding (p-2 = 8px top + 8px bottom) + page number text (~24px) + gap
-    const itemHeight = calculateItemHeight
-        ? calculateItemHeight(placeholderHeight)
-        : placeholderHeight + 16 + 24 + 8;
+    const itemHeight = calculateItemHeight ? calculateItemHeight(placeholderHeight) : placeholderHeight + 16 + 24 + 8;
 
     // Notify parent of item height changes for scroll calculations
     useEffect(() => {
@@ -457,7 +446,7 @@ export function PdfThumbnailList({
             const start = Math.max(0, firstVisible - WINDOW_BUFFER);
             const end = Math.min(pageCount, lastVisible + WINDOW_BUFFER);
 
-            setVisibleRange(prev => {
+            setVisibleRange((prev) => {
                 if (prev.start !== start || prev.end !== end) {
                     return { start, end };
                 }
@@ -474,11 +463,7 @@ export function PdfThumbnailList({
     }, [itemHeight, pageCount, scrollContainerRef]);
 
     if (error) {
-        return (
-            <div className="flex items-center justify-center text-destructive text-sm py-4">
-                Failed to load PDF
-            </div>
-        );
+        return <div className="flex items-center justify-center text-destructive text-sm py-4">Failed to load PDF</div>;
     }
 
     if (urlLoading || !pdfUrl) {
@@ -504,15 +489,17 @@ export function PdfThumbnailList({
                 {hasAspectRatio ? (
                     <>
                         {/* Top spacer for pages above visible window */}
-                        {topSpacerHeight > 0 && (
-                            <div style={{ height: topSpacerHeight }} />
-                        )}
+                        {topSpacerHeight > 0 && <div style={{ height: topSpacerHeight }} />}
 
                         {/* Only render pages within the visible window */}
                         {Array.from({ length: visibleRange.end - visibleRange.start }, (_, index) => {
                             const pageNumber = visibleRange.start + index + 1;
                             return (
-                                <div key={pageNumber} data-page-index={pageNumber - 1} style={{ height: itemHeight, overflow: 'hidden' }}>
+                                <div
+                                    key={pageNumber}
+                                    data-page-index={pageNumber - 1}
+                                    style={{ height: itemHeight, overflow: 'hidden' }}
+                                >
                                     <VirtualizedThumbnail
                                         pageNumber={pageNumber}
                                         width={thumbnailWidth}
@@ -526,9 +513,7 @@ export function PdfThumbnailList({
                         })}
 
                         {/* Bottom spacer for pages below visible window */}
-                        {bottomSpacerHeight > 0 && (
-                            <div style={{ height: bottomSpacerHeight }} />
-                        )}
+                        {bottomSpacerHeight > 0 && <div style={{ height: bottomSpacerHeight }} />}
                     </>
                 ) : (
                     <LoadingSpinner className="py-4" size="md" />
@@ -557,7 +542,7 @@ export function PdfDocumentRenderer({
     className,
     renderTextLayer = false,
     renderAnnotationLayer = false,
-    onPageChange
+    onPageChange,
 }: PdfDocumentRendererProps) {
     const [numPages, setNumPages] = useState<number>(0);
     const [loading, setLoading] = useState(true);
@@ -589,15 +574,8 @@ export function PdfDocumentRenderer({
 
     return (
         <div className={className}>
-            {loading && (
-                <LoadingSpinner className="py-8" size="lg" />
-            )}
-            <Document
-                file={pdfUrl}
-                onLoadSuccess={handleLoadSuccess}
-                onLoadError={handleError}
-                loading={null}
-            >
+            {loading && <LoadingSpinner className="py-8" size="lg" />}
+            <Document file={pdfUrl} onLoadSuccess={handleLoadSuccess} onLoadError={handleError} loading={null}>
                 <Page
                     pageNumber={Math.min(pageNumber, numPages || 1)}
                     width={width}

package/src/features/pdf-viewer/PdfPageSlider.tsx

@@ -1,9 +1,9 @@
-import { Button, Center, VTooltip } from "@vertesia/ui/core";
-import clsx from "clsx";
-import { ChevronsDown, ChevronsUp, Maximize, Minus, Plus } from "lucide-react";
-import { ReactNode, useRef, useEffect, useState, useCallback, KeyboardEvent } from "react";
-import { useUITranslation } from '../../i18n/index.js';
-import { PdfThumbnailList } from "./PdfPageRenderer";
+import { Button, Center } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import clsx from 'clsx';
+import { ChevronsDown, ChevronsUp, Maximize, Minus, Plus } from 'lucide-react';
+import { type KeyboardEvent, type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { PdfThumbnailList } from './PdfPageRenderer';
 
 // A4 portrait aspect ratio - used as fallback
 const A4_ASPECT_RATIO = 210 / 297;
@@ -47,7 +47,7 @@ export function PdfPageSlider({
     onPageCountChange,
     className,
     compact = false,
-    headerExtra
+    headerExtra,
 }: PdfPageSliderProps) {
     const { t } = useUITranslation();
     const ref = useRef<HTMLDivElement>(null);
@@ -62,10 +62,10 @@ export function PdfPageSlider({
     const prevItemHeightRef = useRef<number | null>(null);
 
     // Calculate thumbnail width based on zoom level
-    const thumbnailWidth = baseWidth ? Math.round(baseWidth * zoom / 100) : undefined;
+    const thumbnailWidth = baseWidth ? Math.round((baseWidth * zoom) / 100) : undefined;
 
     const zoomIn = useCallback(() => {
-        let currentIndex = ZOOM_LEVELS.findIndex(level => level >= zoom);
+        let currentIndex = ZOOM_LEVELS.findIndex((level) => level >= zoom);
         if (currentIndex === -1) {
             currentIndex = ZOOM_LEVELS.length - 1;
         }
@@ -74,7 +74,7 @@ export function PdfPageSlider({
     }, [zoom]);
 
     const zoomOut = useCallback(() => {
-        let currentIndex = ZOOM_LEVELS.findIndex(level => level >= zoom);
+        let currentIndex = ZOOM_LEVELS.findIndex((level) => level >= zoom);
         if (currentIndex === -1) {
             currentIndex = ZOOM_LEVELS.length - 1;
         }
@@ -88,16 +88,22 @@ export function PdfPageSlider({
 
     // Calculate item height based on placeholder height - this must match the renderThumbnail layout
     // padding (p-1=8 or p-2=16) + text height (~16-20 for compact, ~24 for normal) + gap (gap-1=4 or gap-2=8)
-    const calculateItemHeight = useCallback((placeholderHeight: number) => {
-        const extraHeight = compact ? 8 + 16 + 4 : 16 + 24 + 8;
-        return placeholderHeight + extraHeight;
-    }, [compact]);
+    const calculateItemHeight = useCallback(
+        (placeholderHeight: number) => {
+            const extraHeight = compact ? 8 + 16 + 4 : 16 + 24 + 8;
+            return placeholderHeight + extraHeight;
+        },
+        [compact],
+    );
 
     // Legacy function for resize preservation - kept for backwards compatibility
-    const getItemHeight = (width: number | undefined, ratio: number) => {
-        const placeholderHeight = width ? Math.round(width / ratio) : 200;
-        return calculateItemHeight(placeholderHeight);
-    };
+    const getItemHeight = useCallback(
+        (width: number | undefined, ratio: number) => {
+            const placeholderHeight = width ? Math.round(width / ratio) : 200;
+            return calculateItemHeight(placeholderHeight);
+        },
+        [calculateItemHeight],
+    );
 
     // Single ResizeObserver at parent level to measure thumbnail width
     // Debounced to avoid excessive re-renders during resize
@@ -161,7 +167,7 @@ export function PdfPageSlider({
             if (debounceTimer) clearTimeout(debounceTimer);
             resizeObserver.disconnect();
         };
-    }, [aspectRatio]);
+    }, [aspectRatio, getItemHeight]);
 
     // Track whether we're programmatically scrolling to avoid feedback loops
     const isProgrammaticScrollRef = useRef(false);
@@ -292,20 +298,20 @@ export function PdfPageSlider({
         if (currentPage > 1) {
             onChange(currentPage - 1);
         }
-    }
+    };
     const goNext = () => {
         if (currentPage < pageCount) {
             onChange(currentPage + 1);
         }
-    }
+    };
 
     return (
         <div ref={ref} className={clsx('flex flex-col items-stretch', compact ? 'gap-y-1' : 'gap-y-2', className)}>
-            <div className={clsx("relative flex items-center justify-center px-2", compact ? "h-6" : "h-9")}>
+            <div className={clsx('relative flex items-center justify-center px-2', compact ? 'h-6' : 'h-9')}>
                 <Button variant="ghost" size="xs" onClick={goPrev} alt={t('pdf.previousPage')}>
-                    <ChevronsUp className='size-4' />
+                    <ChevronsUp className="size-4" />
                 </Button>
-                <div className="absolute left-2 flex items-center gap-x-1">
+                <div className="absolute start-2 flex items-center gap-x-1">
                     <ZoomControls
                         zoom={zoom}
                         onZoomIn={zoomIn}
@@ -321,11 +327,14 @@ export function PdfPageSlider({
                         </>
                     )}
                 </div>
-                <div className="absolute right-2">
+                <div className="absolute end-2">
                     <PageNavigator currentPage={currentPage} totalPages={pageCount} onChange={onChange} />
                 </div>
             </div>
-            <div ref={scrollContainerRef} className={clsx('flex flex-col items-center flex-1 overflow-y-auto px-2', compact ? 'gap-1' : 'gap-2')}>
+            <div
+                ref={scrollContainerRef}
+                className={clsx('flex flex-col items-center flex-1 overflow-y-auto px-2', compact ? 'gap-1' : 'gap-2')}
+            >
                 <PdfThumbnailList
                     pdfUrl={pdfUrl}
                     urlLoading={pdfUrlLoading}
@@ -339,25 +348,42 @@ export function PdfPageSlider({
                     onItemHeightChange={setItemHeight}
                     calculateItemHeight={calculateItemHeight}
                     renderThumbnail={({ pageNumber, isSelected, pageElement, onSelect }) => (
-                        <div key={pageNumber} className={clsx("hover:bg-muted rounded-md w-full", compact ? "p-1" : "p-2")}>
-                            <div
-                                className={clsx('relative border-[2px] cursor-pointer overflow-hidden', isSelected ? "border-primary" : "border-border")}
+                        <div
+                            key={pageNumber}
+                            className={clsx('hover:bg-muted rounded-md w-full', compact ? 'p-1' : 'p-2')}
+                        >
+                            <Button
+                                variant="unstyled"
+                                size="none"
+                                aria-pressed={isSelected}
+                                aria-label={`Page ${pageNumber}`}
+                                className={clsx(
+                                    'relative border-[2px] cursor-pointer overflow-hidden',
+                                    isSelected ? 'border-primary' : 'border-border',
+                                )}
                                 onClick={onSelect}
                             >
                                 {pageElement}
-                            </div>
-                            <Center className={clsx("text-muted-foreground font-semibold", compact ? "text-xs pt-0.5" : "text-sm pt-1")}>{pageNumber}</Center>
+                            </Button>
+                            <Center
+                                className={clsx(
+                                    'text-muted-foreground font-semibold',
+                                    compact ? 'text-xs pt-0.5' : 'text-sm pt-1',
+                                )}
+                            >
+                                {pageNumber}
+                            </Center>
                         </div>
                     )}
                 />
             </div>
-            <div className={clsx("flex items-center justify-center", compact ? "h-6" : "h-9")}>
+            <div className={clsx('flex items-center justify-center', compact ? 'h-6' : 'h-9')}>
                 <Button variant="ghost" size="xs" onClick={goNext} alt={t('pdf.nextPage')}>
-                    <ChevronsDown className='size-4' />
+                    <ChevronsDown className="size-4" />
                 </Button>
             </div>
         </div>
-    )
+    );
 }
 
 interface PageNavigatorProps {
@@ -377,7 +403,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
 
     const handleSubmit = () => {
         const page = parseInt(inputValue, 10);
-        if (!isNaN(page) && page >= 1 && page <= totalPages) {
+        if (!Number.isNaN(page) && page >= 1 && page <= totalPages) {
             onChange(page);
         } else {
             // Reset to current page if invalid
@@ -428,50 +454,22 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
     const { t } = useUITranslation();
     return (
         <div className="flex items-center gap-x-0.5">
-            <VTooltip description={t('pdf.zoomOut')} placement="bottom" size="xs">
-                <button
-                    className={clsx(
-                        "p-1 rounded cursor-pointer transition-colors",
-                        canZoomOut
-                            ? "text-muted-foreground hover:text-foreground hover:bg-muted"
-                            : "text-muted-foreground/40 cursor-not-allowed"
-                    )}
-                    onClick={onZoomOut}
-                    disabled={!canZoomOut}
-                >
-                    <Minus className="size-4" />
-                </button>
-            </VTooltip>
-            <span className="text-xs text-muted-foreground min-w-[32px] text-center">
-                {zoom}%
-            </span>
-            <VTooltip description={t('pdf.zoomIn')} placement="bottom" size="xs">
-                <button
-                    className={clsx(
-                        "p-1 rounded cursor-pointer transition-colors",
-                        canZoomIn
-                            ? "text-muted-foreground hover:text-foreground hover:bg-muted"
-                            : "text-muted-foreground/40 cursor-not-allowed"
-                    )}
-                    onClick={onZoomIn}
-                    disabled={!canZoomIn}
-                >
-                    <Plus className="size-4" />
-                </button>
-            </VTooltip>
-            <VTooltip description={t('pdf.fitToWidth')} placement="bottom" size="xs">
-                <button
-                    className={clsx(
-                        "p-1 rounded cursor-pointer transition-colors",
-                        zoom !== DEFAULT_ZOOM
-                            ? "text-muted-foreground hover:text-foreground hover:bg-muted"
-                            : "text-muted-foreground/40"
-                    )}
-                    onClick={onFitToView}
-                >
-                    <Maximize className="size-4" />
-                </button>
-            </VTooltip>
+            <Button variant="ghost" size="xs" onClick={onZoomOut} isDisabled={!canZoomOut} alt={t('pdf.zoomOut')}>
+                <Minus />
+            </Button>
+            <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
+            <Button variant="ghost" size="xs" onClick={onZoomIn} isDisabled={!canZoomIn} alt={t('pdf.zoomIn')}>
+                <Plus />
+            </Button>
+            <Button
+                variant="ghost"
+                size="xs"
+                onClick={onFitToView}
+                alt={t('pdf.fitToWidth')}
+                className={zoom === DEFAULT_ZOOM ? 'text-muted-foreground/40' : undefined}
+            >
+                <Maximize />
+            </Button>
         </div>
     );
-}
+}