Extract duplicate filter construction logic into helper function (#336)

* Initial plan

* Extract duplicate filter logic into helper function

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* Add documentation to clarify when each filter method should be used

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

Author: Copilot

components/page-tool/index.js

@@ -118,6 +118,7 @@ export default class PageTool extends HTMLElement {
         }, 0)
     }
 
+    // Apply filters to standard transcription interface images (uses CSS classes on imageEl)
     updateMainImageFilters(imageEl) {
         if (!imageEl) return
 
@@ -131,6 +132,20 @@ export default class PageTool extends HTMLElement {
         imageEl.style.filter = filters.join(' ')
     }
 
+    // Apply filters to simple transcription interface images (uses component state)
+    applyFiltersToImage(imageEl) {
+        if (!imageEl) return
+
+        const filters = []
+        if (this.grayscaleActive) filters.push('grayscale(100%)')
+        if (this.invertActive) filters.push('invert(100%)')
+        filters.push(`contrast(${this.contrast}%)`)
+        filters.push(`brightness(${this.brightness}%)`)
+
+        imageEl.style.transition = 'filter 250ms ease'
+        imageEl.style.filter = filters.join(' ')
+    }
+
     applyFilters() {
         const iface = this.getTranscriptionInterface()
         const transcriptionInterface = iface?.shadowRoot
@@ -144,27 +159,8 @@ export default class PageTool extends HTMLElement {
         const imgTopImg = transcriptionInterface.querySelector('#imgTop img')
         const imgBottomImg = transcriptionInterface.querySelector('#imgBottom img')
 
-        if (imgTopImg) {
-            const filters = []
-            if (this.grayscaleActive) filters.push('grayscale(100%)')
-            if (this.invertActive) filters.push('invert(100%)')
-            filters.push(`contrast(${this.contrast}%)`)
-            filters.push(`brightness(${this.brightness}%)`)
-            
-            imgTopImg.style.transition = 'filter 250ms ease'
-            imgTopImg.style.filter = filters.join(' ')
-        }
-        
-        if (imgBottomImg) {
-            const filters = []
-            if (this.grayscaleActive) filters.push('grayscale(100%)')
-            if (this.invertActive) filters.push('invert(100%)')
-            filters.push(`contrast(${this.contrast}%)`)
-            filters.push(`brightness(${this.brightness}%)`)
-            
-            imgBottomImg.style.transition = 'filter 250ms ease'
-            imgBottomImg.style.filter = filters.join(' ')
-        }
+        this.applyFiltersToImage(imgTopImg)
+        this.applyFiltersToImage(imgBottomImg)
 
         const canvasPanel = transcriptionInterface.querySelector('tpen-line-image')?.shadowRoot?.querySelector('canvas-panel')?.shadowRoot
         if (!canvasPanel) return