diff --git a/src/App.vue b/src/App.vue
index 5ba4789edc..3fda7423c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineOptions } from 'vue'
+import { ref, computed } from 'vue'
 
 defineOptions({ name: 'LibreSign' })
 
diff --git a/src/ExternalApp.vue b/src/ExternalApp.vue
index 662a806525..de8ec47dfb 100644
--- a/src/ExternalApp.vue
+++ b/src/ExternalApp.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineOptions } from 'vue'
+import { computed } from 'vue'
 
 defineOptions({ name: 'LibreSignExternal' })
 
diff --git a/src/composables/useFileEntry.ts b/src/composables/useFileEntry.ts
new file mode 100644
index 0000000000..054d5853e1
--- /dev/null
+++ b/src/composables/useFileEntry.ts
@@ -0,0 +1,110 @@
+/**
+ * SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { computed } from '@vue/reactivity'
+
+import { useSidebarStore } from '../store/sidebar.js'
+
+type FileEntryMetadata = {
+	extension?: string
+}
+
+export type FileEntrySource = {
+	id: number
+	name: string
+	nodeType?: string
+	created_at?: number | string | Date | null
+	metadata?: FileEntryMetadata
+	[key: string]: unknown
+}
+
+type FileEntryStore = {
+	selectFile: (id: number) => void
+}
+
+type ActionsMenuStore = {
+	opened: number | null
+}
+
+type FileEntryProps = {
+	source: FileEntrySource
+}
+
+export function useFileEntry(
+	props: FileEntryProps,
+	options: {
+		actionsMenuStore: ActionsMenuStore
+		filesStore: FileEntryStore
+	},
+) {
+	const sidebarStore = useSidebarStore()
+
+	const mtime = computed(() => new Date(props.source?.created_at || Date.now()))
+	const openedMenu = computed({
+		get: () => options.actionsMenuStore.opened === props.source.id,
+		set: (opened: boolean) => {
+			options.actionsMenuStore.opened = opened ? props.source.id : null
+		},
+	})
+	const mtimeOpacity = computed(() => {
+		const maxOpacityTime = 31 * 24 * 60 * 60 * 1000
+		const timestamp = mtime.value?.getTime?.()
+
+		if (!timestamp) {
+			return {}
+		}
+
+		const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - timestamp)) / maxOpacityTime))
+		if (ratio < 0) {
+			return {}
+		}
+
+		return {
+			color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+		}
+	})
+	const fileExtension = computed(() => {
+		if (props.source.nodeType === 'envelope') {
+			return ''
+		}
+		return props.source.metadata?.extension ? `.${props.source.metadata.extension}` : '.pdf'
+	})
+
+	function onRightClick(event: MouseEvent) {
+		if (openedMenu.value) {
+			return
+		}
+
+		options.actionsMenuStore.opened = props.source.id
+		event.preventDefault()
+		event.stopPropagation()
+
+		const target = event.currentTarget as HTMLElement | null
+		const root = target?.closest('.app-content') as HTMLElement | null
+		if (!root) {
+			return
+		}
+
+		const contentRect = root.getBoundingClientRect()
+		root.style.setProperty('--mouse-pos-x', `${Math.max(0, event.clientX - contentRect.left - 200)}px`)
+		root.style.setProperty('--mouse-pos-y', `${Math.max(0, event.clientY - contentRect.top)}px`)
+	}
+
+	function openDetailsIfAvailable(event: Event) {
+		event.preventDefault()
+		event.stopPropagation()
+		options.filesStore.selectFile(props.source.id)
+		sidebarStore.activeRequestSignatureTab()
+	}
+
+	return {
+		mtime,
+		openedMenu,
+		mtimeOpacity,
+		fileExtension,
+		onRightClick,
+		openDetailsIfAvailable,
+	}
+}
diff --git a/src/mixins/isTouchDevice.js b/src/mixins/isTouchDevice.js
deleted file mode 100644
index 08c69e9e27..0000000000
--- a/src/mixins/isTouchDevice.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2026 LibreCode coop and LibreCode contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-export default {
-	computed: {
-		isTouchDevice() {
-			return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0)
-		},
-	},
-}
diff --git a/src/mixins/signingOrderMixin.js b/src/mixins/signingOrderMixin.js
deleted file mode 100644
index 0fe1e77d77..0000000000
--- a/src/mixins/signingOrderMixin.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2025 LibreCode coop and LibreCode contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-export default {
-	methods: {
-		recalculateSigningOrders(signers, targetIndex, originalOrders = null, oldIndex = null) {
-			if (signers.length === 0) {
-				return
-			}
-
-			const hasPrev = targetIndex > 0
-			const hasNext = targetIndex < signers.length - 1
-			const isLastPosition = targetIndex === signers.length - 1
-			let prevOrder = null
-			let nextOrder = null
-
-			if (originalOrders !== null && oldIndex !== null) {
-				if (targetIndex > oldIndex) {
-					if (hasPrev) {
-						prevOrder = originalOrders[targetIndex]
-					}
-					if (hasNext) {
-						nextOrder = originalOrders[targetIndex + 1]
-					}
-				} else {
-					if (hasPrev) {
-						prevOrder = originalOrders[targetIndex - 1]
-					}
-					if (hasNext) {
-						nextOrder = originalOrders[targetIndex]
-					}
-				}
-
-				if (isLastPosition && hasPrev) {
-					prevOrder = signers[targetIndex - 1].signingOrder
-				}
-			} else {
-				if (hasPrev) {
-					prevOrder = signers[targetIndex - 1].signingOrder
-				}
-				if (hasNext) {
-					nextOrder = signers[targetIndex + 1].signingOrder
-				}
-			}
-
-			let newOrder
-			if (!hasPrev) {
-				newOrder = 1
-				for (let i = targetIndex + 1; i < signers.length; i++) {
-					signers[i].signingOrder += 1
-				}
-			} else if (isLastPosition) {
-				newOrder = prevOrder + 1
-			} else if (hasNext && nextOrder > prevOrder) {
-				newOrder = nextOrder
-				for (let i = targetIndex + 1; i < signers.length; i++) {
-					signers[i].signingOrder += 1
-				}
-			} else if (hasNext && nextOrder === prevOrder) {
-				newOrder = prevOrder
-			} else {
-				newOrder = prevOrder
-			}
-
-			signers[targetIndex].signingOrder = newOrder
-
-			this.normalizeSigningOrders(signers)
-		},
-		normalizeSigningOrders(signers) {
-			if (signers.length === 0) {
-				return
-			}
-
-			const firstOrder = signers[0].signingOrder
-
-			if (firstOrder > 1) {
-				const diff = firstOrder - 1
-				for (let i = 0; i < signers.length; i++) {
-					signers[i].signingOrder -= diff
-				}
-			} else if (firstOrder < 1) {
-				const diff = 1 - firstOrder
-				for (let i = 0; i < signers.length; i++) {
-					signers[i].signingOrder += diff
-				}
-			}
-
-			for (let i = 0; i < signers.length - 1; i++) {
-				const current = signers[i].signingOrder
-				const next = signers[i + 1].signingOrder
-				const expectedNext = current + 1
-
-				if (next > expectedNext) {
-					const gap = next - expectedNext
-					for (let j = i + 1; j < signers.length; j++) {
-						signers[j].signingOrder -= gap
-					}
-				}
-			}
-		},
-	},
-}
diff --git a/src/tests/composables/useIsTouchDevice.spec.ts b/src/tests/composables/useIsTouchDevice.spec.ts
index abdda1d39c..af1b29174c 100644
--- a/src/tests/composables/useIsTouchDevice.spec.ts
+++ b/src/tests/composables/useIsTouchDevice.spec.ts
@@ -19,4 +19,10 @@ describe('useIsTouchDevice composable', () => {
 
 		expect(isTouchDevice.value).toBe(expected)
 	})
+
+	it('keeps the same value across repeated reads', () => {
+		const { isTouchDevice } = useIsTouchDevice()
+
+		expect(isTouchDevice.value).toBe(isTouchDevice.value)
+	})
 })
diff --git a/src/tests/composables/useSigningOrder.spec.ts b/src/tests/composables/useSigningOrder.spec.ts
index 95bcf312e6..31bc199b2d 100644
--- a/src/tests/composables/useSigningOrder.spec.ts
+++ b/src/tests/composables/useSigningOrder.spec.ts
@@ -23,14 +23,121 @@ describe('useSigningOrder composable', () => {
 			recalculateSigningOrders(signers, 0)
 			expect(signers[0].signingOrder).toBe(1)
 		})
+
+		it('increments following signers when inserting at start', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 0 },
+				{ signingOrder: 1 },
+				{ signingOrder: 2 },
+			]
+
+			recalculateSigningOrders(signers, 0)
+
+			expect(signers[0].signingOrder).toBe(1)
+			expect(signers[1].signingOrder).toBe(2)
+			expect(signers[2].signingOrder).toBe(3)
+		})
+
+		it('assigns next order when adding at end', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 1 },
+				{ signingOrder: 2 },
+			]
+
+			recalculateSigningOrders(signers, 1)
+
+			expect(signers[1].signingOrder).toBe(2)
+		})
+
+		it('handles reordering with original orders when moving forward', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 1 },
+				{ signingOrder: 2 },
+				{ signingOrder: 3 },
+			]
+
+			recalculateSigningOrders(signers, 2, [1, 2, 3], 0)
+
+			expect(signers[2].signingOrder).toBeGreaterThanOrEqual(1)
+		})
+
+		it('handles reordering with original orders when moving backward', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 1 },
+				{ signingOrder: 2 },
+				{ signingOrder: 3 },
+			]
+
+			recalculateSigningOrders(signers, 1, [1, 2, 3], 2)
+
+			expect(signers[1].signingOrder).toBeGreaterThanOrEqual(1)
+		})
+
+		it('handles equal previous and next orders', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 1 },
+				{ signingOrder: 1 },
+				{ signingOrder: 1 },
+			]
+
+			recalculateSigningOrders(signers, 1)
+
+			expect(signers[1].signingOrder).toBeGreaterThanOrEqual(1)
+		})
+
+		it('handles descending orders', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 3 },
+				{ signingOrder: 2 },
+				{ signingOrder: 1 },
+			]
+
+			recalculateSigningOrders(signers, 1)
+
+			expect(signers[1].signingOrder).toBeGreaterThanOrEqual(1)
+		})
 	})
 
 	describe('normalizeSigningOrders', () => {
+		it('handles empty signers array', () => {
+			const signers: Signer[] = []
+
+			normalizeSigningOrders(signers)
+
+			expect(signers).toEqual([])
+		})
+
 		it('normalizes to start at 1', () => {
 			const signers: Signer[] = [{ signingOrder: 5 }, { signingOrder: 6 }]
 			normalizeSigningOrders(signers)
 			expect(signers[0].signingOrder).toBe(1)
 			expect(signers[1].signingOrder).toBe(2)
 		})
+
+		it('handles negative orders', () => {
+			const signers: Signer[] = [
+				{ signingOrder: -1 },
+				{ signingOrder: 0 },
+			]
+
+			normalizeSigningOrders(signers)
+
+			expect(signers[0].signingOrder).toBe(1)
+			expect(signers[1].signingOrder).toBe(2)
+		})
+
+		it('closes gaps in the sequence', () => {
+			const signers: Signer[] = [
+				{ signingOrder: 1 },
+				{ signingOrder: 5 },
+				{ signingOrder: 10 },
+			]
+
+			normalizeSigningOrders(signers)
+
+			expect(signers[0].signingOrder).toBe(1)
+			expect(signers[1].signingOrder).toBe(2)
+			expect(signers[2].signingOrder).toBe(3)
+		})
 	})
 })
diff --git a/src/tests/mixins/isTouchDevice.spec.ts b/src/tests/mixins/isTouchDevice.spec.ts
deleted file mode 100644
index e90239e484..0000000000
--- a/src/tests/mixins/isTouchDevice.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2026 LibreCode coop and LibreCode contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
-import isTouchDevice from '../../mixins/isTouchDevice.js'
-
-describe('isTouchDevice Mixin', () => {
-	const TestComponent = {
-		mixins: [isTouchDevice],
-		template: '<div>{{ isTouchDevice }}</div>',
-	}
-
-	let wrapper: ReturnType<typeof mount> | null
-
-	beforeEach(() => {
-		wrapper = null
-	})
-
-	afterEach(() => {
-		if (wrapper) {
-		}
-	})
-
-	describe('RULE: isTouchDevice detects touch capabilities', () => {
-		it('provides isTouchDevice as computed property', () => {
-			wrapper = mount(TestComponent)
-
-			expect(wrapper.vm.isTouchDevice).toBeDefined()
-			expect(typeof wrapper.vm.isTouchDevice).toBe('boolean')
-		})
-
-		it('returns true when environment supports touch (ontouchstart exists)', () => {
-			wrapper = mount(TestComponent)
-
-			// Verify the logic: should be true if either ontouchstart or maxTouchPoints exists
-			const hasTouchStart = 'ontouchstart' in window
-			const hasMaxTouchPoints = navigator.maxTouchPoints > 0
-			const expectedValue = hasTouchStart || hasMaxTouchPoints
-
-			expect(wrapper.vm.isTouchDevice).toBe(expectedValue)
-		})
-
-		it('correctly evaluates touch detection logic', () => {
-			wrapper = mount(TestComponent)
-
-			// Test the actual mixin logic
-			const result = wrapper.vm.isTouchDevice
-			const expected = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0)
-
-			expect(result).toBe(expected)
-		})
-
-		it('maintains same value on multiple accesses', () => {
-			wrapper = mount(TestComponent)
-
-			const firstAccess = wrapper.vm.isTouchDevice
-			const secondAccess = wrapper.vm.isTouchDevice
-
-			expect(firstAccess).toBe(secondAccess)
-		})
-
-		it('is a reactive computed property', () => {
-			wrapper = mount(TestComponent)
-
-			// computed properties in Vue are reactive
-			expect(wrapper.vm.$options.computed).toBeDefined()
-			expect(wrapper.vm.$options.computed.isTouchDevice).toBeDefined()
-		})
-	})
-})
diff --git a/src/tests/mixins/signingOrderMixin.spec.ts b/src/tests/mixins/signingOrderMixin.spec.ts
deleted file mode 100644
index f461d04014..0000000000
--- a/src/tests/mixins/signingOrderMixin.spec.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2026 LibreSign contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { describe, expect, it } from 'vitest'
-import signingOrderMixin from '../../mixins/signingOrderMixin.js'
-
-type Signer = { signingOrder: number }
-type RecalculateFn = (
-	signers: Signer[],
-	targetIndex: number,
-	originalOrders?: number[] | null,
-	oldIndex?: number | null
-) => void
-type NormalizeFn = (signers: Signer[]) => void
-
-// Create an object with the mixin methods to preserve 'this' context
-const mixinInstance = {
-	...signingOrderMixin.methods,
-}
-
-const recalculateSigningOrders = mixinInstance.recalculateSigningOrders.bind(mixinInstance) as RecalculateFn
-const normalizeSigningOrders = mixinInstance.normalizeSigningOrders.bind(mixinInstance) as NormalizeFn
-
-describe('signingOrderMixin', () => {
-	describe('recalculateSigningOrders', () => {
-		it('handles empty signers array', () => {
-			const signers: Signer[] = []
-
-			recalculateSigningOrders(signers, 0)
-
-			expect(signers).toEqual([])
-		})
-
-		it('assigns order 1 to first signer', () => {
-			const signers: Signer[] = [{ signingOrder: 0 }]
-
-			recalculateSigningOrders(signers, 0)
-
-			expect(signers[0].signingOrder).toBe(1)
-		})
-
-		it('increments following signers when inserting at start', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 0 },
-				{ signingOrder: 1 },
-				{ signingOrder: 2 },
-			]
-
-			recalculateSigningOrders(signers, 0)
-
-			expect(signers[0].signingOrder).toBe(1)
-			expect(signers[1].signingOrder).toBe(2)
-			expect(signers[2].signingOrder).toBe(3)
-		})
-
-		it('assigns next order when adding at end', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 1 },
-				{ signingOrder: 2 },
-			]
-
-			recalculateSigningOrders(signers, 1)
-
-			expect(signers[1].signingOrder).toBe(2)
-		})
-
-		it('handles reordering with originalOrders - moving forward', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 1 },
-				{ signingOrder: 2 },
-				{ signingOrder: 3 },
-			]
-			const originalOrders = [1, 2, 3]
-
-			recalculateSigningOrders(signers, 2, originalOrders, 0)
-
-			expect(signers[2].signingOrder).toBeGreaterThanOrEqual(1)
-		})
-
-		it('handles reordering with originalOrders - moving backward', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 1 },
-				{ signingOrder: 2 },
-				{ signingOrder: 3 },
-			]
-			const originalOrders = [1, 2, 3]
-
-			recalculateSigningOrders(signers, 1, originalOrders, 2)
-
-			expect(signers[1].signingOrder).toBeGreaterThanOrEqual(1)
-		})
-
-		it('handles equal prev and next orders', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 1 },
-				{ signingOrder: 1 },
-				{ signingOrder: 1 },
-			]
-
-			recalculateSigningOrders(signers, 1)
-
-			expect(signers[1].signingOrder).toBeGreaterThanOrEqual(1)
-		})
-
-		it('handles descending orders', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 3 },
-				{ signingOrder: 2 },
-				{ signingOrder: 1 },
-			]
-
-			recalculateSigningOrders(signers, 1)
-
-			expect(signers[1].signingOrder).toBeGreaterThanOrEqual(1)
-		})
-	})
-
-	describe('normalizeSigningOrders', () => {
-		it('handles empty signers array', () => {
-			const signers: Signer[] = []
-
-			normalizeSigningOrders(signers)
-
-			expect(signers).toEqual([])
-		})
-
-		it('normalizes to start at 1', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 5 },
-				{ signingOrder: 6 },
-			]
-
-			normalizeSigningOrders(signers)
-
-			expect(signers[0].signingOrder).toBe(1)
-			expect(signers[1].signingOrder).toBe(2)
-		})
-
-		it('handles negative orders', () => {
-			const signers: Signer[] = [
-				{ signingOrder: -1 },
-				{ signingOrder: 0 },
-			]
-
-			normalizeSigningOrders(signers)
-
-			expect(signers[0].signingOrder).toBe(1)
-			expect(signers[1].signingOrder).toBe(2)
-		})
-
-		it('closes gaps in sequence', () => {
-			const signers: Signer[] = [
-				{ signingOrder: 1 },
-				{ signingOrder: 5 },
-				{ signingOrder: 10 },
-			]
-
-			normalizeSigningOrders(signers)
-
-			expect(signers[0].signingOrder).toBe(1)
-			expect(signers[1].signingOrder).toBe(2)
-			expect(signers[2].signingOrder).toBe(3)
-		})
-	})
-})
diff --git a/src/tests/mocks/pdf-elements/src/components/PDFElements.vue b/src/tests/mocks/pdf-elements/src/components/PDFElements.vue
index e2aa104938..f295fecf59 100644
--- a/src/tests/mocks/pdf-elements/src/components/PDFElements.vue
+++ b/src/tests/mocks/pdf-elements/src/components/PDFElements.vue
@@ -7,8 +7,8 @@
 	<div class="pdf-elements-mock"></div>
 </template>
 
-<script>
-export default {
-	name: 'PDFElements',
-}
+<script setup>
+defineOptions({
+  name: 'PDFElements',
+})
 </script>
diff --git a/src/tests/views/Documents/IdDocsValidation.spec.ts b/src/tests/views/Documents/IdDocsValidation.spec.ts
new file mode 100644
index 0000000000..baf597fd52
--- /dev/null
+++ b/src/tests/views/Documents/IdDocsValidation.spec.ts
@@ -0,0 +1,292 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+import IdDocsValidation from '../../../views/Documents/IdDocsValidation.vue'
+import { FILE_STATUS } from '../../../constants.js'
+
+const axiosGetMock = vi.fn()
+const axiosDeleteMock = vi.fn()
+const showErrorMock = vi.fn()
+const openDocumentMock = vi.fn()
+const routerPushMock = vi.fn()
+const userConfigUpdateMock = vi.fn()
+
+const userConfigStore = {
+	id_docs_filters: {
+		owner: '',
+		status: null,
+	},
+	id_docs_sort: {
+		sortBy: 'owner',
+		sortOrder: 'DESC',
+	},
+	update: vi.fn((...args: unknown[]) => userConfigUpdateMock(...args)),
+}
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string) => text),
+}))
+
+vi.mock('@nextcloud/axios', () => ({
+	default: {
+		get: vi.fn((...args: unknown[]) => axiosGetMock(...args)),
+		delete: vi.fn((...args: unknown[]) => axiosDeleteMock(...args)),
+	},
+}))
+
+vi.mock('@nextcloud/dialogs', () => ({
+	showError: vi.fn((...args: unknown[]) => showErrorMock(...args)),
+}))
+
+vi.mock('@nextcloud/router', () => ({
+	generateOcsUrl: vi.fn((path: string, params?: Record<string, string | number>) => {
+		let resolvedPath = path
+		for (const [key, value] of Object.entries(params || {})) {
+			resolvedPath = resolvedPath.replace(`{${key}}`, String(value))
+		}
+		return `/ocs/v2.php${resolvedPath}`
+	}),
+}))
+
+vi.mock('vue-router', () => ({
+	useRouter: vi.fn(() => ({
+		push: routerPushMock,
+	})),
+}))
+
+vi.mock('../../../store/userconfig.js', () => ({
+	useUserConfigStore: vi.fn(() => userConfigStore),
+}))
+
+vi.mock('../../../utils/viewer.js', () => ({
+	openDocument: vi.fn((...args: unknown[]) => openDocumentMock(...args)),
+}))
+
+vi.mock('@nextcloud/vue/components/NcActions', () => ({
+	default: { name: 'NcActions', template: '<div class="nc-actions-stub"><slot /><slot name="icon" /></div>' },
+}))
+
+vi.mock('@nextcloud/vue/components/NcActionButton', () => ({
+	default: {
+		name: 'NcActionButton',
+		emits: ['click', 'update:modelValue'],
+		template: '<button class="nc-action-button-stub" @click="$emit(\'click\')"><slot /><slot name="icon" /></button>',
+	},
+}))
+
+vi.mock('@nextcloud/vue/components/NcActionInput', () => ({
+	default: {
+		name: 'NcActionInput',
+		props: ['modelValue', 'label'],
+		emits: ['update:modelValue'],
+		template: '<input class="nc-action-input-stub" />',
+	},
+}))
+
+vi.mock('@nextcloud/vue/components/NcActionSeparator', () => ({
+	default: { name: 'NcActionSeparator', template: '<hr class="nc-action-separator-stub" />' },
+}))
+
+vi.mock('@nextcloud/vue/components/NcAvatar', () => ({
+	default: { name: 'NcAvatar', template: '<div class="nc-avatar-stub" />' },
+}))
+
+vi.mock('@nextcloud/vue/components/NcEmptyContent', () => ({
+	default: { name: 'NcEmptyContent', template: '<div class="nc-empty-content-stub"><slot /><slot name="icon" /></div>' },
+}))
+
+vi.mock('@nextcloud/vue/components/NcLoadingIcon', () => ({
+	default: { name: 'NcLoadingIcon', template: '<span class="nc-loading-icon-stub" />' },
+}))
+
+vi.mock('@nextcloud/vue/components/NcIconSvgWrapper', () => ({
+	default: { name: 'NcIconSvgWrapper', template: '<i class="nc-icon-stub" />' },
+}))
+
+describe('IdDocsValidation.vue', () => {
+	const signedDoc = {
+		uuid: 'doc-1',
+		account: {
+			userId: 'alice',
+			displayName: 'Alice',
+		},
+		file_type: {
+			type: 'passport',
+			name: 'Passport',
+		},
+		file: {
+			uuid: 'file-1',
+			status: FILE_STATUS.SIGNED,
+			statusText: 'Signed',
+			name: 'alice-passport.pdf',
+			file: {
+				nodeId: 10,
+				url: '/files/alice-passport.pdf',
+			},
+			signers: [{ uid: 'approver', displayName: 'Approver', sign_date: '2026-03-06T12:00:00Z' }],
+		},
+	}
+
+	const pendingDoc = {
+		uuid: 'doc-2',
+		account: {
+			userId: 'bob',
+			displayName: 'Bob',
+		},
+		file_type: {
+			type: 'driver-license',
+			name: 'Driver License',
+		},
+		file: {
+			uuid: 'file-2',
+			status: FILE_STATUS.ABLE_TO_SIGN,
+			statusText: 'Pending',
+			name: 'bob-license.pdf',
+			file: {
+				nodeId: 11,
+				url: '/files/bob-license.pdf',
+			},
+			signers: [],
+		},
+	}
+
+	const createWrapper = () => mount(IdDocsValidation)
+
+	beforeEach(() => {
+		axiosGetMock.mockReset()
+		axiosDeleteMock.mockReset()
+		showErrorMock.mockReset()
+		openDocumentMock.mockReset()
+		routerPushMock.mockReset()
+		userConfigUpdateMock.mockReset()
+		userConfigStore.update.mockClear()
+		userConfigStore.id_docs_filters = { owner: '', status: null }
+		userConfigStore.id_docs_sort = { sortBy: 'owner', sortOrder: 'DESC' }
+
+		axiosGetMock.mockResolvedValue({
+			data: {
+				ocs: {
+					data: {
+						data: [signedDoc, pendingDoc],
+						total: 2,
+					},
+				},
+			},
+		})
+
+		axiosDeleteMock.mockResolvedValue({
+			data: {
+				ocs: {
+					data: {
+						success: true,
+					},
+				},
+			},
+		})
+	})
+
+	it('loads documents on mount using saved sort', async () => {
+		const wrapper = createWrapper()
+		await flushPromises()
+
+		expect(axiosGetMock).toHaveBeenCalledWith('/ocs/v2.php/apps/libresign/api/v1/id-docs/approval/list', {
+			params: {
+				page: 1,
+				length: 50,
+				sortBy: 'owner',
+				sortOrder: 'DESC',
+			},
+		})
+		expect(wrapper.vm.documentList).toHaveLength(2)
+		expect(wrapper.vm.hasMore).toBe(false)
+	})
+
+	it('filters by owner and status and persists filter changes', async () => {
+		vi.useFakeTimers()
+		const wrapper = createWrapper()
+		await flushPromises()
+
+		wrapper.vm.filters.owner = 'bob'
+		wrapper.vm.setStatusFilter('pending', true)
+		vi.runAllTimers()
+		await flushPromises()
+
+		expect(wrapper.vm.hasActiveFilters).toBe(true)
+		expect(wrapper.vm.activeFilterCount).toBe(2)
+		expect(wrapper.vm.filteredDocuments).toEqual([pendingDoc])
+		expect(userConfigUpdateMock).toHaveBeenCalledWith('id_docs_filters', {
+			owner: 'bob',
+			status: {
+				value: 'pending',
+				label: 'Pending',
+			},
+		})
+
+		vi.useRealTimers()
+	})
+
+	it('toggles sort direction and then clears the sort for the same column', async () => {
+		const wrapper = createWrapper()
+		await flushPromises()
+
+		await wrapper.vm.sortColumn('owner')
+		expect(wrapper.vm.sortOrder).toBe('ASC')
+
+		await wrapper.vm.sortColumn('owner')
+		expect(wrapper.vm.sortBy).toBeNull()
+		expect(wrapper.vm.sortOrder).toBeNull()
+		expect(userConfigUpdateMock).toHaveBeenCalledWith('id_docs_sort', {
+			sortBy: null,
+			sortOrder: null,
+		})
+	})
+
+	it('routes to approve and validation pages using document uuid', async () => {
+		const wrapper = createWrapper()
+		await flushPromises()
+
+		wrapper.vm.openApprove(pendingDoc)
+		wrapper.vm.openValidationURL(signedDoc)
+
+		expect(routerPushMock).toHaveBeenNthCalledWith(1, {
+			name: 'IdDocsApprove',
+			params: { uuid: 'file-2' },
+			query: { idDocApproval: 'true' },
+		})
+		expect(routerPushMock).toHaveBeenNthCalledWith(2, {
+			name: 'ValidationFile',
+			params: { uuid: 'file-1' },
+		})
+	})
+
+	it('opens the file in the viewer and reports missing urls', async () => {
+		const wrapper = createWrapper()
+		await flushPromises()
+
+		wrapper.vm.openFile(signedDoc)
+		wrapper.vm.openFile({ file: { file: { nodeId: 12 }, name: 'missing.pdf' } })
+
+		expect(openDocumentMock).toHaveBeenCalledWith({
+			fileUrl: '/files/alice-passport.pdf',
+			filename: 'alice-passport.pdf',
+			nodeId: 10,
+		})
+		expect(showErrorMock).toHaveBeenCalledWith('File not found')
+	})
+
+	it('deletes a document and reloads the list', async () => {
+		const wrapper = createWrapper()
+		await flushPromises()
+
+		await wrapper.vm.deleteDocument(signedDoc)
+		await flushPromises()
+
+		expect(axiosDeleteMock).toHaveBeenCalledWith('/ocs/v2.php/apps/libresign/api/v1/id-docs/10')
+		expect(axiosGetMock).toHaveBeenCalledTimes(2)
+	})
+})
\ No newline at end of file
diff --git a/src/tests/views/FilesList/FileEntry.spec.ts b/src/tests/views/FilesList/FileEntry.spec.ts
index dc3fd9def9..66178a8708 100644
--- a/src/tests/views/FilesList/FileEntry.spec.ts
+++ b/src/tests/views/FilesList/FileEntry.spec.ts
@@ -9,6 +9,7 @@ import { setActivePinia, createPinia } from 'pinia'
 import FileEntry from '../../../views/FilesList/FileEntry/FileEntry.vue'
 import { useFilesStore } from '../../../store/files.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useSidebarStore } from '../../../store/sidebar.js'
 import type { TranslationFunction } from '../../test-types'
 
 type FileEntrySource = {
@@ -18,6 +19,9 @@ type FileEntrySource = {
 	statusText: string
 	signers: unknown[]
 	created_at: number
+	metadata?: {
+		extension?: string
+	}
 }
 
 const t: TranslationFunction = (_app, text) => text
@@ -91,39 +95,33 @@ vi.mock('../../../views/FilesList/FileEntry/FileEntrySigners.vue', () => ({
 	},
 }))
 
-vi.mock('../../../views/FilesList/FileEntry/FileEntryMixin.js', () => ({
-	default: {
-		computed: {
-			fileExtension() {
-				return 'pdf'
-			},
-			mtime(this: { source?: FileEntrySource }): number {
-				return this.source?.created_at ?? Date.now()
-			},
-			mtimeOpacity() {
-				return {}
-			},
+describe('FileEntry.vue - Individual File Entry', () => {
+	const source: FileEntrySource = {
+		id: 1,
+		name: 'test.pdf',
+		status: 1,
+		statusText: 'Ready',
+		signers: [],
+		created_at: Date.now(),
+		metadata: {
+			extension: 'pdf',
 		},
-		data() {
-			const source: FileEntrySource = {
-				id: 1,
-				name: 'test.pdf',
-				status: 1,
-				statusText: 'Ready',
-				signers: [],
-				created_at: Date.now(),
-			}
-
-			return {
+	}
+
+	function createWrapper() {
+		return mount(FileEntry, {
+			props: {
 				source,
 				loading: false,
-				openedMenu: false,
-			}
-		},
-	},
-}))
+			},
+			global: {
+				mocks: {
+					t,
+				},
+			},
+		})
+	}
 
-describe('FileEntry.vue - Individual File Entry', () => {
 	beforeEach(() => {
 		setActivePinia(createPinia())
 	})
@@ -133,53 +131,25 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('renders file entry row', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.find('tr.files-list__row').exists()).toBe(true)
 	})
 
 	it('initializes renaming state as false', () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.vm.isRenaming).toBe(false)
 	})
 
 	it('initializes renaming saving state as false', () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.vm.renamingSaving).toBe(false)
 	})
 
 	it('renames file on rename event', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		await wrapper.vm.onRename('newname.pdf')
@@ -187,14 +157,7 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('clears renaming saving flag after rename', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		wrapper.vm.renamingSaving = true
@@ -203,29 +166,15 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('starts rename on file', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		wrapper.vm.onStartRename()
-		expect(wrapper.vm.$refs.name).toBeDefined()
+		expect(wrapper.vm.name).toBeDefined()
 	})
 
 	it('tracks file renaming state', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		expect(wrapper.vm.isRenaming).toBe(false)
@@ -237,14 +186,7 @@ describe('FileEntry.vue - Individual File Entry', () => {
 
 	it('uses files store for file operations', async () => {
 		const store = useFilesStore()
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		expect(wrapper.vm.filesStore).toBe(store)
@@ -252,93 +194,44 @@ describe('FileEntry.vue - Individual File Entry', () => {
 
 	it('uses actions menu store for menu state', async () => {
 		const store = useActionsMenuStore()
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		expect(wrapper.vm.actionsMenuStore).toBe(store)
 	})
 
 	it('renders file entry checkbox', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.findComponent({ name: 'FileEntryCheckbox' }).exists()).toBe(true)
 	})
 
 	it('renders file entry name', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.findComponent({ name: 'FileEntryName' }).exists()).toBe(true)
 	})
 
 	it('renders file entry actions', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.findComponent({ name: 'FileEntryActions' }).exists()).toBe(true)
 	})
 
 	it('renders file entry status', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.findComponent({ name: 'FileEntryStatus' }).exists()).toBe(true)
 	})
 
 	it('renders file entry signers', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.findComponent({ name: 'FileEntrySigners' }).exists()).toBe(true)
 	})
 
 	it('passes signersCount to FileEntrySigners', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		const signersComponent = wrapper.findComponent({ name: 'FileEntrySigners' })
@@ -347,14 +240,7 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('passes signers array to FileEntrySigners', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		const signersComponent = wrapper.findComponent({ name: 'FileEntrySigners' })
@@ -363,41 +249,20 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('renders row signers cell with click handler', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		const signersCell = wrapper.find('.files-list__row-signers')
 		expect(signersCell.exists()).toBe(true)
 	})
 
 	it('renders file modification time', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		expect(wrapper.findComponent({ name: 'NcDateTime' }).exists()).toBe(true)
 	})
 
 	it('passes source to child components', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		expect(wrapper.vm.filesStore).toBeDefined()
@@ -405,32 +270,34 @@ describe('FileEntry.vue - Individual File Entry', () => {
 
 	it('shows success message after rename', async () => {
 		const { showSuccess } = await import('@nextcloud/dialogs')
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		await wrapper.vm.onRename('newname.pdf')
 		expect(showSuccess).toHaveBeenCalled()
 	})
 
+	it('opens details through the sidebar store', async () => {
+		const sidebarStore = useSidebarStore()
+		const selectFileSpy = vi.spyOn(useFilesStore(), 'selectFile')
+		const activeRequestSignatureTabSpy = vi.spyOn(sidebarStore, 'activeRequestSignatureTab')
+		const wrapper = createWrapper()
+		const event = {
+			preventDefault: vi.fn(),
+			stopPropagation: vi.fn(),
+		} as unknown as Event
+
+		wrapper.vm.openDetailsIfAvailable(event)
+
+		expect(selectFileSpy).toHaveBeenCalledWith(1)
+		expect(activeRequestSignatureTabSpy).toHaveBeenCalled()
+	})
+
 	it('restores file name on rename failure', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
-		vi.spyOn(wrapper.vm.$refs.actions, 'doRename').mockRejectedValueOnce(new Error('Rename failed'))
+		vi.spyOn(wrapper.vm.actions, 'doRename').mockRejectedValueOnce(new Error('Rename failed'))
 		try {
 			await wrapper.vm.onRename('newname.pdf')
 		} catch (e) {}
@@ -438,15 +305,7 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('handles right click on row', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-					onRightClick: vi.fn(),
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		await wrapper.vm.$nextTick()
 		const row = wrapper.find('.files-list__row')
@@ -454,42 +313,21 @@ describe('FileEntry.vue - Individual File Entry', () => {
 	})
 
 	it('renders row name cell with click handler', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		const nameCell = wrapper.find('.files-list__row-name')
 		expect(nameCell.exists()).toBe(true)
 	})
 
 	it('renders row status cell with click handler', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		const statusCell = wrapper.find('.files-list__row-status')
 		expect(statusCell.exists()).toBe(true)
 	})
 
 	it('renders row mtime cell', async () => {
-		const wrapper = mount(FileEntry, {
-			props: {},
-			global: {
-				mocks: {
-					t,
-				},
-			},
-		})
+		const wrapper = createWrapper()
 
 		const mtimeCell = wrapper.find('.files-list__row-mtime')
 		expect(mtimeCell.exists()).toBe(true)
diff --git a/src/tests/views/FilesList/FileEntryGrid.spec.ts b/src/tests/views/FilesList/FileEntryGrid.spec.ts
index 6e76d51f30..eb2c6dbb3e 100644
--- a/src/tests/views/FilesList/FileEntryGrid.spec.ts
+++ b/src/tests/views/FilesList/FileEntryGrid.spec.ts
@@ -5,6 +5,7 @@
 
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
 
 import FileEntryGrid from '../../../views/FilesList/FileEntry/FileEntryGrid.vue'
 
@@ -14,6 +15,11 @@ const actionsMenuStoreMock = {
 
 const filesStoreMock = {
 	loading: true,
+	selectFile: vi.fn(),
+}
+
+const sidebarStoreMock = {
+	activeRequestSignatureTab: vi.fn(),
 }
 
 vi.mock('@nextcloud/vue/components/NcDateTime', () => ({
@@ -72,42 +78,6 @@ vi.mock('../../../views/FilesList/FileEntry/FileEntryStatus.vue', () => ({
 	},
 }))
 
-vi.mock('../../../views/FilesList/FileEntry/FileEntryMixin.js', () => ({
-	default: {
-		props: {
-			source: {
-				type: Object,
-				required: true,
-			},
-			loading: {
-				type: Boolean,
-				required: true,
-			},
-		},
-		computed: {
-			fileExtension() {
-				return '.pdf'
-			},
-			mtime() {
-				return new Date('2026-03-06T10:00:00Z')
-			},
-			mtimeOpacity() {
-				return { color: 'red' }
-			},
-			openedMenu: {
-				get() {
-					return false
-				},
-				set() {},
-			},
-		},
-		methods: {
-			onRightClick: vi.fn(),
-			openDetailsIfAvailable: vi.fn(),
-		},
-	},
-}))
-
 vi.mock('../../../store/actionsmenu.js', () => ({
 	useActionsMenuStore: vi.fn(() => actionsMenuStoreMock),
 }))
@@ -116,10 +86,17 @@ vi.mock('../../../store/files.js', () => ({
 	useFilesStore: vi.fn(() => filesStoreMock),
 }))
 
+vi.mock('../../../store/sidebar.js', () => ({
+	useSidebarStore: vi.fn(() => sidebarStoreMock),
+}))
+
 describe('FileEntryGrid.vue', () => {
 	beforeEach(() => {
+		setActivePinia(createPinia())
 		actionsMenuStoreMock.opened = null
 		filesStoreMock.loading = true
+		filesStoreMock.selectFile.mockReset()
+		sidebarStoreMock.activeRequestSignatureTab.mockReset()
 	})
 
 	function createWrapper() {
@@ -160,4 +137,17 @@ describe('FileEntryGrid.vue', () => {
 		expect(checkbox.props('isLoading')).toBe(true)
 		expect(checkbox.props('source')).toMatchObject({ id: 7 })
 	})
+
+	it('opens the details sidebar for the selected file', () => {
+		const wrapper = createWrapper()
+		const event = {
+			preventDefault: vi.fn(),
+			stopPropagation: vi.fn(),
+		} as unknown as Event
+
+		wrapper.vm.openDetailsIfAvailable(event)
+
+		expect(filesStoreMock.selectFile).toHaveBeenCalledWith(7)
+		expect(sidebarStoreMock.activeRequestSignatureTab).toHaveBeenCalled()
+	})
 })
diff --git a/src/views/Documents/IdDocsValidation.vue b/src/views/Documents/IdDocsValidation.vue
index dce6d2d207..8b574970f0 100644
--- a/src/views/Documents/IdDocsValidation.vue
+++ b/src/views/Documents/IdDocsValidation.vue
@@ -169,8 +169,22 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+	mdiAccount,
+	mdiCheckCircle,
+	mdiClockAlert,
+	mdiClose,
+	mdiDelete,
+	mdiEye,
+	mdiFileDocument,
+	mdiFileDocumentOutline,
+	mdiFilter,
+	mdiPencil,
+} from '@mdi/js'
 
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
@@ -188,277 +202,286 @@ import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+type SortOrder = 'ASC' | 'DESC' | null
 
-import {
-	mdiAccount,
-	mdiCheckCircle,
-	mdiClockAlert,
-	mdiClose,
-	mdiDelete,
-	mdiEye,
-	mdiFileDocument,
-	mdiFileDocumentOutline,
-	mdiFilter,
-	mdiPencil,
-} from '@mdi/js'
+type StatusOption = {
+	value: 'signed' | 'pending'
+	label: string
+}
+
+type IdDocEntry = Record<string, any>
 
-export default {
+defineOptions({
 	name: 'IdDocsValidation',
-	components: {
-		NcActions,
-		NcActionButton,
-		NcActionInput,
-		NcActionSeparator,
-		NcAvatar,
-		NcEmptyContent,
-		NcIconSvgWrapper,
-		NcLoadingIcon,
-	},
-	setup() {
-		return {
-			mdiAccount,
-			mdiCheckCircle,
-			mdiClockAlert,
-			mdiClose,
-			mdiDelete,
-			mdiEye,
-			mdiFileDocument,
-			mdiFileDocumentOutline,
-			mdiFilter,
-			mdiPencil,
+})
+
+const router = useRouter()
+const userConfigStore = useUserConfigStore()
+const scrollContainer = ref<HTMLElement | null>(null)
+const documentList = ref<IdDocEntry[]>([])
+const loading = ref(true)
+const loadingMore = ref(false)
+const page = ref(1)
+const length = ref(50)
+const total = ref(0)
+const hasMore = ref(true)
+const sortBy = ref<string | null>(userConfigStore.id_docs_sort?.sortBy || null)
+const sortOrder = ref<SortOrder>(userConfigStore.id_docs_sort?.sortOrder || null)
+const filters = reactive({
+	owner: userConfigStore.id_docs_filters?.owner || '',
+	status: userConfigStore.id_docs_filters?.status || null as StatusOption | null,
+})
+const statusOptions: StatusOption[] = [
+	{ value: 'signed', label: t('libresign', 'Signed') },
+	{ value: 'pending', label: t('libresign', 'Pending') },
+]
+
+const hasActiveFilters = computed(() => !!(filters.owner || filters.status))
+const activeFilterCount = computed(() => {
+	let count = 0
+	if (filters.owner) count++
+	if (filters.status) count++
+	return count
+})
+const filteredDocuments = computed(() => {
+	let docs = [...documentList.value]
+
+	if (filters.owner) {
+		const ownerLower = filters.owner.toLowerCase()
+		docs = docs.filter(doc => {
+			const displayName = doc.account?.displayName || doc.account?.userId || ''
+			return displayName.toLowerCase().includes(ownerLower)
+		})
+	}
+
+	if (filters.status?.value === 'signed') {
+		docs = docs.filter(doc => doc.file?.status === FILE_STATUS.SIGNED)
+	} else if (filters.status?.value === 'pending') {
+		docs = docs.filter(doc => doc.file?.status !== FILE_STATUS.SIGNED)
+	}
+
+	return docs
+})
+
+let filterTimeout: ReturnType<typeof setTimeout> | undefined
+
+async function loadDocuments(append = false) {
+	if (!append) {
+		loading.value = true
+		page.value = 1
+		documentList.value = []
+	} else {
+		loadingMore.value = true
+	}
+
+	try {
+		const params: Record<string, any> = {
+			page: page.value,
+			length: length.value,
 		}
-	},
-	data() {
-		const userConfigStore = useUserConfigStore()
-
-		return {
-			FILE_STATUS,
-			userConfigStore,
-			documentList: [],
-			loading: true,
-			loadingMore: false,
-			page: 1,
-			length: 50,
-			total: 0,
-			hasMore: true,
-			sortBy: userConfigStore.id_docs_sort?.sortBy || null,
-			sortOrder: userConfigStore.id_docs_sort?.sortOrder || null,
-			filters: {
-				owner: userConfigStore.id_docs_filters?.owner || '',
-				status: userConfigStore.id_docs_filters?.status || null,
-			},
-			statusOptions: [
-				{ value: 'signed', label: 'Signed' },
-				{ value: 'pending', label: 'Pending' },
-			],
+
+		if (sortBy.value) {
+			params.sortBy = sortBy.value
+			params.sortOrder = sortOrder.value
 		}
-	},
-	computed: {
-		hasActiveFilters() {
-			return !!(this.filters.owner || this.filters.status)
-		},
-		activeFilterCount() {
-			let count = 0
-			if (this.filters.owner) count++
-			if (this.filters.status) count++
-			return count
-		},
-		filteredDocuments() {
-			let docs = [...this.documentList]
-
-			if (this.filters.owner) {
-				const ownerLower = this.filters.owner.toLowerCase()
-				docs = docs.filter(doc => {
-					const displayName = doc.account?.displayName || doc.account?.userId || ''
-					return displayName.toLowerCase().includes(ownerLower)
-				})
-			}
 
-			if (this.filters.status?.value === 'signed') {
-				docs = docs.filter(doc => doc.file?.status === FILE_STATUS.SIGNED)
-			} else if (this.filters.status?.value === 'pending') {
-				docs = docs.filter(doc => doc.file?.status !== FILE_STATUS.SIGNED)
-			}
+		const response = await axios.get(
+			generateOcsUrl('/apps/libresign/api/v1/id-docs/approval/list'),
+			{ params },
+		)
 
-			return docs
-		},
-	},
-	mounted() {
-		this.loadDocuments()
-	},
-	methods: {
-		t,
-		async loadDocuments(append = false) {
-			if (!append) {
-				this.loading = true
-				this.page = 1
-				this.documentList = []
-			} else {
-				this.loadingMore = true
-			}
+		const data = response.data.ocs.data as { data: IdDocEntry[]; total?: number }
 
-			try {
-				const params = {
-					page: this.page,
-					length: this.length,
-				}
+		if (append) {
+			documentList.value.push(...data.data)
+		} else {
+			documentList.value = data.data
+		}
 
-				if (this.sortBy) {
-					params.sortBy = this.sortBy
-					params.sortOrder = this.sortOrder
-				}
+		total.value = data.total || data.data.length
+		hasMore.value = documentList.value.length < total.value
+	} catch (error: any) {
+		showError(error.response?.data?.ocs?.data?.message || t('libresign', 'Failed to load documents'))
+	} finally {
+		loading.value = false
+		loadingMore.value = false
+	}
+}
 
-				const response = await axios.get(
-					generateOcsUrl('/apps/libresign/api/v1/id-docs/approval/list'),
-					{ params }
-				)
+function onScroll(event: Event) {
+	if (loadingMore.value || !hasMore.value) {
+		return
+	}
 
-				const data = response.data.ocs.data
+	const container = event.target as HTMLElement
+	const scrollPosition = container.scrollTop + container.clientHeight
+	const scrollHeight = container.scrollHeight
 
-				if (append) {
-					this.documentList.push(...data.data)
-				} else {
-					this.documentList = data.data
-				}
+	if (scrollPosition >= scrollHeight * 0.8) {
+		page.value++
+		loadDocuments(true)
+	}
+}
 
-				this.total = data.total || data.data.length
-				this.hasMore = this.documentList.length < this.total
-			} catch (error) {
-				showError(error.response?.data?.ocs?.data?.message || this.t('libresign', 'Failed to load documents'))
-			} finally {
-				this.loading = false
-				this.loadingMore = false
-			}
-		},
+function openApprove(doc: IdDocEntry) {
+	const uuid = doc.file?.uuid || doc.uuid
+	if (!uuid) {
+		showError(t('libresign', 'Document UUID not found'))
+		return
+	}
+	router.push({
+		name: 'IdDocsApprove',
+		params: { uuid },
+		query: { idDocApproval: 'true' },
+	})
+}
 
-		onScroll(event) {
-			if (this.loadingMore || !this.hasMore) {
-				return
-			}
+async function deleteDocument(doc: IdDocEntry) {
+	try {
+		await axios.delete(generateOcsUrl('/apps/libresign/api/v1/id-docs/{nodeId}', { nodeId: doc.file.file.nodeId }))
+		await loadDocuments()
+	} catch (error: any) {
+		showError(error.response?.data?.ocs?.data?.message || t('libresign', 'Failed to delete document'))
+	}
+}
 
-			const container = event.target
-			const scrollPosition = container.scrollTop + container.clientHeight
-			const scrollHeight = container.scrollHeight
+function openFile(doc: IdDocEntry) {
+	const fileUrl = doc.file?.file?.url
 
-			if (scrollPosition >= scrollHeight * 0.8) {
-				this.page++
-				this.loadDocuments(true)
-			}
-		},
+	if (!fileUrl) {
+		showError(t('libresign', 'File not found'))
+		return
+	}
 
-		openApprove(doc) {
-			const uuid = doc.file?.uuid || doc.uuid
-			if (!uuid) {
-				showError(this.t('libresign', 'Document UUID not found'))
-				return
-			}
-			this.$router.push({
-				name: 'IdDocsApprove',
-				params: { uuid },
-				query: { idDocApproval: 'true' },
-			})
-		},
-
-		async deleteDocument(doc) {
-			try {
-				await axios.delete(generateOcsUrl('/apps/libresign/api/v1/id-docs/{nodeId}', { nodeId: doc.file.file.nodeId }))
-				await this.loadDocuments()
-			} catch (error) {
-				showError(error.response?.data?.ocs?.data?.message || this.t('libresign', 'Failed to delete document'))
-			}
-		},
+	openDocument({
+		fileUrl,
+		filename: doc.file.name,
+		nodeId: doc.file.file.nodeId,
+	})
+}
 
-		openFile(doc) {
-			const fileUrl = doc.file?.file?.url
+function openValidationURL(doc: IdDocEntry) {
+	const uuid = doc.file?.uuid || doc.uuid
+	if (!uuid) {
+		showError(t('libresign', 'Document UUID not found'))
+		return
+	}
+	router.push({
+		name: 'ValidationFile',
+		params: { uuid },
+	})
+}
 
-			if (!fileUrl) {
-				showError(t('libresign', 'File not found'))
-				return
-			}
+function onFilterChange() {
+	clearTimeout(filterTimeout)
+	filterTimeout = setTimeout(() => {
+		saveFilters()
+	}, 500)
+}
 
-			openDocument({
-				fileUrl,
-				filename: doc.file.name,
-				nodeId: doc.file.file.nodeId,
-			})
-		},
-
-		openValidationURL(doc) {
-			const uuid = doc.file?.uuid || doc.uuid
-			if (!uuid) {
-				showError(this.t('libresign', 'Document UUID not found'))
-				return
-			}
-			this.$router.push({
-				name: 'ValidationFile',
-				params: { uuid },
-			})
-		},
-
-		onFilterChange() {
-			clearTimeout(this.filterTimeout)
-			this.filterTimeout = setTimeout(() => {
-				this.saveFilters()
-			}, 500)
-		},
-
-		async saveFilters() {
-			try {
-				const filters = {
-					owner: this.filters.owner,
-					status: this.filters.status,
-				}
-				await this.userConfigStore.update('id_docs_filters', filters)
-			} catch (error) {
-				console.error('Failed to save filters:', error)
-			}
-		},
-
-		clearFilters() {
-			this.filters.owner = ''
-			this.filters.status = null
-			this.saveFilters()
-		},
-
-		setStatusFilter(status, value) {
-			if (value) {
-				const option = this.statusOptions.find(opt => opt.value === status)
-				this.filters.status = option
-			} else {
-				this.filters.status = null
-			}
-			this.onFilterChange()
-		},
-
-		sortColumn(column) {
-			if (this.sortBy === column) {
-				if (this.sortOrder === 'DESC') {
-					this.sortOrder = 'ASC'
-				} else if (this.sortOrder === 'ASC') {
-					this.sortBy = null
-					this.sortOrder = null
-				}
-			} else {
-				this.sortBy = column
-				this.sortOrder = 'DESC'
-			}
-			this.saveSort()
-			this.loadDocuments()
-		},
-
-		async saveSort() {
-			try {
-				const sort = {
-					sortBy: this.sortBy,
-					sortOrder: this.sortOrder,
-				}
-				await this.userConfigStore.update('id_docs_sort', sort)
-			} catch (error) {
-				console.error('Failed to save sort:', error)
-			}
-		},
-	},
+async function saveFilters() {
+	try {
+		await userConfigStore.update('id_docs_filters', {
+			owner: filters.owner,
+			status: filters.status,
+		})
+	} catch (error) {
+		console.error('Failed to save filters:', error)
+	}
 }
+
+function clearFilters() {
+	filters.owner = ''
+	filters.status = null
+	saveFilters()
+}
+
+function setStatusFilter(status: StatusOption['value'], value: boolean) {
+	if (value) {
+		filters.status = statusOptions.find(option => option.value === status) || null
+	} else {
+		filters.status = null
+	}
+	onFilterChange()
+}
+
+function sortColumn(column: string) {
+	if (sortBy.value === column) {
+		if (sortOrder.value === 'DESC') {
+			sortOrder.value = 'ASC'
+		} else if (sortOrder.value === 'ASC') {
+			sortBy.value = null
+			sortOrder.value = null
+		}
+	} else {
+		sortBy.value = column
+		sortOrder.value = 'DESC'
+	}
+	saveSort()
+	loadDocuments()
+}
+
+async function saveSort() {
+	try {
+		await userConfigStore.update('id_docs_sort', {
+			sortBy: sortBy.value,
+			sortOrder: sortOrder.value,
+		})
+	} catch (error) {
+		console.error('Failed to save sort:', error)
+	}
+}
+
+onMounted(() => {
+	loadDocuments()
+})
+
+onBeforeUnmount(() => {
+	clearTimeout(filterTimeout)
+})
+
+defineExpose({
+	t,
+	FILE_STATUS,
+	userConfigStore,
+	scrollContainer,
+	documentList,
+	loading,
+	loadingMore,
+	page,
+	length,
+	total,
+	hasMore,
+	sortBy,
+	sortOrder,
+	filters,
+	statusOptions,
+	hasActiveFilters,
+	activeFilterCount,
+	filteredDocuments,
+	loadDocuments,
+	onScroll,
+	openApprove,
+	deleteDocument,
+	openFile,
+	openValidationURL,
+	onFilterChange,
+	saveFilters,
+	clearFilters,
+	setStatusFilter,
+	sortColumn,
+	saveSort,
+	mdiAccount,
+	mdiCheckCircle,
+	mdiClockAlert,
+	mdiClose,
+	mdiDelete,
+	mdiEye,
+	mdiFileDocument,
+	mdiFileDocumentOutline,
+	mdiFilter,
+	mdiPencil,
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
index 9ea9c77cef..01ffe8037e 100644
--- a/src/views/FilesList/FileEntry/FileEntry.vue
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
-import { getCurrentInstance, ref } from 'vue'
+import { ref } from 'vue'
 
 import { showSuccess } from '@nextcloud/dialogs'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
@@ -66,32 +66,45 @@ import FileEntryPreview from './FileEntryPreview.vue'
 import FileEntrySigners from './FileEntrySigners.vue'
 import FileEntryStatus from './FileEntryStatus.vue'
 
-import FileEntryMixin from './FileEntryMixin.js'
+import { useFileEntry, type FileEntrySource } from '../../../composables/useFileEntry.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import { useFilesStore } from '../../../store/files.js'
 
 defineOptions({
 	name: 'FileEntry',
-	mixins: [FileEntryMixin],
 })
 
+type FileEntryActionsRef = {
+	doRename: (newName: string) => Promise<void>
+}
+
+type FileEntryNameRef = {
+	startRenaming?: () => void
+	stopRenaming?: () => void
+}
+
+const props = defineProps<{
+	source: FileEntrySource
+	loading: boolean
+}>()
+
 const actionsMenuStore = useActionsMenuStore()
 const filesStore = useFilesStore()
+const { mtime, openedMenu, mtimeOpacity, fileExtension, onRightClick, openDetailsIfAvailable } = useFileEntry(props, {
+	actionsMenuStore,
+	filesStore,
+})
+const actions = ref<FileEntryActionsRef | null>(null)
+const name = ref<FileEntryNameRef | null>(null)
 const isRenaming = ref(false)
 const renamingSaving = ref(false)
-const instance = getCurrentInstance()
-
-function getVm() {
-	return instance?.proxy as any
-}
 
 async function onRename(newName: string) {
-	const vm = getVm()
-	const oldName = vm.source.name
+	const oldName = props.source.name
 	renamingSaving.value = true
 	try {
-		await vm.$refs.actions.doRename(newName)
-		vm.$refs.name?.stopRenaming?.()
+		await actions.value?.doRename(newName)
+		name.value?.stopRenaming?.()
 		showSuccess(t('libresign', 'Renamed "{oldName}" to "{newName}"', {
 			oldName,
 			newName,
@@ -102,7 +115,7 @@ async function onRename(newName: string) {
 }
 
 function onStartRename() {
-	getVm().$refs.name?.startRenaming?.()
+	name.value?.startRenaming?.()
 }
 
 function onFileRenaming(nextIsRenaming: boolean) {
@@ -112,6 +125,14 @@ function onFileRenaming(nextIsRenaming: boolean) {
 defineExpose({
 	actionsMenuStore,
 	filesStore,
+	mtime,
+	openedMenu,
+	mtimeOpacity,
+	fileExtension,
+	onRightClick,
+	openDetailsIfAvailable,
+	actions,
+	name,
 	isRenaming,
 	renamingSaving,
 	onRename,
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
index 52f32a53f6..582b64a561 100644
--- a/src/views/FilesList/FileEntry/FileEntryGrid.vue
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -58,20 +58,34 @@ import FileEntryPreview from './FileEntryPreview.vue'
 import FileEntrySigners from './FileEntrySigners.vue'
 import FileEntryStatus from './FileEntryStatus.vue'
 
-import FileEntryMixin from './FileEntryMixin.js'
+import { useFileEntry, type FileEntrySource } from '../../../composables/useFileEntry.js'
 import { useActionsMenuStore } from '../../../store/actionsmenu.js'
 import { useFilesStore } from '../../../store/files.js'
 
 defineOptions({
 	name: 'FileEntryGrid',
-	mixins: [FileEntryMixin],
 })
 
+const props = defineProps<{
+	source: FileEntrySource
+	loading: boolean
+}>()
+
 const actionsMenuStore = useActionsMenuStore()
 const filesStore = useFilesStore()
+const { mtime, openedMenu, mtimeOpacity, fileExtension, onRightClick, openDetailsIfAvailable } = useFileEntry(props, {
+	actionsMenuStore,
+	filesStore,
+})
 
 defineExpose({
 	actionsMenuStore,
 	filesStore,
+	mtime,
+	openedMenu,
+	mtimeOpacity,
+	fileExtension,
+	onRightClick,
+	openDetailsIfAvailable,
 })
 </script>
diff --git a/src/views/FilesList/FileEntry/FileEntryMixin.js b/src/views/FilesList/FileEntry/FileEntryMixin.js
deleted file mode 100644
index 94f7efd2dc..0000000000
--- a/src/views/FilesList/FileEntry/FileEntryMixin.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2021 LibreCode coop and LibreCode contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { useSidebarStore } from '../../../store/sidebar.js'
-
-export default {
-	props: {
-		source: {
-			type: Object,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	computed: {
-		mtime() {
-			return new Date(this?.source?.created_at)
-		},
-
-		openedMenu: {
-			get() {
-				return this.actionsMenuStore.opened === this.source.id
-			},
-			set(opened) {
-				this.actionsMenuStore.opened = opened ? this.source.id : null
-			},
-		},
-
-		mtimeOpacity() {
-			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
-
-			const mtime = this.mtime?.getTime?.()
-			if (!mtime) {
-				return {}
-			}
-
-			// 1 = today, 0 = 31 days ago
-			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
-			if (ratio < 0) {
-				return {}
-			}
-			return {
-				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
-			}
-		},
-
-		fileExtension() {
-			if (this.source.nodeType === 'envelope') {
-				return ''
-			}
-			return this.source.metadata?.extension ? '.' + this.source.metadata.extension : '.pdf'
-		},
-	},
-	methods: {
-		// Open the actions menu on right click
-		onRightClick(event) {
-			// If already opened, fallback to default browser
-			if (this.openedMenu) {
-				return
-			}
-
-			this.actionsMenuStore.opened = this.source.id
-
-			// Prevent any browser defaults
-			event.preventDefault()
-			event.stopPropagation()
-
-			const root = this.$el?.closest('.app-content')
-			if (root) {
-				const contentRect = root.getBoundingClientRect()
-				root.style.setProperty('--mouse-pos-x', Math.max(0, event.clientX - contentRect.left - 200) + 'px')
-				root.style.setProperty('--mouse-pos-y', Math.max(0, event.clientY - contentRect.top) + 'px')
-			}
-		},
-
-		openDetailsIfAvailable(event) {
-			event.preventDefault()
-			event.stopPropagation()
-			this.filesStore.selectFile(this.source.id)
-			const sidebarStore = useSidebarStore()
-			sidebarStore.activeRequestSignatureTab()
-		},
-	},
-}