Add signature navigation to PDF viewer toolbar

This commit introduces a signature navigation feature in the PDF viewer:
- Removed zoom preset buttons to make space for the new toolbar.
- Added "Previous" and "Next" buttons for navigating signatures.
- Displayed a signature counter with signed/total signatures and a badge for unsigned signatures or completion status.
- Introduced state variables (`_totalSignatures`, `_signedSignatures`, `_unsignedSignatures`) to track signature progress.
- Implemented methods for navigating signatures (`GoToPreviousSignature`, `GoToNextSignature`, `UpdateSignatureCounterAsync`).
- Enhanced JavaScript with `getSignatureNavState`, `goToNextSignature`, and `goToPreviousSignature` for navigation logic.
- Updated CSS for the toolbar and signature navigation, including responsive adjustments and hover effects.
- Improved error handling during signature counter updates.
- Updated `RenderSignatureButtonsAsync` to refresh the signature counter after rendering.

These changes improve the user experience by enabling efficient navigation and tracking of signatures in the PDF viewer.

EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor

@@ -115,22 +115,43 @@
 
                         <div class="pdf-toolbar__divider"></div>
 
-                        <div class="pdf-toolbar__section">
-                            <button class="pdf-toolbar__btn pdf-toolbar__btn--preset" @onclick="() => SetZoom(100)" title="Tatsächliche Größe">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="me-1">
-                                    <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
-                                    <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
-                                </svg>
-                                100%
-                            </button>
-                            <button class="pdf-toolbar__btn pdf-toolbar__btn--preset" @onclick="FitToWidth" title="An Breite anpassen">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="me-1">
-                                    <path d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM7.5 7a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
-                                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm1 0v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
-                                </svg>
-                                Breite
-                            </button>
-                        </div>
+                        @if (_totalSignatures > 0) {
+                            <div class="pdf-toolbar__section pdf-toolbar__signature-nav">
+                                <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav" 
+                                        @onclick="GoToPreviousSignature" 
+                                        disabled="@(_signedSignatures == 0)"
+                                        title="Vorherige Unterschrift">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                                    </svg>
+                                </button>
+                                
+                                <div class="pdf-toolbar__signature-counter">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                                    </svg>
+                                    <span class="pdf-toolbar__signature-counter-text">
+                                        <strong style="color: @(_unsignedSignatures > 0 ? "#4F46E5" : "#10b981");">@_signedSignatures</strong>
+                                        <span style="opacity: 0.6;">&nbsp;/&nbsp;</span>
+                                        <span>@_totalSignatures</span>
+                                    </span>
+                                    @if (_unsignedSignatures > 0) {
+                                        <span class="pdf-toolbar__signature-badge">@_unsignedSignatures offen</span>
+                                    } else {
+                                        <span class="pdf-toolbar__signature-badge pdf-toolbar__signature-badge--complete">✓ Komplett</span>
+                                    }
+                                </div>
+                                
+                                <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav" 
+                                        @onclick="GoToNextSignature" 
+                                        disabled="@(_unsignedSignatures == 0)"
+                                        title="Nächste Unterschrift">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        }
                     </div>
                 }
                 <div class="pdf-frame">
@@ -355,6 +376,11 @@ bool _showThumbnails = true;
 DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
 IReadOnlyList<SignatureDto> _signatures = [];
 
+// Signature navigation state
+int _totalSignatures = 0;
+int _signedSignatures = 0;
+int _unsignedSignatures = 0;
+
 // Signature state
 record SignatureCapture(string DataUrl, string FullName, string Position, string Place);
 SignatureCapture? _capturedSignature;
@@ -560,6 +586,7 @@ const int MaxThumbnailWidth = 400;
 
         try {
             await JSRuntime.InvokeVoidAsync("pdfViewer.renderSignatureButtons", _signatures, _currentPage, _dotNetRef);
+            await UpdateSignatureCounterAsync();
         } catch (Exception ex) {
             System.Diagnostics.Debug.WriteLine($"Signature button rendering error: {ex.Message}");
         }
@@ -579,8 +606,38 @@ const int MaxThumbnailWidth = 400;
             _capturedSignature.FullName,
             _capturedSignature.Position,
             _capturedSignature.Place);
+        
+        // Update counter
+        await UpdateSignatureCounterAsync();
     }
 
+    [JSInvokable]
+    public async Task OnSignatureNavChanged() {
+        await UpdateSignatureCounterAsync();
+    }
+
+    async Task UpdateSignatureCounterAsync() {
+        try {
+            var state = await JSRuntime.InvokeAsync<SignatureNavState>("pdfViewer.getSignatureNavState");
+            _totalSignatures = state.Total;
+            _signedSignatures = state.Signed;
+            _unsignedSignatures = state.Unsigned;
+            await InvokeAsync(StateHasChanged);
+        } catch {
+            // Ignore errors during counter update
+        }
+    }
+
+    async Task GoToPreviousSignature() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.goToPreviousSignature", _dotNetRef);
+    }
+
+    async Task GoToNextSignature() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.goToNextSignature", _dotNetRef);
+    }
+
+    record SignatureNavState(int Total, int Signed, int Unsigned, int CurrentIndex, bool CanGoPrev, bool CanGoNext);
+
     // Signature popup methods
     void OpenSignaturePopup() {
         _activeSignatureTab = SignatureTabDraw;

EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css

@@ -216,30 +216,32 @@ body.resizing {
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     border-radius: 12px;
-    padding: 0.75rem 1.75rem;
+    padding: 0.75rem 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 2rem;
+    gap: 1.5rem;
     box-shadow: 
         0 4px 16px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(126, 34, 206, 0.1);
     border: 1px solid rgba(126, 34, 206, 0.15);
     flex-shrink: 0;
-    width: 90%;
-    max-width: 1200px;
+    width: 95%;
+    max-width: 1400px;
 }
 
 .pdf-toolbar__section {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    flex-shrink: 0;
 }
 
 .pdf-toolbar__zoom-section {
     gap: 0.75rem;
     flex: 1;
-    max-width: 500px;
+    max-width: 400px;
+    min-width: 280px;
     justify-content: center;
 }
 
@@ -341,8 +343,8 @@ body.resizing {
 .pdf-toolbar__zoom-slider {
     -webkit-appearance: none;
     width: 100%;
-    min-width: 240px;
-    max-width: 450px;
+    min-width: 180px;
+    max-width: 350px;
     height: 6px;
     border-radius: 3px;
     background: linear-gradient(90deg, 
@@ -395,6 +397,71 @@ body.resizing {
     text-align: center;
 }
 
+/* Signature Navigation Styles */
+.pdf-toolbar__signature-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
+    border: 1px solid rgba(126, 34, 206, 0.2);
+    border-radius: 10px;
+    padding: 0.25rem 0.5rem;
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__btn--signature-nav {
+    min-width: 30px;
+    min-height: 30px;
+    padding: 0.25rem;
+    background: white;
+    border: 1px solid rgba(126, 34, 206, 0.25);
+}
+
+.pdf-toolbar__btn--signature-nav:hover:not(:disabled) {
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    border-color: transparent;
+}
+
+.pdf-toolbar__btn--signature-nav:hover:not(:disabled) svg {
+    color: white;
+}
+
+.pdf-toolbar__signature-counter {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0 0.375rem;
+}
+
+.pdf-toolbar__signature-counter svg {
+    color: #7e22ce;
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__signature-counter-text {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #1e293b;
+    white-space: nowrap;
+}
+
+.pdf-toolbar__signature-badge {
+    font-size: 0.625rem;
+    font-weight: 700;
+    padding: 0.1875rem 0.5rem;
+    border-radius: 5px;
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+    color: #7e22ce;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+}
+
+.pdf-toolbar__signature-badge--complete {
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
+    color: #059669;
+}
+
 .pdf-frame {
     background: white;
     border-radius: 16px;

EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js

@@ -455,6 +455,150 @@ window.pdfViewer = {
 
     // Signature button functionality
     signatureButtons: [],
+    appliedSignatures: [],  // Track which signatures have been applied
+
+    /**
+     * Gets signature navigation state (for toolbar display)
+     * @returns {object} { total, signed, unsigned, currentIndex, canGoPrev, canGoNext }
+     */
+    getSignatureNavState() {
+        const total = this.signatureButtons.length + this.appliedSignatures.length;
+        const signed = this.appliedSignatures.length;
+        const unsigned = this.signatureButtons.length;
+        
+        // Find index of first unsigned signature button (if any)
+        let currentIndex = -1;
+        if (unsigned > 0) {
+            currentIndex = signed; // 0-based index of next signature to sign
+        }
+        
+        return {
+            total: total,
+            signed: signed,
+            unsigned: unsigned,
+            currentIndex: currentIndex,
+            canGoPrev: signed > 0,  // Can go to previous applied signature
+            canGoNext: unsigned > 0  // Can go to next unsigned signature
+        };
+    },
+
+    /**
+     * Navigates to the next unsigned signature button.
+     * Scrolls to button position and changes page if necessary.
+     */
+    async goToNextSignature(dotNetRef) {
+        if (this.signatureButtons.length === 0) {
+            return false;
+        }
+
+        // Get first unsigned signature button
+        const button = this.signatureButtons[0];
+        const signatureId = parseInt(button.getAttribute('data-signature-id'));
+        
+        // Find signature in original list to get page number
+        const signature = this._allSignatures?.find(s => s.id === signatureId);
+        if (!signature) {
+            return false;
+        }
+
+        // Change page if needed
+        if (signature.page !== this.pageNum) {
+            await this.goToPage(signature.page);
+            
+            // Wait for page render and button re-creation
+            await new Promise(resolve => setTimeout(resolve, 300));
+            
+            // Re-find button after page change
+            const newButton = this.signatureButtons.find(btn => 
+                parseInt(btn.getAttribute('data-signature-id')) === signatureId);
+            
+            if (newButton) {
+                this.scrollToButton(newButton);
+            }
+        } else {
+            this.scrollToButton(button);
+        }
+
+        // Notify Blazor to update counter
+        if (dotNetRef) {
+            dotNetRef.invokeMethodAsync('OnSignatureNavChanged');
+        }
+
+        return true;
+    },
+
+    /**
+     * Navigates to the previous signature (last applied one).
+     * Scrolls to signature position and changes page if necessary.
+     */
+    async goToPreviousSignature(dotNetRef) {
+        if (this.appliedSignatures.length === 0) {
+            return false;
+        }
+
+        // Get last applied signature
+        const lastSig = this.appliedSignatures[this.appliedSignatures.length - 1];
+        
+        // Change page if needed
+        if (lastSig.page !== this.pageNum) {
+            await this.goToPage(lastSig.page);
+            await new Promise(resolve => setTimeout(resolve, 300));
+        }
+
+        // Find applied signature container
+        const container = document.querySelector(`.applied-signature[data-signature-id="${lastSig.id}"]`);
+        if (container) {
+            this.scrollToElement(container);
+        }
+
+        // Notify Blazor
+        if (dotNetRef) {
+            dotNetRef.invokeMethodAsync('OnSignatureNavChanged');
+        }
+
+        return true;
+    },
+
+    /**
+     * Scrolls to center a button in the viewport
+     */
+    scrollToButton(button) {
+        const wrapper = this.canvas.closest('.pdf-canvas-wrapper');
+        if (!wrapper) return;
+
+        const buttonRect = button.getBoundingClientRect();
+        const wrapperRect = wrapper.getBoundingClientRect();
+
+        // Calculate scroll to center button
+        const scrollLeft = wrapper.scrollLeft + buttonRect.left - wrapperRect.left - (wrapperRect.width / 2) + (buttonRect.width / 2);
+        const scrollTop = wrapper.scrollTop + buttonRect.top - wrapperRect.top - (wrapperRect.height / 2) + (buttonRect.height / 2);
+
+        wrapper.scrollTo({
+            left: scrollLeft,
+            top: scrollTop,
+            behavior: 'smooth'
+        });
+    },
+
+    /**
+     * Scrolls to center an element in the viewport
+     */
+    scrollToElement(element) {
+        const wrapper = this.canvas.closest('.pdf-canvas-wrapper');
+        if (!wrapper) return;
+
+        const elemRect = element.getBoundingClientRect();
+        const wrapperRect = wrapper.getBoundingClientRect();
+
+        const scrollLeft = wrapper.scrollLeft + elemRect.left - wrapperRect.left - (wrapperRect.width / 2) + (elemRect.width / 2);
+        const scrollTop = wrapper.scrollTop + elemRect.top - wrapperRect.top - (wrapperRect.height / 2) + (elemRect.height / 2);
+
+        wrapper.scrollTo({
+            left: scrollLeft,
+            top: scrollTop,
+            behavior: 'smooth'
+        });
+    },
 
     /**
      * Renders clickable signature buttons on the PDF canvas.
@@ -471,6 +615,7 @@ window.pdfViewer = {
         }
 
         this.dotNetReference = dotNetRef;
+        this._allSignatures = signatures;  // Store for navigation
 
         try {
             // Filter signatures for current page
@@ -629,12 +774,23 @@ window.pdfViewer = {
             const left = button.style.left;
             const top = button.style.top;
 
+            // Find signature data for tracking
+            const signature = this._allSignatures?.find(s => s.id === signatureId);
+
             // Remove button
             if (button.parentNode) {
                 button.parentNode.removeChild(button);
             }
             this.signatureButtons.splice(buttonIndex, 1);
 
+            // Track applied signature
+            if (signature) {
+                this.appliedSignatures.push({
+                    id: signatureId,
+                    page: signature.page
+                });
+            }
+
             // Create signature container
             const signatureContainer = document.createElement('div');
             signatureContainer.className = 'applied-signature';