diff --git a/lib/Controller/FileController.php b/lib/Controller/FileController.php
index c38ec2d9f9..8b68dcee74 100644
--- a/lib/Controller/FileController.php
+++ b/lib/Controller/FileController.php
@@ -10,6 +10,7 @@
 
 use OCA\Files_Sharing\SharedStorage;
 use OCA\Libresign\AppInfo\Application;
+use OCA\Libresign\Db\File as FileEntity;
 use OCA\Libresign\Db\SignRequestMapper;
 use OCA\Libresign\Exception\LibresignException;
 use OCA\Libresign\Helper\JSActions;
@@ -19,6 +20,7 @@
 use OCA\Libresign\Service\AccountService;
 use OCA\Libresign\Service\FileService;
 use OCA\Libresign\Service\IdentifyMethodService;
+use OCA\Libresign\Service\RequestSignatureService;
 use OCA\Libresign\Service\SessionService;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
@@ -59,6 +61,7 @@ public function __construct(
 		private SessionService $sessionService,
 		private SignRequestMapper $signRequestMapper,
 		private IdentifyMethodService $identifyMethodService,
+		private RequestSignatureService $requestSignatureService,
 		private AccountService $accountService,
 		private IRootFolder $root,
 		private IPreview $preview,
@@ -192,9 +195,13 @@ public function validate(?string $type = null, $identifier = null): DataResponse
 	 *
 	 * @param string|null $signer_uuid Signer UUID
 	 * @param string|null $nodeId The nodeId (also called fileId). Is the id of a file at Nextcloud
-	 * @param int|null $status Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.
+	 * @param list<int>|null $status Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.
 	 * @param int|null $page the number of page to return
 	 * @param int|null $length Total of elements to return
+	 * @param int|null $start Start date of signature request (UNIX timestamp)
+	 * @param int|null $end End date of signature request (UNIX timestamp)
+	 * @param string|null $sortBy Name of the column to sort by
+	 * @param string|null $sortDirection Ascending or descending order
 	 * @return DataResponse<Http::STATUS_OK, array{pagination: LibresignPagination, data: ?LibresignFile[]}, array{}>
 	 *
 	 * 200: OK
@@ -207,16 +214,26 @@ public function list(
 		?int $length = null,
 		?string $signer_uuid = null,
 		?string $nodeId = null,
-		?int $status = null,
+		?array $status = null,
+		?int $start = null,
+		?int $end = null,
+		?string $sortBy = null,
+		?string $sortDirection = null,
 	): DataResponse {
 		$filter = array_filter([
 			'signer_uuid' => $signer_uuid,
 			'nodeId' => $nodeId,
 			'status' => $status,
+			'start' => $start,
+			'end' => $end,
 		], static function ($var) { return $var !== null; });
+		$sort = [
+			'sortBy' => $sortBy,
+			'sortDirection' => $sortDirection,
+		];
 		$return = $this->fileService
 			->setMe($this->userSession->getUser())
-			->listAssociatedFilesOfSignFlow($page, $length, $filter);
+			->listAssociatedFilesOfSignFlow($page, $length, $filter, $sort);
 		return new DataResponse($return, Http::STATUS_OK);
 	}
 
@@ -356,6 +373,15 @@ public function save(array $file, string $name = '', array $settings = []): Data
 				'file' => $file,
 				'settings' => $settings
 			]);
+			$data = [
+				'file' => [
+					'fileNode' => $node,
+				],
+				'name' => $name,
+				'userManager' => $this->userSession->getUser(),
+				'status' => FileEntity::STATUS_DRAFT,
+			];
+			$file = $this->requestSignatureService->save($data);
 
 			return new DataResponse(
 				[
@@ -377,4 +403,46 @@ public function save(array $file, string $name = '', array $settings = []): Data
 			);
 		}
 	}
+
+	/**
+	 * Delete File
+	 *
+	 * This will delete the file and all data
+	 *
+	 * @param integer $fileId Node id of a Nextcloud file
+	 * @return DataResponse<Http::STATUS_OK, array{message: string}, array{}>|DataResponse<Http::STATUS_UNAUTHORIZED, array{message: string}, array{}>|DataResponse<Http::STATUS_UNPROCESSABLE_ENTITY, array{action: integer, errors: string[]}, array{}>
+	 *
+	 * 200: OK
+	 * 401: Failed
+	 * 422: Failed
+	 */
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	#[RequireManager]
+	#[ApiRoute(verb: 'DELETE', url: '/api/{apiVersion}/file/file_id/{fileId}', requirements: ['apiVersion' => '(v1)'])]
+	public function deleteAllRequestSignatureUsingFileId(int $fileId): DataResponse {
+		try {
+			$data = [
+				'userManager' => $this->userSession->getUser(),
+				'file' => [
+					'fileId' => $fileId
+				]
+			];
+			$this->validateHelper->validateExistingFile($data);
+			$this->fileService->delete($fileId);
+		} catch (\Throwable $th) {
+			return new DataResponse(
+				[
+					'message' => $th->getMessage(),
+				],
+				Http::STATUS_UNAUTHORIZED
+			);
+		}
+		return new DataResponse(
+			[
+				'message' => $this->l10n->t('Success')
+			],
+			Http::STATUS_OK
+		);
+	}
 }
diff --git a/lib/Db/AccountFileMapper.php b/lib/Db/AccountFileMapper.php
index e811b61bc1..c892be7a07 100644
--- a/lib/Db/AccountFileMapper.php
+++ b/lib/Db/AccountFileMapper.php
@@ -151,7 +151,7 @@ private function getUserAccountFile(array $filter = []): Pagination {
 			$qb->setMaxResults($filter['length']);
 		}
 
-		$pagination = new Pagination($qb);
+		$pagination = new Pagination($qb, $this->urlGenerator);
 		return $pagination;
 	}
 
diff --git a/lib/Db/SignRequestMapper.php b/lib/Db/SignRequestMapper.php
index 88ddfd0ab6..027dbe5901 100644
--- a/lib/Db/SignRequestMapper.php
+++ b/lib/Db/SignRequestMapper.php
@@ -329,11 +329,12 @@ public function getFilesAssociatedFilesWithMeFormatted(
 		array $filter,
 		?int $page = null,
 		?int $length = null,
+		?array $sort = [],
 	): array {
 		$filter['email'] = $user->getEMailAddress();
 		$filter['length'] = $length;
 		$filter['page'] = $page;
-		$pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter);
+		$pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter, $sort);
 		$pagination->setMaxPerPage($length);
 		$pagination->setCurrentPage($page);
 		$currentPageResults = $pagination->getCurrentPageResults();
@@ -472,7 +473,17 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
 			}
 			if (!empty($filter['status'])) {
 				$qb->andWhere(
-					$qb->expr()->eq('f.status', $qb->createNamedParameter($filter['status'], IQueryBuilder::PARAM_INT))
+					$qb->expr()->in('f.status', $qb->createNamedParameter($filter['status'], IQueryBuilder::PARAM_INT_ARRAY))
+				);
+			}
+			if (!empty($filter['start'])) {
+				$qb->andWhere(
+					$qb->expr()->gte('f.created_at', $qb->createNamedParameter($filter['start'], IQueryBuilder::PARAM_INT))
+				);
+			}
+			if (!empty($filter['end'])) {
+				$qb->andWhere(
+					$qb->expr()->lte('f.created_at', $qb->createNamedParameter($filter['end'], IQueryBuilder::PARAM_INT))
 				);
 			}
 			if (isset($filter['length']) && isset($filter['page'])) {
@@ -483,7 +494,11 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
 		return $qb;
 	}
 
-	private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filter = []): Pagination {
+	private function getFilesAssociatedFilesWithMeStmt(
+		string $userId,
+		?array $filter = [],
+		?array $sort = [],
+	): Pagination {
 		$qb = $this->getFilesAssociatedFilesWithMeQueryBuilder($userId, $filter);
 		$qb->select(
 			'f.id',
@@ -494,6 +509,12 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filte
 			'f.status',
 			'f.metadata',
 		);
+		if (!empty($sort) && in_array($sort['sortBy'], ['name', 'status', 'created_at'])) {
+			$qb->orderBy(
+				$qb->func()->lower('f.' . $sort['sortBy']),
+				$sort['sortDirection'] == 'asc' ? 'asc' : 'desc'
+			);
+		}
 		$qb->selectAlias('f.created_at', 'request_date');
 
 		$countQueryBuilderModifier = function (IQueryBuilder $qb): int {
@@ -505,7 +526,7 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filte
 			return (int)$qb->executeQuery()->fetchOne();
 		};
 
-		$pagination = new Pagination($qb);
+		$pagination = new Pagination($qb, $this->urlGenerator);
 		return $pagination;
 	}
 
diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index 3ed5cf6749..c0124b80b5 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -10,13 +10,14 @@
 
 use OCA\Libresign\Db\PagerFantaQueryAdapter;
 use OCP\DB\QueryBuilder\IQueryBuilder;
+use OCP\IURLGenerator;
 use Pagerfanta\Pagerfanta;
 
 class Pagination extends Pagerfanta {
-	/** @var string */
-	private $rootPath;
+	private string $routeName;
 	public function __construct(
 		IQueryBuilder $queryBuilder,
+		private IURLGenerator $urlGenerator,
 	) {
 		$adapter = new PagerFantaQueryAdapter($queryBuilder);
 		parent::__construct($adapter);
@@ -25,27 +26,59 @@ public function __construct(
 	/**
 	 * @return static
 	 */
-	public function setRootPath(string $rootPath = ''): self {
-		$this->rootPath = $rootPath;
+	public function setRouteName(string $routeName = ''): self {
+		$this->routeName = $routeName;
 		return $this;
 	}
 
-	public function getPagination(?int $page, ?int $length): array {
+	public function getPagination(int $page, int $length, array $filter = []): array {
 		$this->setMaxPerPage($length);
-		$pagination['total'] = $this->count();
-		if ($pagination['total'] > $length) {
-			$pagination['current'] = $this->rootPath . '?page=' . $page . '&length=' . $length;
-			$pagination['next'] = $this->hasNextPage()      ? $this->rootPath . '?page=' . $this->getNextPage() . '&length=' . $length : null;
-			$pagination['prev'] = $this->hasPreviousPage()  ? $this->rootPath . '?page=' . $this->getPreviousPage() . '&length=' . $length : null;
-			$pagination['last'] = $this->hasNextPage()      ? $this->rootPath . '?page=' . $this->getNbPages() . '&length=' . $length : null;
-			$pagination['first'] = $this->hasPreviousPage() ? $this->rootPath . '?page=1&length=' . $length : null;
-		} else {
-			$pagination['current'] = null;
-			$pagination['next'] = null;
-			$pagination['prev'] = null;
-			$pagination['last'] = null;
-			$pagination['first'] = null;
+		$total = $this->count();
+		if ($total > $length) {
+			return [
+				'total' => $total,
+				'current' => $this->linkToRoute(true, $page, $length, $filter),
+				'next' => $this->linkToRoute($this->hasNextPage(), 'getNextPage', $length, $filter),
+				'prev' => $this->linkToRoute($this->hasPreviousPage(), 'getPreviousPage', $length, $filter),
+				'last' => $this->linkToRoute($this->hasNextPage(), 'getNbPages', $length, $filter),
+				'first' => $this->linkToRoute($this->hasPreviousPage(), 1, $length, $filter),
+			];
 		}
-		return $pagination;
+		return [
+			'total' => $total,
+			'current' => null,
+			'next' => null,
+			'prev' => null,
+			'last' => null,
+			'first' => null,
+		];
+	}
+
+	private function linkToRoute(bool $condition, int|string $page, int $length, array $filter): ?string {
+		if (!$condition) {
+			return null;
+		}
+		if (is_string($page)) {
+			$page = $this->$page();
+		}
+		$url = $this->urlGenerator->linkToRouteAbsolute(
+			$this->routeName,
+			array_merge(['page' => $page, 'length' => $length, 'apiVersion' => 'v1'], $filter)
+		);
+		$url = $this->sortParameters($url);
+		return $url;
+	}
+
+	/**
+	 * This is necessary to fix problem at integration tests because the method linkToRoute change the order of parameters
+	 */
+	private function sortParameters(?string $url): ?string {
+		if (!$url) {
+			return $url;
+		}
+		parse_str(parse_url($url, PHP_URL_QUERY), $query);
+		ksort($query);
+		$url = strtok($url, '?') . '?' . http_build_query($query);
+		return $url;
 	}
 }
diff --git a/lib/Service/AccountFileService.php b/lib/Service/AccountFileService.php
index 48efb4357b..3960195500 100644
--- a/lib/Service/AccountFileService.php
+++ b/lib/Service/AccountFileService.php
@@ -49,10 +49,10 @@ public function accountFileList(array $filter, ?int $page = null, ?int $length =
 		$page = $page ?? 1;
 		$length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 		$data = $this->accountFileMapper->accountFileList($filter, $page, $length);
-		$data['pagination']->setRootPath('/file/list');
+		$data['pagination']->setRouteName('ocs.libresign.File.list');
 		return [
 			'data' => $data['data'],
-			'pagination' => $data['pagination']->getPagination($page, $length)
+			'pagination' => $data['pagination']->getPagination($page, $length, $filter)
 		];
 	}
 }
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index 1d9632e779..9d967d2774 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -432,7 +432,12 @@ public function setFileByPath(string $path): self {
 	 *
 	 * @psalm-return array{data: array, pagination: array}
 	 */
-	public function listAssociatedFilesOfSignFlow($page = null, $length = null, array $filter = []): array {
+	public function listAssociatedFilesOfSignFlow(
+		$page = null,
+		$length = null,
+		array $filter = [],
+		array $sort = [],
+	): array {
 		$page = $page ?? 1;
 		$length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 
@@ -441,6 +446,7 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
 			$filter,
 			$page,
 			$length,
+			$sort,
 		);
 
 		$signers = $this->signRequestMapper->getByMultipleFileId(array_column($return['data'], 'id'));
@@ -448,10 +454,10 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
 		$visibleElements = $this->signRequestMapper->getVisibleElementsFromSigners($signers);
 		$return['data'] = $this->associateAllAndFormat($this->me, $return['data'], $signers, $identifyMethods, $visibleElements);
 
-		$return['pagination']->setRootPath('/file/list');
+		$return['pagination']->setRouteName('ocs.libresign.File.list');
 		return [
 			'data' => $return['data'],
-			'pagination' => $return['pagination']->getPagination($page, $length)
+			'pagination' => $return['pagination']->getPagination($page, $length, $filter)
 		];
 	}
 
@@ -585,4 +591,20 @@ public function getMyLibresignFile(int $nodeId): File {
 			],
 		);
 	}
+
+	public function delete(int $fileId): void {
+		$file = $this->fileMapper->getByFileId($fileId);
+		$this->fileElementService->deleteVisibleElements($file->getId());
+		$list = $this->signRequestMapper->getByFileId($file->getId());
+		foreach ($list as $signRequest) {
+			$this->signRequestMapper->delete($signRequest);
+		}
+		$this->fileMapper->delete($file);
+		if ($file->getSignedNodeId()) {
+			$signedNextcloudFile = $this->folderService->getFileById($file->getSignedNodeId());
+			$signedNextcloudFile->delete();
+		}
+		$nextcloudFile = $this->folderService->getFileById($fileId);
+		$nextcloudFile->delete();
+	}
 }
diff --git a/openapi-full.json b/openapi-full.json
index 7a5298e3b1..fad3f76592 100644
--- a/openapi-full.json
+++ b/openapi-full.json
@@ -1128,6 +1128,48 @@
                 }
             }
         },
+        "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+            "get": {
+                "operationId": "page-sign-pdf",
+                "summary": "Sign page to authenticated signer",
+                "description": "The path is used only by frontend",
+                "tags": [
+                    "page"
+                ],
+                "security": [
+                    {},
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "uuid",
+                        "in": "path",
+                        "description": "Sign request uuid",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "text/html": {
+                                "schema": {
+                                    "type": "string"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/index.php/apps/libresign/p/sign/{uuid}": {
             "get": {
                 "operationId": "page-sign",
@@ -3695,9 +3737,32 @@
                         }
                     },
                     {
-                        "name": "status",
+                        "name": "status[]",
+                        "in": "query",
+                        "description": "Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "schema": {
+                            "type": "array",
+                            "nullable": true,
+                            "items": {
+                                "type": "integer",
+                                "format": "int64"
+                            }
+                        }
+                    },
+                    {
+                        "name": "start",
+                        "in": "query",
+                        "description": "Start date of signature request (UNIX timestamp)",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "nullable": true
+                        }
+                    },
+                    {
+                        "name": "end",
                         "in": "query",
-                        "description": "Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "description": "End date of signature request (UNIX timestamp)",
                         "schema": {
                             "type": "integer",
                             "format": "int64",
diff --git a/openapi.json b/openapi.json
index ebf9a8d844..fde54c2766 100644
--- a/openapi.json
+++ b/openapi.json
@@ -1032,6 +1032,48 @@
                 }
             }
         },
+        "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+            "get": {
+                "operationId": "page-sign-pdf",
+                "summary": "Sign page to authenticated signer",
+                "description": "The path is used only by frontend",
+                "tags": [
+                    "page"
+                ],
+                "security": [
+                    {},
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "uuid",
+                        "in": "path",
+                        "description": "Sign request uuid",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "text/html": {
+                                "schema": {
+                                    "type": "string"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/index.php/apps/libresign/p/sign/{uuid}": {
             "get": {
                 "operationId": "page-sign",
@@ -3599,9 +3641,32 @@
                         }
                     },
                     {
-                        "name": "status",
+                        "name": "status[]",
+                        "in": "query",
+                        "description": "Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "schema": {
+                            "type": "array",
+                            "nullable": true,
+                            "items": {
+                                "type": "integer",
+                                "format": "int64"
+                            }
+                        }
+                    },
+                    {
+                        "name": "start",
+                        "in": "query",
+                        "description": "Start date of signature request (UNIX timestamp)",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "nullable": true
+                        }
+                    },
+                    {
+                        "name": "end",
                         "in": "query",
-                        "description": "Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "description": "End date of signature request (UNIX timestamp)",
                         "schema": {
                             "type": "integer",
                             "format": "int64",
diff --git a/package-lock.json b/package-lock.json
index c518a2a1ef..659cf4befc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@fontsource/dancing-script": "^5.1.0",
         "@libresign/vue-pdf-editor": "^1.3.7",
         "@marionebl/option": "^1.0.8",
+        "@mdi/js": "^7.4.47",
+        "@mdi/svg": "^7.4.47",
         "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.1",
         "@nextcloud/dialogs": "^6.0.1",
@@ -26,7 +28,9 @@
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/vue": "^8.19.0",
         "blueimp-md5": "^2.19.0",
+        "copy-webpack-plugin": "^12.0.2",
         "crypto-js": "^4.2.0",
+        "debounce": "^2.2.0",
         "js-confetti": "^0.12.0",
         "pinia": "^2.2.6",
         "v-perfect-signature": "^1.4.0",
@@ -1875,278 +1879,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@esbuild/linux-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
@@ -2164,108 +1896,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -2506,7 +2136,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -2521,7 +2150,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -2531,7 +2159,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -2541,7 +2168,6 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -2553,14 +2179,12 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2783,6 +2407,12 @@
       "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
       "license": "Apache-2.0"
     },
+    "node_modules/@mdi/svg": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-7.4.47.tgz",
+      "integrity": "sha512-WQ2gDll12T9WD34fdRFgQVgO8bag3gavrAgJ0frN4phlwdJARpE6gO1YvLEMJR0KKgoc+/Ea/A0Pp11I00xBvw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@nextcloud/auth": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.4.0.tgz",
@@ -2880,6 +2510,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-6.0.1.tgz",
       "integrity": "sha512-TlzNUy0eFPIjnop2Wfom45xJdUjLOoUwd/E8V/6ehh+PifrgIWGy6jqBYMRoQfUASc/LKtSYUrCN3yDgVrK8Tw==",
+      "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@mdi/js": "^7.4.47",
         "@nextcloud/auth": "^2.4.0",
@@ -3271,6 +2902,18 @@
         "vue": "2.x"
       }
     },
+    "node_modules/@nextcloud/vue/node_modules/debounce": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.1.tgz",
+      "integrity": "sha512-+xRWxgel9LgTC4PwKlm7TJUK6B6qsEK77NaiNvXmeQ7Y3e6OVVsBC4a9BSptS/mAYceyAz37Oa8JTTuPRft7uQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@nextcloud/webpack-vue-config": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-6.2.0.tgz",
@@ -3313,9 +2956,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -3328,9 +2969,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3339,9 +2978,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3358,276 +2995,56 @@
       "license": "MIT",
       "peer": true,
       "engines": {
-        "node": ">=12.4.0"
-      }
-    },
-    "node_modules/@parcel/watcher": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
-      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "detect-libc": "^1.0.3",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.5",
-        "node-addon-api": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.4.1",
-        "@parcel/watcher-darwin-arm64": "2.4.1",
-        "@parcel/watcher-darwin-x64": "2.4.1",
-        "@parcel/watcher-freebsd-x64": "2.4.1",
-        "@parcel/watcher-linux-arm-glibc": "2.4.1",
-        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
-        "@parcel/watcher-linux-arm64-musl": "2.4.1",
-        "@parcel/watcher-linux-x64-glibc": "2.4.1",
-        "@parcel/watcher-linux-x64-musl": "2.4.1",
-        "@parcel/watcher-win32-arm64": "2.4.1",
-        "@parcel/watcher-win32-ia32": "2.4.1",
-        "@parcel/watcher-win32-x64": "2.4.1"
-      }
-    },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
-      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
-      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
-      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
-      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
-      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
-      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
-      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
-      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
-      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">=12.4.0"
       }
     },
-    "node_modules/@parcel/watcher-win32-arm64": {
+    "node_modules/@parcel/watcher": {
       "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
-      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
-      "cpu": [
-        "arm64"
-      ],
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
+      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
       "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
       "engines": {
         "node": ">= 10.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.4.1",
+        "@parcel/watcher-darwin-arm64": "2.4.1",
+        "@parcel/watcher-darwin-x64": "2.4.1",
+        "@parcel/watcher-freebsd-x64": "2.4.1",
+        "@parcel/watcher-linux-arm-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-musl": "2.4.1",
+        "@parcel/watcher-linux-x64-glibc": "2.4.1",
+        "@parcel/watcher-linux-x64-musl": "2.4.1",
+        "@parcel/watcher-win32-arm64": "2.4.1",
+        "@parcel/watcher-win32-ia32": "2.4.1",
+        "@parcel/watcher-win32-x64": "2.4.1"
       }
     },
-    "node_modules/@parcel/watcher-win32-ia32": {
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
       "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
-      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
+      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
       "cpu": [
-        "ia32"
+        "x64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "linux"
       ],
       "peer": true,
       "engines": {
@@ -3638,10 +3055,10 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@parcel/watcher-win32-x64": {
+    "node_modules/@parcel/watcher-linux-x64-musl": {
       "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
-      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
+      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
       "cpu": [
         "x64"
       ],
@@ -3649,7 +3066,7 @@
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "linux"
       ],
       "peer": true,
       "engines": {
@@ -3824,6 +3241,18 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.3.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.3.17.tgz",
@@ -3907,7 +3336,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -3994,9 +3422,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -4619,6 +4045,7 @@
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.2.0.tgz",
       "integrity": "sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==",
+      "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
         "@vueuse/metadata": "11.2.0",
@@ -4633,6 +4060,7 @@
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.2.0.tgz",
       "integrity": "sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==",
+      "license": "MIT",
       "dependencies": {
         "vue-demi": ">=0.14.10"
       },
@@ -4645,6 +4073,7 @@
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
       "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
         "vue-demi-switch": "bin/vue-demi-switch.js"
@@ -4669,6 +4098,7 @@
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.2.0.tgz",
       "integrity": "sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
@@ -4715,7 +4145,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
       "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4727,7 +4156,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
       "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -4735,7 +4163,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
       "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -4743,7 +4170,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
       "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -4751,7 +4177,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
       "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4764,7 +4189,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
       "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -4772,7 +4196,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
       "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4786,7 +4209,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
       "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4797,7 +4219,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
       "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
@@ -4808,7 +4229,6 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
       "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -4816,7 +4236,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
       "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4834,7 +4253,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
       "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4849,7 +4267,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
       "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4863,7 +4280,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
       "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4879,7 +4295,6 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
       "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4941,7 +4356,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "peer": true
     },
@@ -4949,7 +4363,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "peer": true
     },
@@ -4993,7 +4406,6 @@
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "bin": {
@@ -5007,7 +4419,6 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
       "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "peerDependencies": {
@@ -5042,7 +4453,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5060,9 +4470,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -5079,9 +4487,7 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -5097,15 +4503,12 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "peerDependencies": {
@@ -5727,9 +5130,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -5903,7 +5304,6 @@
       "version": "4.24.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
       "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5962,7 +5362,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -6095,7 +5494,6 @@
       "version": "1.0.30001674",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001674.tgz",
       "integrity": "sha512-jOsKlZVRnzfhLojb+Ykb+gyUSp9Xb57So+fAiFlLzzTKpqg8xxSav0e40c8/4F/v9N8QSvrRRaLeVzQbLqomYw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6244,7 +5642,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -6406,7 +5803,6 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -6596,6 +5992,74 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/copy-webpack-plugin": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-12.0.2.tgz",
+      "integrity": "sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.1",
+        "globby": "^14.0.0",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.2.0",
+        "serialize-javascript": "^6.0.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/globby": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
+      "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.2",
+        "ignore": "^5.2.4",
+        "path-type": "^5.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/path-type": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
+      "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.38.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
@@ -6965,9 +6429,9 @@
       "license": "MIT"
     },
     "node_modules/debounce": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.1.tgz",
-      "integrity": "sha512-+xRWxgel9LgTC4PwKlm7TJUK6B6qsEK77NaiNvXmeQ7Y3e6OVVsBC4a9BSptS/mAYceyAz37Oa8JTTuPRft7uQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.2.0.tgz",
+      "integrity": "sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -7406,7 +6870,6 @@
       "version": "1.5.49",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz",
       "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/elliptic": {
@@ -7479,7 +6942,6 @@
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
       "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -7654,7 +7116,6 @@
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
       "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -7780,7 +7241,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -8381,7 +7841,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
@@ -8579,7 +8038,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
@@ -8593,7 +8051,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "engines": {
@@ -8604,7 +8061,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "engines": {
@@ -8656,7 +8112,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -8748,16 +8203,13 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -8773,9 +8225,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -8787,7 +8237,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -8803,9 +8252,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
       "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/fast-xml-parser": {
       "version": "4.5.0",
@@ -8844,9 +8291,7 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -8906,9 +8351,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9197,22 +8640,6 @@
       "devOptional": true,
       "license": "ISC"
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -9360,9 +8787,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -9374,7 +8799,6 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true
     },
@@ -9520,7 +8944,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC",
       "peer": true
     },
@@ -9553,7 +8976,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -10082,9 +9504,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -10525,9 +9945,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10563,9 +9981,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -10655,9 +10071,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -10904,7 +10318,6 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -10920,7 +10333,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -11011,7 +10423,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -11019,7 +10430,6 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -11164,7 +10574,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -11701,7 +11110,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -11709,9 +11117,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -12294,9 +11700,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -12553,7 +11957,6 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -12683,7 +12086,6 @@
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nopt": {
@@ -12706,9 +12108,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13036,6 +12436,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-8.0.1.tgz",
       "integrity": "sha512-NXzu9aQJTAzbBqOt2hwsR63ea7yvxJc0PwN/zobNAudYfb1B7R08SzB4TsLeSbUCuG467NhnoT0oO6w1qRO+BA==",
+      "license": "MIT",
       "dependencies": {
         "eventemitter3": "^5.0.1",
         "p-timeout": "^6.1.2"
@@ -13050,7 +12451,8 @@
     "node_modules/p-queue/node_modules/eventemitter3": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
     },
     "node_modules/p-retry": {
       "version": "6.2.0",
@@ -13075,6 +12477,7 @@
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.3.tgz",
       "integrity": "sha512-UJUyfKbwvr/uZSV6btANfb+0t/mOhKV/KXcCUTp8FcQI+v/0d+wXqH4htrW0E4rR6WiEO/EPvUFiV9D5OI4vlw==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.16"
       },
@@ -13304,9 +12707,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -13318,6 +12719,7 @@
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.6.tgz",
       "integrity": "sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==",
+      "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.3",
         "vue-demi": "^0.14.10"
@@ -13829,7 +13231,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -13883,7 +13284,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -13898,16 +13298,13 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -14338,7 +13735,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -14458,9 +13854,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -14513,7 +13907,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -14529,7 +13922,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
@@ -14558,7 +13950,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -14668,9 +14059,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
       "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -14689,9 +14078,7 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -14707,9 +14094,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -14721,9 +14106,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/select-hose": {
       "version": "2.0.0",
@@ -14818,9 +14201,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -15212,7 +14593,6 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -15224,7 +14604,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "peer": true,
       "engines": {
@@ -16015,7 +15394,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -16051,7 +15429,6 @@
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz",
       "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
@@ -16071,7 +15448,6 @@
       "version": "5.3.10",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
       "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -16107,7 +15483,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -16183,9 +15558,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -16632,6 +16005,18 @@
       "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
       "license": "MIT"
     },
+    "node_modules/unicorn-magic": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
+      "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
@@ -16747,7 +16132,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
       "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -16778,7 +16162,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
@@ -17313,7 +16696,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
       "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -17420,7 +16802,6 @@
       "version": "5.95.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
       "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -17731,7 +17112,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -17751,7 +17131,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
diff --git a/package.json b/package.json
index e61294dd30..a2fbea5ad4 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "@fontsource/dancing-script": "^5.1.0",
     "@libresign/vue-pdf-editor": "^1.3.7",
     "@marionebl/option": "^1.0.8",
+    "@mdi/js": "^7.4.47",
+    "@mdi/svg": "^7.4.47",
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.1",
     "@nextcloud/dialogs": "^6.0.1",
@@ -37,7 +39,9 @@
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.19.0",
     "blueimp-md5": "^2.19.0",
+    "copy-webpack-plugin": "^12.0.2",
     "crypto-js": "^4.2.0",
+    "debounce": "^2.2.0",
     "js-confetti": "^0.12.0",
     "pinia": "^2.2.6",
     "v-perfect-signature": "^1.4.0",
diff --git a/src/Components/File/File.vue b/src/Components/File/File.vue
index 54911f712e..bc35e1c5c8 100644
--- a/src/Components/File/File.vue
+++ b/src/Components/File/File.vue
@@ -15,10 +15,10 @@
 			@load="backgroundFailed = false">
 		<FileIcon v-else v-once :size="128" />
 		<div class="enDot">
-			<div :class="filesStore.files[currentNodeId].statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files[currentNodeId].status) : '' " />
-			<span>{{ filesStore.files[currentNodeId].statusText !== 'none' ? filesStore.files[currentNodeId].statusText : '' }}</span>
+			<div :class="filesStore.files.get(currentNodeId).statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files.get(currentNodeId).status) : '' " />
+			<span>{{ filesStore.files.get(currentNodeId).statusText !== 'none' ? filesStore.files.get(currentNodeId).statusText : '' }}</span>
 		</div>
-		<h1>{{ filesStore.files[currentNodeId].name }}</h1>
+		<h1>{{ filesStore.files.get(currentNodeId).name }}</h1>
 	</div>
 </template>
 
@@ -64,7 +64,7 @@ export default {
 				return null
 			}
 			let previewUrl = ''
-			if (this.filesStore.files[this.currentNodeId]?.uuid?.length > 0) {
+			if (this.filesStore.files.get(this.currentNodeId)?.uuid?.length > 0) {
 				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
 					nodeId: this.currentNodeId,
 				})
diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
index 8880abfd0a..c97059d599 100644
--- a/src/Components/LeftSidebar/LeftSidebar.vue
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -15,8 +15,8 @@
 					<FileSignIcon :size="20" />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem id="timeline"
-				:to="{ name: 'timeline' }"
+			<NcAppNavigationItem id="fileslist"
+				:to="{ name: 'fileslist' }"
 				:name="t('libresign', 'Files')"
 				@click="unselectFile">
 				<template #icon>
diff --git a/src/Components/RightSidebar/RequestSignatureTab.vue b/src/Components/RightSidebar/RequestSignatureTab.vue
index 4bb0a18190..b76ee3c36c 100644
--- a/src/Components/RightSidebar/RequestSignatureTab.vue
+++ b/src/Components/RightSidebar/RequestSignatureTab.vue
@@ -9,15 +9,15 @@
 	</div>
 	<div v-else
 		id="request-signature-tab">
-		<NcButton v-if="canAddSigner"
+		<NcButton v-if="filesStore.canAddSigner()"
 			:type="hasSigners ? 'secondary' : 'primary'"
 			@click="addSigner">
 			{{ t('libresign', 'Add signer') }}
 		</NcButton>
-		<Signers :signers="dataSigners"
+		<Signers :signers="filesStore.signers"
 			event="libresign:edit-signer">
 			<template #actions="{signer}">
-				<NcActionButton v-if="canSave && !signer.signed"
+				<NcActionButton v-if="filesStore.canSave() && !signer.signed"
 					aria-label="Delete"
 					:close-after-click="true"
 					@click="filesStore.deleteSigner(signer)">
@@ -26,7 +26,7 @@
 					</template>
 					{{ t('libresign', 'Delete') }}
 				</NcActionButton>
-				<NcActionButton v-if="canRequestSign && !signer.signed && signer.signRequestId && !signer.me"
+				<NcActionButton v-if="filesStore.canRequestSign && !signer.signed && signer.signRequestId && !signer.me"
 					icon="icon-comment"
 					:close-after-click="true"
 					@click="sendNotify(signer)">
@@ -35,8 +35,8 @@
 			</template>
 		</Signers>
 		<div class="action-buttons">
-			<NcButton v-if="canSave"
-				:type="canSign ? 'secondary' : 'primary'"
+			<NcButton v-if="filesStore.canSave()"
+				:type="filesStore.canSign() ? 'secondary' : 'primary'"
 				:disabled="hasLoading"
 				@click="save()">
 				<template #icon>
@@ -44,7 +44,7 @@
 				</template>
 				{{ t('libresign', 'Next') }}
 			</NcButton>
-			<NcButton v-if="canSign"
+			<NcButton v-if="filesStore.canSign()"
 				type="primary"
 				:disabled="hasLoading"
 				@click="sign()">
@@ -53,7 +53,7 @@
 				</template>
 				{{ t('libresign', 'Sign') }}
 			</NcButton>
-			<NcButton v-if="canValidate"
+			<NcButton v-if="filesStore.canValidate()"
 				type="primary"
 				@click="validationFile()">
 				{{ t('libresign', 'Validate') }}
@@ -72,11 +72,9 @@
 <script>
 import Delete from 'vue-material-design-icons/Delete.vue'
 
-import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -122,45 +120,11 @@ export default {
 			hasLoading: false,
 			signerToEdit: {},
 			modalSrc: '',
-			canRequestSign: loadState('libresign', 'can_request_sign', false),
 		}
 	},
 	computed: {
-		canAddSigner() {
-			return this.canRequestSign
-				&& (
-					!Object.hasOwn(this.filesStore.getFile(), 'requested_by')
-					|| this.filesStore.getFile().requested_by.userId === getCurrentUser().uid
-				)
-				&& !this.filesStore.isPartialSigned()
-				&& !this.filesStore.isFullSigned()
-		},
-		canSave() {
-			return this.canRequestSign
-				&& (
-					!Object.hasOwn(this.filesStore.getFile(), 'requested_by')
-					|| this.filesStore.getFile().requested_by.userId === getCurrentUser().uid
-				)
-				&& !this.filesStore.isPartialSigned()
-				&& !this.filesStore.isFullSigned()
-				&& this.filesStore.getFile()?.signers?.length > 0
-		},
-		canSign() {
-			return !this.filesStore.isFullSigned()
-				&& this.filesStore.getFile().status > 0
-				&& this.filesStore.getFile()?.signers?.filter(signer => signer.me).length > 0
-				&& this.filesStore.getFile()?.signers?.filter(signer => signer.me)
-					.filter(signer => signer.signed?.length > 0).length === 0
-		},
-		canValidate() {
-			return this.filesStore.isPartialSigned()
-				|| this.filesStore.isFullSigned()
-		},
-		dataSigners() {
-			return this.filesStore.getFile()?.signers ?? []
-		},
 		hasSigners() {
-			return this.filesStore.hasSigners()
+			return this.filesStore.hasSigners(this.filesStore.getFile())
 		},
 		fileName() {
 			return this.filesStore.getFile()?.name ?? ''
@@ -240,8 +204,8 @@ export default {
 					name: this.filesStore.getFile()?.name,
 					users: [],
 				},
-			}
-			this.dataSigners.forEach(signer => {
+			};
+			(this.filesStore.getFile()?.signers ?? []).forEach(signer => {
 				const user = {
 					displayName: signer.displayName,
 					identify: {},
diff --git a/src/Components/Signers/Signer.vue b/src/Components/Signers/Signer.vue
index 8d9ed9ed59..6d7f81b8ad 100644
--- a/src/Components/Signers/Signer.vue
+++ b/src/Components/Signers/Signer.vue
@@ -13,7 +13,9 @@
 			<template #subname>
 				<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
 			</template>
-			<slot v-if="$slots.actions" slot="actions" name="actions" />
+			<NcActions>
+				<slot v-if="$slots.actions" slot="actions" name="actions" />
+			</NcActions>
 			<template #indicator>
 				<CheckboxBlankCircle :size="16"
 					:fill-color="statusColor"
@@ -29,6 +31,7 @@ import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 
@@ -39,6 +42,7 @@ import { useFilesStore } from '../../store/files.js'
 export default {
 	name: 'Signer',
 	components: {
+		NcActions,
 		NcListItem,
 		NcAvatar,
 		CheckboxBlankCircle,
diff --git a/src/helpers/logger.js b/src/helpers/logger.js
new file mode 100644
index 0000000000..14d74a5d63
--- /dev/null
+++ b/src/helpers/logger.js
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getLoggerBuilder } from '@nextcloud/logger'
+
+export default getLoggerBuilder()
+	.setApp('libresign')
+	.detectUser()
+	.build()
diff --git a/src/router/router.js b/src/router/router.js
index 2784e180a5..ca66b65f8c 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -137,9 +137,9 @@ const router = new Router({
 			props: true,
 		},
 		{
-			path: '/f/timeline/sign',
-			name: 'timeline',
-			component: () => import('../views/Timeline/Timeline.vue'),
+			path: '/f/filelist/sign',
+			name: 'fileslist',
+			component: () => import('../views/FilesList/FilesList.vue'),
 		},
 		{
 			path: '/f/request',
diff --git a/src/store/actionsmenu.js b/src/store/actionsmenu.js
new file mode 100644
index 0000000000..16676167f2
--- /dev/null
+++ b/src/store/actionsmenu.js
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+export const useActionsMenuStore = defineStore('actionsmenu', {
+	state: () => ({
+		opened: null,
+	}),
+})
diff --git a/src/store/files.js b/src/store/files.js
index b5ee266762..c4d983f5af 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -4,182 +4,301 @@
  */
 
 import { defineStore } from 'pinia'
-import { set } from 'vue'
+import { del, set } from 'vue'
 
+import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
+import { emit, subscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 
+import { useFilesSortingStore } from './filesSorting.js'
+import { useFiltersStore } from './filters.js'
 import { useSidebarStore } from './sidebar.js'
 import { useSignStore } from './sign.js'
 
-export const useFilesStore = defineStore('files', {
-	state: () => {
-		return {
-			files: {},
-			selectedNodeId: 0,
-			identifyingSigner: false,
-			loading: false,
-			filterActive: 'all',
-		}
-	},
-
-	actions: {
-		addFile(file) {
-			set(this.files, file.nodeId, file)
-			this.hydrateFile(file.nodeId)
-		},
-		selectFile(nodeId) {
-			this.selectedNodeId = nodeId ?? 0
-			if (this.selectedNodeId === 0) {
-				const signStore = useSignStore()
-				signStore.reset()
-				return
-			}
-			const sidebarStore = useSidebarStore()
-			sidebarStore.activeRequestSignatureTab()
-		},
-		getFile() {
-			return this.files[this.selectedNodeId] ?? {}
-		},
-		async flushSelectedFile() {
-			const files = await this.getAllFiles({
-				nodeId: this.selectedNodeId,
-			})
-			this.addFile(files[this.selectedNodeId])
-		},
-		enableIdentifySigner() {
-			this.identifyingSigner = true
-		},
-		disableIdentifySigner() {
-			this.identifyingSigner = false
-		},
-		hasSigners() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers.length > 0
-		},
-		isPartialSigned() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers
-				.filter(signer => signer.signed?.length > 0).length > 0
-		},
-		isFullSigned() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers.length > 0
-				&& this.files[this.selectedNodeId].signers
-					.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
-		},
-		getSubtitle() {
-			if (this.selectedNodeId === 0) {
-				return ''
+export const useFilesStore = function(...args) {
+	const store = defineStore('files', {
+		state: () => {
+			return {
+				files: {},
+				selectedNodeId: 0,
+				identifyingSigner: false,
+				loading: false,
+				canRequestSign: loadState('libresign', 'can_request_sign', false),
+				ordered: [],
+				paginationNextUrl: '',
+				loadedAll: false,
 			}
-			const file = this.files[this.selectedNodeId]
-			if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
-				return ''
-			}
-			return t('libresign', 'Requested by {name}, at {date}', {
-				name: file.requested_by.userId,
-				date: Moment(Date.parse(file.request_date)).format('LL LTS'),
-			})
 		},
-		async hydrateFile(nodeId) {
-			if (Object.hasOwn(this.files[nodeId], 'uuid')) {
-				return
-			}
-			await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
-				fileId: nodeId,
-			}))
-				.then((response) => {
-					set(this.files, nodeId, response.data.ocs.data)
-					this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+
+		actions: {
+			addFile(file) {
+				set(this.files, file.nodeId, file)
+				this.hydrateFile(file.nodeId)
+				if (!this.ordered.includes(file.nodeId)) {
+					this.ordered.push(file.nodeId)
+				}
+			},
+			selectFile(nodeId) {
+				this.selectedNodeId = nodeId ?? 0
+				if (this.selectedNodeId === 0) {
+					const signStore = useSignStore()
+					signStore.reset()
+					return
+				}
+				const sidebarStore = useSidebarStore()
+				sidebarStore.activeRequestSignatureTab()
+			},
+			getFile(file) {
+				if (typeof file === 'object') {
+					return file
+				}
+				return this.files[this.selectedNodeId] ?? {}
+			},
+			async flushSelectedFile() {
+				const files = await this.getAllFiles({
+					nodeId: this.selectedNodeId,
 				})
-				.catch(() => {
-					set(this.files[nodeId], 'signers', [])
+				this.addFile(files[this.selectedNodeId])
+			},
+			enableIdentifySigner() {
+				this.identifyingSigner = true
+			},
+			disableIdentifySigner() {
+				this.identifyingSigner = false
+			},
+			hasSigners(file) {
+				file = this.getFile(file)
+				if (this.selectedNodeId === 0) {
+					return false
+				}
+				if (!Object.hasOwn(file, 'signers')) {
+					return false
+				}
+				return file.signers.length > 0
+			},
+			isPartialSigned(file) {
+				file = this.getFile(file)
+				if (!Object.hasOwn(file, 'signers')) {
+					return false
+				}
+				return file.signers
+					.filter(signer => signer.signed?.length > 0).length > 0
+			},
+			isFullSigned(file) {
+				file = this.getFile(file)
+				if (!Object.hasOwn(file, 'signers')) {
+					return false
+				}
+				return file.signers.length > 0
+					&& file.signers
+						.filter(signer => signer.signed?.length > 0).length === file.signers.length
+			},
+			canSign(file) {
+				file = this.getFile(file)
+				return !this.isFullSigned(file)
+					&& file.status > 0
+					&& file?.signers?.filter(signer => signer.me).length > 0
+					&& file?.signers?.filter(signer => signer.me)
+						.filter(signer => signer.signed?.length > 0).length === 0
+			},
+			canValidate(file) {
+				file = this.getFile(file)
+				return this.isPartialSigned(file)
+					|| this.isFullSigned(file)
+			},
+			canDelete(file) {
+				file = this.getFile(file)
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
+					)
+			},
+			canAddSigner(file) {
+				file = this.getFile(file)
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
+					)
+					&& !this.isPartialSigned(file)
+					&& !this.isFullSigned(file)
+			},
+			canSave(file) {
+				file = this.getFile(file)
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
+					)
+					&& !this.isPartialSigned(file)
+					&& !this.isFullSigned(file)
+					&& file?.signers?.length > 0
+			},
+			getSubtitle() {
+				if (this.selectedNodeId === 0) {
+					return ''
+				}
+				const file = this.getFile()
+				if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
+					return ''
+				}
+				return t('libresign', 'Requested by {name}, at {date}', {
+					name: file.requested_by.userId,
+					date: Moment(Date.parse(file.request_date)).format('LL LTS'),
 				})
-		},
-		addUniqueIdentifierToAllSigners(signers) {
-			if (signers === undefined) {
-				return
-			}
-			signers.map(signer => this.addIdentifierToSigner(signer))
-		},
-		addIdentifierToSigner(signer) {
-			// generate unique code to new signer to be possible delete or edit
-			if ((signer.identify === undefined || signer.identify === '') && signer.signRequestId === undefined) {
-				signer.identify = btoa(JSON.stringify(signer))
-			}
-			if (signer.signRequestId) {
-				signer.identify = signer.signRequestId
-			}
-		},
-		signerUpdate(signer) {
-			this.addIdentifierToSigner(signer)
-			// Remove if already exists
-			for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
-				if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
-					this.files[this.selectedNodeId].signers.splice(i, 1)
-					break
-				}
-				if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
-					this.files[this.selectedNodeId].signers.splice(i, 1)
-					break
+			},
+			async hydrateFile(nodeId) {
+				if (Object.hasOwn(this.files[nodeId], 'uuid')) {
+					return
 				}
-			}
-			this.files[this.selectedNodeId].signers.push(signer)
-		},
-		async deleteSigner(signer) {
-			if (!isNaN(signer.signRequestId)) {
-				await axios.delete(generateOcsUrl('/apps/libresign/api/{apiVersion}/sign/file_id/{fileId}/{signRequestId}', {
-					apiVersion: 'v1',
-					fileId: this.selectedNodeId,
-					signRequestId: signer.signRequestId,
+				await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
+					fileId: nodeId,
 				}))
-			}
-			set(
-				this.files[this.selectedNodeId],
-				'signers',
-				this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
-			)
-		},
-		async getAllFiles(filter) {
-			const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-			this.files = {}
-			response.data.ocs.data.data.forEach(file => {
-				this.addFile(file)
-			})
-			return this.files
-		},
-		filter(type) {
-			this.filterActive = type
-			if (type === 'pending') {
-				return Object.values(this.files).filter(
-					(a) => (a.status === 1 || a.status === 2)).sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
-			if (type === 'signed') {
-				return Object.values(this.files).filter(
-					(a) => (a.status === 3)).sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
-			if (type === 'all') {
-				this.filterActive = 'all'
-				return Object.values(this.files).sort((a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
+					.then((response) => {
+						set(this.files, nodeId, response.data.ocs.data)
+						this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+					})
+					.catch(() => {
+						set(this.files[nodeId], 'signers', [])
+					})
+			},
+			addUniqueIdentifierToAllSigners(signers) {
+				if (signers === undefined) {
+					return
+				}
+				signers.map(signer => this.addIdentifierToSigner(signer))
+			},
+			addIdentifierToSigner(signer) {
+				// generate unique code to new signer to be possible delete or edit
+				if ((signer.identify === undefined || signer.identify === '') && signer.signRequestId === undefined) {
+					signer.identify = btoa(JSON.stringify(signer))
+				}
+				if (signer.signRequestId) {
+					signer.identify = signer.signRequestId
+				}
+			},
+			signerUpdate(signer) {
+				this.addIdentifierToSigner(signer)
+				// Remove if already exists
+				for (let i = this.getFile().signers.length - 1; i >= 0; i--) {
+					if (this.getFile().signers[i].identify === signer.identify) {
+						this.getFile().signers.splice(i, 1)
+						break
+					}
+					if (this.getFile().signers[i].signRequestId === signer.identify) {
+						this.getFile().signers.splice(i, 1)
+						break
+					}
+				}
+				this.getFile().signers.push(signer)
+			},
+			async deleteSigner(signer) {
+				if (!isNaN(signer.signRequestId)) {
+					await axios.delete(generateOcsUrl('/apps/libresign/api/{apiVersion}/sign/file_id/{fileId}/{signRequestId}', {
+						apiVersion: 'v1',
+						fileId: this.selectedNodeId,
+						signRequestId: signer.signRequestId,
+					}))
+				}
+				set(
+					this.files[this.selectedNodeId],
+					'signers',
+					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
+				)
+			},
+			async delete(file, deleteFile) {
+				file = this.getFile(file)
+				if (file?.uuid !== undefined) {
+					const url = deleteFile
+						? '/apps/libresign/api/v1/file/file_id/{fileId}'
+						: '/apps/libresign/api/v1/sign/file_id/{fileId}'
+					await axios.delete(generateOcsUrl(url, {
+						fileId: file.nodeId,
+					}))
+				}
+				del(this.files, file.nodeId)
+
+				const index = this.ordered.indexOf(file.nodeId)
+				if (index > -1) {
+					this.ordered.splice(index, 1)
+				}
+			},
+			async getAllFiles(filter) {
+				if (this.loading || this.loadedAll) {
+					return this.files
+				}
+				this.loading = true
+				const url = !this.paginationNextUrl
+					? generateOcsUrl('/apps/libresign/api/v1/file/list')
+					: this.paginationNextUrl
+
+				const urlObj = new URL(url)
+				const params = new URLSearchParams(urlObj.search)
+
+				if (filter) {
+					for (const [key, value] of Object.entries(filter)) {
+						params.set(key, value)
+					}
+				}
+				const { chips } = useFiltersStore()
+				if (chips?.status) {
+					chips.status.forEach(status => {
+						params.append('status[]', status.id)
+					})
+				}
+				if (chips?.modified?.length) {
+					const { start, end } = chips.modified[0]
+					params.set('start', Math.floor(start / 1000))
+					params.set('end', Math.floor(end / 1000))
+				}
+				const { sortingMode, sortingDirection } = useFilesSortingStore()
+				if (sortingMode) {
+					params.set('sortBy', sortingMode)
+				}
+				if (sortingDirection) {
+					params.set('sortDirection', sortingDirection)
+				}
+
+				urlObj.search = params.toString()
+
+				const response = await axios.get(urlObj.toString())
+
+				if (!this.paginationNextUrl) {
+					this.files = {}
+					this.ordered = []
+				}
+				this.paginationNextUrl = response.data.ocs.data.pagination.next
+				this.loadedAll = !this.paginationNextUrl
+				response.data.ocs.data.data.forEach((file) => {
+					this.addFile(file)
+				})
+				this.loading = false
+				emit('libresign:files:updated')
+				return this.files
+			},
+			async updateAllFiles() {
+				this.paginationNextUrl = null
+				this.loadedAll = false
+				return this.getAllFiles()
+			},
+			filesSorted() {
+				return this.ordered.map(key => this.files[key])
+			},
 		},
-	},
-})
+	})
+
+	const filesStore = store(...args)
+
+	// Make sure we only register the listeners once
+	if (!filesStore._initialized) {
+		subscribe('libresign:filters:update', filesStore.updateAllFiles)
+		subscribe('libresign:sorting:update', filesStore.updateAllFiles)
+		filesStore._initialized = true
+	}
+
+	return filesStore
+}
diff --git a/src/store/filesSorting.js b/src/store/filesSorting.js
new file mode 100644
index 0000000000..7e89b66170
--- /dev/null
+++ b/src/store/filesSorting.js
@@ -0,0 +1,36 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+import { emit } from '@nextcloud/event-bus'
+
+const DEFAULT_SORTING_DIRECTION = 'asc'
+
+export const useFilesSortingStore = defineStore('filesSorting', {
+	state: () => ({
+		sortingMode: 'name',
+		sortingDirection: DEFAULT_SORTING_DIRECTION,
+	}),
+
+	actions: {
+		toggleSortingDirection() {
+			this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc'
+			emit('libresign:sorting:update')
+		},
+
+		toggleSortBy(key) {
+			// If we're already sorting by this key, flip the direction
+			if (this.sortingMode === key) {
+				this.toggleSortingDirection()
+				return
+			}
+			// else sort ASC by this new key
+			this.sortingMode = key
+			this.sortingDirection = DEFAULT_SORTING_DIRECTION
+			emit('libresign:sorting:update')
+		},
+	},
+})
diff --git a/src/store/filters.js b/src/store/filters.js
new file mode 100644
index 0000000000..750d1f694b
--- /dev/null
+++ b/src/store/filters.js
@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+import { emit } from '@nextcloud/event-bus'
+
+import logger from '../helpers/logger.js'
+
+export const useFiltersStore = defineStore('filter', {
+	state: () => ({
+		chips: {},
+	}),
+
+	getters: {
+		activeChips(state) {
+			return Object.values(state.chips).flat()
+		},
+	},
+
+	actions: {
+		onFilterUpdateChips(event) {
+			this.chips = { ...this.chips, [event.id]: [...event.detail] }
+			emit('libresign:filters:update')
+			logger.debug('File list filter chips updated', { chips: event.detail })
+		},
+	},
+})
diff --git a/src/store/userconfig.js b/src/store/userconfig.js
new file mode 100644
index 0000000000..7e70f4808f
--- /dev/null
+++ b/src/store/userconfig.js
@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { set } from 'vue'
+
+export const useUserConfigStore = defineStore('userconfig', {
+	state: () => ({
+		grid_view: true,
+	}),
+	actions: {
+		async update(key, value) {
+			set(this, key, value)
+		},
+	},
+})
diff --git a/src/types/openapi/openapi-full.ts b/src/types/openapi/openapi-full.ts
index 64966b8c1c..769b00c353 100644
--- a/src/types/openapi/openapi-full.ts
+++ b/src/types/openapi/openapi-full.ts
@@ -153,6 +153,26 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Sign page to authenticated signer
+         * @description The path is used only by frontend
+         */
+        get: operations["page-sign-pdf"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/index.php/apps/libresign/p/sign/{uuid}": {
         parameters: {
             query?: never;
@@ -1419,6 +1439,29 @@ export interface operations {
             };
         };
     };
+    "page-sign-pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Sign request uuid */
+                uuid: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/html": string;
+                };
+            };
+        };
+    };
     "page-sign": {
         parameters: {
             query?: never;
@@ -2453,8 +2496,12 @@ export interface operations {
                 signer_uuid?: string | null;
                 /** @description The nodeId (also called fileId). Is the id of a file at Nextcloud */
                 nodeId?: string | null;
-                /** @description Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
-                status?: number | null;
+                /** @description Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
+                "status[]"?: number[] | null;
+                /** @description Start date of signature request (UNIX timestamp) */
+                start?: number | null;
+                /** @description End date of signature request (UNIX timestamp) */
+                end?: number | null;
             };
             header: {
                 /** @description Required to be true for the API request to pass */
diff --git a/src/types/openapi/openapi.ts b/src/types/openapi/openapi.ts
index 2f1422039c..256118bfd9 100644
--- a/src/types/openapi/openapi.ts
+++ b/src/types/openapi/openapi.ts
@@ -153,6 +153,26 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Sign page to authenticated signer
+         * @description The path is used only by frontend
+         */
+        get: operations["page-sign-pdf"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/index.php/apps/libresign/p/sign/{uuid}": {
         parameters: {
             query?: never;
@@ -1273,6 +1293,29 @@ export interface operations {
             };
         };
     };
+    "page-sign-pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Sign request uuid */
+                uuid: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/html": string;
+                };
+            };
+        };
+    };
     "page-sign": {
         parameters: {
             query?: never;
@@ -2307,8 +2350,12 @@ export interface operations {
                 signer_uuid?: string | null;
                 /** @description The nodeId (also called fileId). Is the id of a file at Nextcloud */
                 nodeId?: string | null;
-                /** @description Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
-                status?: number | null;
+                /** @description Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
+                "status[]"?: number[] | null;
+                /** @description Start date of signature request (UNIX timestamp) */
+                start?: number | null;
+                /** @description End date of signature request (UNIX timestamp) */
+                end?: number | null;
             };
             header: {
                 /** @description Required to be true for the API request to pass */
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
new file mode 100644
index 0000000000..dc7512ba02
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -0,0 +1,72 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row"
+		@contextmenu="onRightClick">
+		<td class="files-list__row-name"
+			@click="openDetailsIfAvailable">
+			<FileEntryPreview :source="source" />
+			<FileEntryName ref="name"
+				:basename="source.name"
+				:extension="'.pdf'" />
+		</td>
+
+		<!-- Status -->
+		<td class="files-list__row-status"
+			@click="openDetailsIfAvailable">
+			<FileEntryStatus :status="source.status"
+				:status-text="source.statusText" />
+		</td>
+
+		<!-- Mtime -->
+		<td :style="mtimeOpacity"
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
+			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
+		</td>
+
+		<!-- Actions -->
+		<FileEntryActions ref="actions"
+			:class="`files-list__row-actions-${source.nodeId}`"
+			:opened.sync="openedMenu"
+			:source="source"
+			:loading="loading" />
+	</tr>
+</template>
+
+<script>
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
+import FileEntryActions from './FileEntryActions.vue'
+import FileEntryName from './FileEntryName.vue'
+import FileEntryPreview from './FileEntryPreview.vue'
+import FileEntryStatus from './FileEntryStatus.vue'
+
+import FileEntryMixin from './FileEntryMixin.js'
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+
+export default {
+	name: 'FileEntry',
+	components: {
+		NcDateTime,
+		FileEntryActions,
+		FileEntryName,
+		FileEntryPreview,
+		FileEntryStatus,
+	},
+	mixins: [
+		FileEntryMixin,
+	],
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
new file mode 100644
index 0000000000..744ab69d55
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -0,0 +1,230 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<td class="files-list__row-actions">
+		<!-- Menu actions -->
+		<NcActions ref="actionsMenu"
+			:force-name="true"
+			type="tertiary"
+			:open.sync="openedMenu"
+			@close="openedMenu = null">
+			<!-- Default actions list-->
+			<NcActionButton v-for="action in visibleMenu"
+				:key="action.id"
+				:ref="`action-${action.id}`"
+				:class="{
+					[`files-list__row-action-${action.id}`]: true,
+				}"
+				:aria-label="action.title"
+				:title="action.title"
+				@click="onActionClick(action)">
+				<template #icon>
+					<NcLoadingIcon v-if="loading === action.id" :size="18" />
+					<NcIconSvgWrapper v-else :svg="action.iconSvgInline" />
+				</template>
+				{{ action.title }}
+			</NcActionButton>
+		</NcActions>
+		<NcDialog v-if="confirmDelete"
+			:name="t('libresign', 'Confirm')"
+			:can-close="!deleting"
+			:open.sync="confirmDelete">
+			{{ t('libresign', 'The signature request will be deleted. Do you confirm this action?') }}
+			<NcCheckboxRadioSwitch :checked.sync="deleteFile" type="switch">
+				{{ t('libresign', 'Also delete the file.') }}
+			</NcCheckboxRadioSwitch>
+			<template #actions>
+				<NcButton type="primary"
+					@click="doDelete()">
+					<template #icon>
+						<NcLoadingIcon v-if="deleting" :size="20" />
+					</template>
+					{{ t('libresign', 'Ok') }}
+				</NcButton>
+				<NcButton type="secondary"
+					@click="confirmDelete = false">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+			</template>
+		</NcDialog>
+	</td>
+</template>
+
+<script>
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+import svgTextBoxCheck from '@mdi/svg/svg/text-box-check.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+import { useSidebarStore } from '../../../store/sidebar.js'
+import { useSignStore } from '../../../store/sign.js'
+
+export default {
+	name: 'FileEntryActions',
+	components: {
+		NcActionButton,
+		NcActions,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDialog,
+		NcIconSvgWrapper,
+		NcLoadingIcon,
+	},
+	props: {
+		opened: {
+			type: Boolean,
+			default: false,
+		},
+		source: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		const sidebarStore = useSidebarStore()
+		const signStore = useSignStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+			sidebarStore,
+			signStore,
+		}
+	},
+	data() {
+		return {
+			enabledMenuActions: [],
+			confirmDelete: false,
+			deleteFile: true,
+			deleting: false,
+		}
+	},
+	computed: {
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
+			},
+		},
+		visibleMenu() {
+			return this.enabledMenuActions.filter(action => this.visibleIf(action))
+		},
+	},
+	mounted() {
+		this.registerAction({
+			id: 'validate',
+			title: t('libresign', 'Validate'),
+			iconSvgInline: svgTextBoxCheck,
+		})
+		this.registerAction({
+			id: 'sign',
+			title: t('libresign', 'Sign'),
+			iconSvgInline: svgSignature,
+		})
+		this.registerAction({
+			id: 'delete',
+			title: t('libresign', 'Delete'),
+			iconSvgInline: svgDelete,
+		})
+	},
+	methods: {
+		visibleIf(action) {
+			const file = this.filesStore.files[this.source.nodeId]
+			let visible = false
+			if (action.id === 'sign') {
+				visible = this.filesStore.canSign(file)
+			} else if (action.id === 'validate') {
+				visible = this.filesStore.canValidate(file)
+			} else if (action.id === 'delete') {
+				visible = this.filesStore.canDelete(file)
+			}
+			return visible
+		},
+		async onActionClick(action) {
+			this.openedMenu = null
+			this.sidebarStore.hideSidebar()
+			if (action.id === 'sign') {
+				const signUuid = this.source.signers
+					.reduce((accumulator, signer) => {
+						if (signer.me) {
+							return signer.sign_uuid
+						}
+						return accumulator
+					}, '')
+				this.signStore.setDocumentToSign(this.source)
+				this.$router.push({
+					name: 'SignPDF',
+					params: {
+						uuid: signUuid,
+					},
+				})
+				this.filesStore.selectFile(this.source.nodeId)
+			} else if (action.id === 'validate') {
+				this.$router.push({
+					name: 'ValidationFile',
+					params: {
+						uuid: this.source.uuid,
+					},
+				})
+			} else if (action.id === 'delete') {
+				this.confirmDelete = true
+			}
+		},
+		registerAction(action) {
+			this.enabledMenuActions = [...this.enabledMenuActions, action]
+		},
+		async doDelete() {
+			this.deleting = true
+			await this.filesStore.delete(this.source, this.deleteFile)
+			this.deleting = false
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+// Allow right click to define the position of the menu
+// only if defined
+main.app-content[style*="mouse-pos-x"] .v-popper__popper {
+	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
+
+	// If the menu is too close to the bottom, we move it up
+	&[data-popper-placement="top"] {
+		// 34px added to align with the top of the cursor
+		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh + 34px), 0px) !important;
+	}
+	// Hide arrow if floating
+	.v-popper__arrow-container {
+		display: none;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
+	.button-vue__text {
+		color: var(--color-primary-element);
+	}
+	.button-vue__icon {
+		color: var(--color-primary-element);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
new file mode 100644
index 0000000000..e810debe8f
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -0,0 +1,72 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row"
+		@contextmenu="onRightClick">
+		<td class="files-list__row-name"
+			@click="openDetailsIfAvailable">
+			<FileEntryPreview :source="source" />
+			<FileEntryName ref="name"
+				:basename="source.name"
+				:extension="'.pdf'" />
+		</td>
+
+		<!-- Status -->
+		<td class="files-list__row-status"
+			@click="openDetailsIfAvailable">
+			<FileEntryStatus :status="source.status"
+				:status-text="source.statusText" />
+		</td>
+
+		<!-- Mtime -->
+		<td :style="mtimeOpacity"
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
+			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
+		</td>
+
+		<!-- Actions -->
+		<FileEntryActions ref="actions"
+			:class="`files-list__row-actions-${source.nodeId}`"
+			:opened.sync="openedMenu"
+			:source="source"
+			:loading="loading" />
+	</tr>
+</template>
+
+<script>
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
+import FileEntryActions from './FileEntryActions.vue'
+import FileEntryName from './FileEntryName.vue'
+import FileEntryPreview from './FileEntryPreview.vue'
+import FileEntryStatus from './FileEntryStatus.vue'
+
+import FileEntryMixin from './FileEntryMixin.js'
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+
+export default {
+	name: 'FileEntryGrid',
+	components: {
+		NcDateTime,
+		FileEntryActions,
+		FileEntryName,
+		FileEntryPreview,
+		FileEntryStatus,
+	},
+	mixins: [
+		FileEntryMixin,
+	],
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryMixin.js b/src/views/FilesList/FileEntry/FileEntryMixin.js
new file mode 100644
index 0000000000..8cbcbd6985
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryMixin.js
@@ -0,0 +1,75 @@
+/**
+ * SPDX-FileCopyrightText: 2021 LibreCode coop and LibreCode contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export default {
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		mtime() {
+			return Date.parse(this?.source?.request_date)
+		},
+
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : 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))`,
+			}
+		},
+	},
+	methods: {
+		// Open the actions menu on right click
+		onRightClick(event) {
+			// If already opened, fallback to default browser
+			if (this.openedMenu) {
+				return
+			}
+
+			// Reset any right menu position potentially set
+			const root = this.$el?.closest('main.app-content')
+			root.style.removeProperty('--mouse-pos-x')
+			root.style.removeProperty('--mouse-pos-y')
+
+			this.actionsMenuStore.opened = this.source.nodeId
+
+			// Prevent any browser defaults
+			event.preventDefault()
+			event.stopPropagation()
+		},
+
+		openDetailsIfAvailable(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			this.filesStore.selectFile(this.source.nodeId)
+		},
+	},
+}
diff --git a/src/views/FilesList/FileEntry/FileEntryName.vue b/src/views/FilesList/FileEntry/FileEntryName.vue
new file mode 100644
index 0000000000..bb2ddc4baa
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryName.vue
@@ -0,0 +1,74 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<component :is="linkTo.is"
+		ref="basename"
+		class="files-list__row-name-link"
+		v-bind="linkTo.params"
+		dir="auto">
+		<!-- Filename -->
+		<span class="files-list__row-name-text">
+			<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
+			<span class="files-list__row-name-" v-text="basename" />
+			<span class="files-list__row-name-ext" v-text="extension" />
+		</span>
+	</component>
+</template>
+
+<script>
+
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+export default {
+	name: 'FileEntryName',
+
+	components: {
+		NcTextField,
+	},
+
+	props: {
+		/**
+		 * The filename without extension
+		 */
+		basename: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * The extension of the filename
+		 */
+		extension: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		linkTo() {
+			return {
+				is: 'button',
+				params: {
+					'aria-label': this.basename,
+					title: this.basename,
+					tabindex: '0',
+				},
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+button.files-list__row-name-link {
+	background-color: unset;
+	border: none;
+	font-weight: normal;
+
+	&:active {
+		// No active styles - handled by the row entry
+		background-color: unset !important;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileEntry/FileEntryPreview.vue b/src/views/FilesList/FileEntry/FileEntryPreview.vue
new file mode 100644
index 0000000000..d9774d7820
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryPreview.vue
@@ -0,0 +1,90 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<span class="files-list__row-icon">
+		<!-- Decorative images, should not be aria documented -->
+		<span v-if="previewUrl" class="files-list__row-icon-preview-container">
+			<img v-if="backgroundFailed !== true"
+				ref="previewImg"
+				alt=""
+				class="files-list__row-icon-preview"
+				:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
+				loading="lazy"
+				:src="previewUrl"
+				@error="backgroundFailed = true"
+				@load="backgroundFailed = false">
+		</span>
+
+		<FileIcon v-else v-once />
+
+		<!-- Favorite icon -->
+		<span v-if="isFavorite" class="files-list__row-icon-favorite">
+			<FavoriteIcon v-once />
+		</span>
+	</span>
+</template>
+
+<script>
+import FileIcon from 'vue-material-design-icons/File.vue'
+
+import { generateUrl, generateOcsUrl } from '@nextcloud/router'
+
+import { useUserConfigStore } from '../../../store/userconfig.js'
+
+export default {
+	name: 'FileEntryPreview',
+
+	components: {
+		FileIcon,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+	setup() {
+		const userConfigStore = useUserConfigStore()
+		return { userConfigStore }
+	},
+	data() {
+		return {
+			backgroundFailed: false,
+		}
+	},
+	computed: {
+		isFavorite() {
+			return this.source?.attributes?.favorite === 1
+		},
+		previewUrl() {
+			if (this.backgroundFailed === true) {
+				return null
+			}
+
+			let previewUrl = ''
+			if (this.source?.uuid?.length > 0) {
+				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
+					nodeId: this.source.nodeId,
+				})
+			} else {
+				previewUrl = window.location.origin + generateUrl('/core/preview?fileId={fileid}', {
+					fileid: this.source.nodeId,
+				})
+			}
+
+			const url = new URL(previewUrl)
+
+			// Request tiny previews
+			url.searchParams.set('x', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('y', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('mimeFallback', 'true')
+
+			// Handle cropping
+			url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
+			return url
+		},
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryStatus.vue b/src/views/FilesList/FileEntry/FileEntryStatus.vue
new file mode 100644
index 0000000000..349a445df1
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryStatus.vue
@@ -0,0 +1,85 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="enDot">
+		<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
+			:title="statusText !== 'none' ? statusText : ''" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FileEntryStatus',
+	props: {
+		statusText: {
+			type: String,
+			required: true,
+			default: 'none',
+		},
+		status: {
+			type: Number,
+			required: true,
+			default: 0,
+		},
+	},
+	methods: {
+		statusToClass(status) {
+			switch (Number(status)) {
+			case 0:
+				return 'no-signers'
+			case 1:
+			case 2:
+				return 'pending'
+			case 3:
+				return 'signed'
+			default:
+				return ''
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.enDot{
+	--dot-size: 10px;
+
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	margin: 5px;
+	max-width: 100%;
+	align-items: center;
+	justify-content: center;
+	cursor: inherit;
+
+	.dot{
+		flex: 1 0 var(--dot-size);
+		height: var(--dot-size);
+		border-radius: 50%;
+		margin-right: 10px;
+		cursor: inherit;
+	}
+
+	.signed{
+		background: #008000;
+	}
+
+	.no-signers{
+		background: #ff0000;
+	}
+
+	.pending {
+		background: #d67335
+	}
+
+	span{
+		font-size: 14px;
+		font-weight: normal;
+		text-align: center;
+		cursor: inherit;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilter.vue b/src/views/FilesList/FileListFilter/FileListFilter.vue
new file mode 100644
index 0000000000..9fe6ecd121
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilter.vue
@@ -0,0 +1,62 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcActions force-menu
+		:type="isActive ? 'secondary' : 'tertiary'"
+		:menu-name="filterName">
+		<template #icon>
+			<slot name="icon" />
+		</template>
+		<slot />
+
+		<template v-if="isActive">
+			<NcActionSeparator />
+			<NcActionButton class="files-list-filter__clear-button"
+				close-after-click
+				@click="$emit('reset-filter')">
+				{{ t('files', 'Clear filter') }}
+			</NcActionButton>
+		</template>
+	</NcActions>
+</template>
+
+<script>
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+
+export default {
+	name: 'FileListFilter',
+	components: {
+		NcActions,
+		NcActionButton,
+		NcActionSeparator,
+	},
+	props: {
+		isActive: {
+			type: Boolean,
+			required: true,
+		},
+		filterName: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list-filter__clear-button :deep(.action-button__text) {
+	color: var(--color-error-text);
+}
+
+:deep(.button-vue) {
+	font-weight: normal !important;
+
+	* {
+		font-weight: normal !important;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
new file mode 100644
index 0000000000..2c6ef22cd3
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -0,0 +1,141 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<FileListFilter :is-active="isActive"
+		:filter-name="t('libresign', 'Modified')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiCalendarRange" />
+		</template>
+		<NcActionButton v-for="preset of timePresets"
+			:key="preset.id"
+			type="radio"
+			close-after-click
+			:model-value.sync="selectedOption"
+			:value="preset.id">
+			{{ preset.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<script>
+import { mdiCalendarRange } from '@mdi/js'
+import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+import FileListFilter from './FileListFilter.vue'
+
+import { useFiltersStore } from '../../../store/filters.js'
+
+const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+const endOfToday = () => (new Date()).setHours(23, 59, 59, 999)
+
+export default {
+	name: 'FileListFilterModified',
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return {
+			// icons used in template
+			mdiCalendarRange,
+			filtersStore,
+		}
+	},
+	data() {
+		return {
+			selectedOption: null,
+			timePresets: [
+				{
+					id: 'today',
+					label: t('libresign', 'Today'),
+					start: startOfToday(),
+					end: endOfToday(),
+				},
+				{
+					id: 'last-7',
+					label: t('libresign', 'Last 7 days'),
+					start: startOfToday() - (7 * 24 * 60 * 60 * 1000),
+					end: endOfToday(),
+				},
+				{
+					id: 'last-30',
+					label: t('libresign', 'Last 30 days'),
+					start: startOfToday() - (30 * 24 * 60 * 60 * 1000),
+					end: endOfToday(),
+				},
+				{
+					id: 'this-year',
+					label: t('libresign', 'This year ({year})', { year: (new Date()).getFullYear() }),
+					start: (new Date(startOfToday())).setMonth(0, 1),
+					end: endOfToday(),
+				},
+				{
+					id: 'last-year',
+					label: t('libresign', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
+					start: (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1),
+					end: (new Date(startOfToday())).setMonth(0, 1),
+				},
+			],
+		}
+	},
+	computed: {
+		isActive() {
+			return this.selectedOption !== null
+		},
+		currentPreset() {
+			return this.timePresets.find(({ id }) => id === this.selectedOption) ?? null
+		},
+	},
+	watch: {
+		selectedOption() {
+			if (this.selectedOption === null) {
+				this.selectedOption = null
+				this.setPreset()
+			} else {
+				this.setPreset(this.currentPreset)
+
+			}
+		},
+	},
+	methods: {
+		setPreset(preset) {
+			const chips = []
+			if (preset) {
+				chips.push({
+					start: preset.start,
+					end: preset.end,
+					icon: calendarSvg,
+					text: preset.label,
+					onclick: () => this.setPreset(),
+				})
+			} else {
+				this.resetFilter()
+			}
+			this.filtersStore.onFilterUpdateChips({ detail: chips, id: 'modified' })
+		},
+		resetFilter() {
+			if (this.selectedOption !== null) {
+				this.selectedOption = null
+				this.timeRangeEnd = null
+				this.timeRangeStart = null
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list-filter-time {
+	&__clear-button :deep(.action-button__text) {
+		color: var(--color-error-text);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
new file mode 100644
index 0000000000..6f6b2c2443
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -0,0 +1,137 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<FileListFilter class="file-list-filter-status"
+		:is-active="isActive"
+		:filter-name="t('libresign', 'Status')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiListStatus" />
+		</template>
+		<NcActionButton v-for="status of statusPresets"
+			:key="status.id"
+			type="checkbox"
+			:model-value="selectedOptions.includes(status)"
+			@click="toggleOption(status)">
+			<template #icon>
+				<NcIconSvgWrapper :svg="status.icon" />
+			</template>
+			{{ status.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<script>
+import { mdiListStatus } from '@mdi/js'
+import svgFile from '@mdi/svg/svg/file.svg?raw'
+import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
+import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+import FileListFilter from './FileListFilter.vue'
+
+import { useFiltersStore } from '../../../store/filters.js'
+
+const colorize = (svg, color) => {
+	return svg.replace('<path ', `<path fill="${color}" `)
+}
+
+export default {
+	name: 'FileListFilterStatus',
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return {
+			mdiListStatus,
+			filtersStore,
+		}
+	},
+	data() {
+		return {
+			selectedOptions: [],
+			statusPresets: [
+				{
+					id: 0,
+					icon: colorize(svgFile, '#E0E0E0'),
+					label: t('libresign', 'draft'),
+				},
+				{
+					id: 1,
+					icon: colorize(svgSignature, '#B2E0B2'),
+					label: t('libresign', 'available for signature'),
+				},
+				{
+					id: 2,
+					icon: colorize(svgFractionOneHalf, '#F0E68C'),
+					label: t('libresign', 'partially signed'),
+				},
+				{
+					id: 3,
+					icon: colorize(svgSignatureFreehand, '#A0C4FF'),
+					label: t('libresign', 'signed'),
+				},
+			],
+		}
+	},
+	computed: {
+		isActive() {
+			return this.selectedOptions.length > 0
+		},
+	},
+	watch: {
+		selectedOptions(newValue, oldValue) {
+			if (newValue.length === 0) {
+				this.setPreset()
+			} else {
+				this.setPreset(newValue)
+			}
+		},
+	},
+	methods: {
+		setPreset(presets) {
+			const chips = []
+			if (presets && presets.length > 0) {
+				for (const preset of presets) {
+					chips.push({
+						id: preset.id,
+						icon: preset.icon,
+						text: preset.label,
+						onclick: () => this.setPreset(presets.filter(({ id }) => id !== preset.id)),
+					})
+				}
+			} else {
+				this.resetFilter()
+			}
+			this.filtersStore.onFilterUpdateChips({ detail: chips, id: 'status' })
+		},
+		resetFilter() {
+			if (this.selectedOptions.length > 0) {
+				this.selectedOptions = []
+			}
+		},
+		toggleOption(option) {
+			const idx = this.selectedOptions.indexOf(option)
+			if (idx !== -1) {
+				this.selectedOptions.splice(idx, 1)
+			} else {
+				this.selectedOptions.push(option)
+			}
+		},
+	},
+}
+</script>
+
+<style>
+.file-list-filter-status {
+	max-width: 220px;
+}
+</style>
diff --git a/src/views/FilesList/FileListFilters.vue b/src/views/FilesList/FileListFilters.vue
new file mode 100644
index 0000000000..4dab95821a
--- /dev/null
+++ b/src/views/FilesList/FileListFilters.vue
@@ -0,0 +1,80 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="file-list-filters">
+		<div class="file-list-filters__filter">
+			<div class="file-list-filters__filter">
+				<FileListFilterModified />
+				<FileListFilterStatus />
+			</div>
+		</div>
+		<ul v-if="filtersStore.activeChips.length > 0" class="file-list-filters__active" :aria-label="t('libresign', 'Active filters')">
+			<li v-for="(chip, index) of filtersStore.activeChips" :key="index">
+				<NcChip :aria-label-close="t('libresign', 'Remove filter')"
+					:icon-svg="chip.icon"
+					:text="chip.text"
+					@close="chip.onclick">
+					<template v-if="chip.user" #icon>
+						<NcAvatar disable-menu
+							:show-user-status="false"
+							:size="24"
+							:user="chip.user" />
+					</template>
+				</NcChip>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
+
+import FileListFilterModified from './FileListFilter/FileListFilterModified.vue'
+import FileListFilterStatus from './FileListFilter/FileListFilterStatus.vue'
+
+import { useFiltersStore } from '../../store/filters.js'
+
+export default {
+	name: 'FileListFilters',
+	components: {
+		NcChip,
+		NcAvatar,
+		FileListFilterModified,
+		FileListFilterStatus,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return { filtersStore }
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.file-list-filters {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	height: 100%;
+	width: 100%;
+
+	&__filter {
+		display: flex;
+		align-items: start;
+		justify-content: start;
+		gap: calc(var(--default-grid-baseline, 4px) * 2);
+
+		> * {
+			flex: 0 1 fit-content;
+		}
+	}
+
+	&__active {
+		display: flex;
+		flex-direction: row;
+		gap: calc(var(--default-grid-baseline, 4px) * 2);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
new file mode 100644
index 0000000000..09b4c92737
--- /dev/null
+++ b/src/views/FilesList/FilesList.vue
@@ -0,0 +1,455 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcAppContent :page-heading="t('libresign', 'Files')">
+		<div class="files-list__header">
+			<NcBreadcrumbs class="files-list__breadcrumbs">
+				<NcBreadcrumb :name="t('libresign', 'Files')"
+					:title="t('libresign', 'Files')"
+					:exact="true"
+					:force-icon-text="true"
+					:to="{ name: 'fileslist' }"
+					:aria-description="t('libresign', 'Files')"
+					:disable-drop="true"
+					@click.native="refresh()">
+					<template #icon>
+						<NcIconSvgWrapper :size="20"
+							:svg="viewIcon" />
+					</template>
+				</NcBreadcrumb>
+				<template #actions>
+					<NcActions :menu-name="t('libresign', 'Request')"
+						:open.sync="openedMenu">
+						<template #icon>
+							<PlusIcon :size="20" />
+						</template>
+						<NcActionButton @click="showModalUploadFromUrl()">
+							<template #icon>
+								<LinkIcon :size="20" />
+							</template>
+							{{ t('libresign', 'Upload from URL') }}
+						</NcActionButton>
+						<NcActionButton @click="showFilePicker = true">
+							<template #icon>
+								<FolderIcon :size="20" />
+							</template>
+							{{ t('libresign', 'Choose from Files') }}
+						</NcActionButton>
+						<NcActionButton @click="uploadFile">
+							<template #icon>
+								<NcLoadingIcon v-if="isUploading" :size="20" />
+								<UploadIcon v-else :size="20" />
+							</template>
+							{{ t('libresign', 'Upload') }}
+						</NcActionButton>
+					</NcActions>
+				</template>
+			</NcBreadcrumbs>
+
+			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
+
+			<NcButton :aria-label="gridViewButtonLabel"
+				:title="gridViewButtonLabel"
+				class="files-list__header-grid-button"
+				type="tertiary"
+				@click="toggleGridView">
+				<template #icon>
+					<ListViewIcon v-if="userConfigStore.grid_view" />
+					<ViewGridIcon v-else />
+				</template>
+			</NcButton>
+		</div>
+		<NcLoadingIcon v-if="loading && !isRefreshing"
+			class="files-list__loading-icon"
+			:size="38"
+			:name="t('libresign', 'Loading …')" />
+		<NcEmptyContent v-else-if="!loading && isEmptyDir"
+			:name="t('libresign', 'There are no documents')"
+			:description="t('libresign', 'Choose the file to request signatures.')">
+			<template #icon>
+				<FolderIcon />
+			</template>
+		</NcEmptyContent>
+		<FilesListVirtual v-else
+			:nodes="dirContentsSorted"
+			:loading="loading" />
+		<FilePicker v-if="showFilePicker"
+			:name="t('libresign', 'Select your file')"
+			:multiselect="false"
+			:buttons="filePickerButtons"
+			:mimetype-filter="['application/pdf']"
+			@close="showFilePicker = false" />
+		<NcDialog v-if="modalUploadFromUrl"
+			:name="t('libresign', 'URL of a PDF file')"
+			:can-close="!loading"
+			@closing="closeModalUploadFromUrl">
+			<NcNoteCard v-for="message in uploadUrlErrors"
+				:key="message"
+				type="error">
+				{{ message }}
+			</NcNoteCard>
+			<NcTextField :label="t('libresign', 'URL of a PDF file')"
+				:value.sync="pdfUrl">
+				<LinkIcon :size="20" />
+			</NcTextField>
+			<template #actions>
+				<NcButton :disabled="!canUploadFronUrl"
+					type="primary"
+					@click="uploadUrl">
+					{{ t('libresign', 'Send') }}
+					<template #icon>
+						<NcLoadingIcon v-if="loading" :size="20" />
+						<CloudUploadIcon v-else :size="20" />
+					</template>
+				</NcButton>
+			</template>
+		</NcDialog>
+	</NcAppContent>
+</template>
+
+<script>
+
+import HomeSvg from '@mdi/svg/svg/home.svg?raw'
+
+import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
+
+import axios from '@nextcloud/axios'
+import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { generateOcsUrl } from '@nextcloud/router'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
+import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+import FilesListVirtual from './FilesListVirtual.vue'
+
+import { filesService } from '../../domains/files/index.js'
+import { useActionsMenuStore } from '../../store/actionsmenu.js'
+import { useFilesStore } from '../../store/files.js'
+import { useSidebarStore } from '../../store/sidebar.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
+const PDF_MIME_TYPE = 'application/pdf'
+
+const loadFileToBase64 = file => {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.readAsDataURL(file)
+		reader.onload = () => resolve(reader.result)
+		reader.onerror = (error) => reject(error)
+	})
+}
+export default {
+	name: 'FilesList',
+	components: {
+		FilePicker,
+		NcDialog,
+		NcNoteCard,
+		NcTextField,
+		CloudUploadIcon,
+		NcAppContent,
+		NcButton,
+		PlusIcon,
+		ListViewIcon,
+		ViewGridIcon,
+		NcLoadingIcon,
+		FolderIcon,
+		UploadIcon,
+		LinkIcon,
+		NcBreadcrumb,
+		NcBreadcrumbs,
+		NcActions,
+		NcActionButton,
+		NcIconSvgWrapper,
+		FilesListVirtual,
+		NcEmptyContent,
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		const sidebarStore = useSidebarStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+			sidebarStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			modalUploadFromUrl: false,
+			showingFilePicker: false,
+			pdfUrl: '',
+			file: {},
+			signers: [],
+			uploadUrlErrors: [],
+			errors: [],
+			isUploading: false,
+			loading: false,
+			dirContentsFiltered: [],
+		}
+	},
+	computed: {
+		filePickerButtons() {
+			return [{
+				label: t('libresign', 'Choose'),
+				callback: (nodes) => this.handleFileChoose(nodes),
+				type: 'primary',
+			}]
+		},
+		canRequest() {
+			return this.signers.length > 0
+		},
+		canUploadFronUrl() {
+			if (this.loading) {
+				return false
+			}
+			try {
+				// eslint-disable-next-line no-new
+				new URL(this.pdfUrl)
+				return true
+			} catch (e) {
+				return false
+			}
+		},
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === 'global'
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? 'global' : null
+			},
+		},
+		showFilePicker: {
+			get() {
+				return this.showingFilePicker
+			},
+			set(state) {
+				this.showingFilePicker = state
+				if (state) {
+					this.openedMenu = false
+				}
+			},
+		},
+		viewIcon() {
+			return HomeSvg
+		},
+		gridViewButtonLabel() {
+			return this.userConfigStore.grid_view
+				? t('libresign', 'Switch to list view')
+				: t('libresign', 'Switch to grid view')
+		},
+		dirContentsSorted() {
+			if (!this.isEmptyDir) {
+				return []
+			}
+			return this.dirContentsFiltered
+		},
+		isEmptyDir() {
+			return this.filesStore.files.size === 0
+		},
+		isRefreshing() {
+			return !this.isEmptyDir
+				&& this.loading
+		},
+	},
+	async created() {
+		await this.filesStore.getAllFiles()
+	},
+	async mounted() {
+		subscribe('libresign:visible-elements-saved', this.closeSidebar)
+		this.filesStore.disableIdentifySigner()
+	},
+	beforeUnmount() {
+		unsubscribe('libresign:visible-elements-saved')
+		this.filesStore.selectFile()
+	},
+	methods: {
+		refresh() {
+			this.filesStore.updateAllFiles()
+		},
+		toggleGridView() {
+			this.userConfigStore.update('grid_view', !this.userConfigStore.grid_view)
+		},
+		closeSidebar() {
+			this.filesStore.selectFile()
+		},
+		showModalUploadFromUrl() {
+			this.actionsMenuStore.opened = false
+			this.modalUploadFromUrl = true
+		},
+		closeModalUploadFromUrl() {
+			this.cleanErrors()
+			this.modalUploadFromUrl = false
+		},
+		cleanErrors() {
+			this.uploadUrlErrors = []
+			this.errors = []
+		},
+		async uploadUrl() {
+			this.loading = true
+			this.cleanErrors()
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					url: this.pdfUrl,
+				},
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.closeModalUploadFromUrl()
+				})
+				.catch(({ response }) => {
+					this.uploadUrlErrors = [response.data.ocs.data.message]
+				})
+			this.loading = false
+		},
+		async upload(file) {
+			try {
+				const { name: original } = file
+
+				const name = original.split('.').slice(0, -1).join('.')
+
+				const data = await loadFileToBase64(file)
+
+				const res = await filesService.uploadFile({ name, file: data })
+
+				this.filesStore.addFile({
+					nodeId: res.id,
+					name: res.name,
+				})
+				this.filesStore.selectFile(res.id)
+				this.cleanErrors()
+			} catch (err) {
+				this.errors = [err.response.data.ocs.data.message]
+			}
+		},
+		uploadFile() {
+			this.loading = true
+			const input = document.createElement('input')
+			input.accept = PDF_MIME_TYPE
+			input.type = 'file'
+
+			input.onchange = async (ev) => {
+				const file = ev.target.files[0]
+
+				if (file) {
+					this.upload(file)
+				}
+
+				input.remove()
+			}
+
+			input.click()
+			this.loading = false
+		},
+		async handleFileChoose(nodes) {
+			const path = nodes[0]?.path
+			if (!path) {
+				return
+			}
+
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					path,
+				},
+				name: path.match(/([^/]*?)(?:\.[^.]*)?$/)[1] ?? '',
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.cleanErrors()
+				})
+				.catch(({ response }) => {
+					this.errors = [response.data.ocs.data.message]
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.app-content {
+	// Virtual list needs to be full height and is scrollable
+	display: flex;
+	overflow: hidden;
+	flex-direction: column;
+	max-height: 100%;
+	position: relative !important;
+}
+
+.files-list__breadcrumbs {
+	// Take as much space as possible
+	flex: 1 1 100% !important;
+	width: 100%;
+	height: 100%;
+	margin-block: 0;
+	margin-inline: 10px;
+	min-width: 0;
+
+	:deep() {
+		a {
+			cursor: pointer !important;
+		}
+	}
+
+	&--with-progress {
+		flex-direction: column !important;
+		align-items: flex-start !important;
+	}
+}
+
+.files-list {
+	&__header {
+		display: flex;
+		align-items: center;
+		// Do not grow or shrink (vertically)
+		flex: 0 0;
+		max-width: 100%;
+		// Align with the navigation toggle icon
+		margin-block: var(--app-navigation-padding, 4px);
+		margin-inline: calc(var(--default-clickable-area, 44px) + 2 * var(--app-navigation-padding, 4px)) var(--app-navigation-padding, 4px);
+
+		>* {
+			// Do not grow or shrink (horizontally)
+			flex: 0 0;
+		}
+	}
+
+	&__refresh-icon {
+		flex: 0 0 var(--default-clickable-area);
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+	}
+
+	&__loading-icon {
+		margin: auto;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
new file mode 100644
index 0000000000..19211678b1
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -0,0 +1,99 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row-head">
+		<!-- Columns display -->
+
+		<!-- Link to file -->
+		<th class="files-list__column files-list__row-name files-list__column--sortable"
+			:aria-sort="ariaSortForMode('basename')">
+			<!-- Icon or preview -->
+			<span class="files-list__row-icon" />
+
+			<!-- Name -->
+			<FilesListTableHeaderButton :name="t('files', 'Name')" mode="name" />
+		</th>
+
+		<!-- Actions -->
+		<th class="files-list__row-actions" />
+
+		<!-- Custom views columns -->
+		<th v-for="column in columns"
+			:key="column.id"
+			:class="classForColumn(column)"
+			:aria-sort="ariaSortForMode(column.id)">
+			<FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" />
+			<span v-else>
+				{{ column.title }}
+			</span>
+		</th>
+	</tr>
+</template>
+
+<script>
+import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
+
+export default {
+	name: 'FilesListTableHeader',
+
+	components: {
+		FilesListTableHeaderButton,
+	},
+
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			isAscSorting: false,
+			sortingMode: 'name',
+			columns: [
+				{
+					title: t('libresign', 'Status'),
+					id: 'status',
+					sort: true,
+				},
+				{
+					title: t('libresign', 'Created at'),
+					id: 'created_at',
+					sort: true,
+				},
+			],
+		}
+	},
+	methods: {
+		ariaSortForMode(mode) {
+			if (this.sortingMode === mode) {
+				return this.isAscSorting ? 'ascending' : 'descending'
+			}
+			return null
+		},
+		classForColumn(column) {
+			return {
+				'files-list__column': true,
+				'files-list__column--sortable': !!column.sort,
+				'files-list__row-column-custom': true,
+				[`files-list__row-${column.id}`]: true,
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__column {
+	user-select: none;
+	// Make sure the cell colors don't apply to column headers
+	color: var(--color-text-maxcontrast) !important;
+
+	&--sortable {
+		cursor: pointer;
+	}
+}
+
+</style>
diff --git a/src/views/FilesList/FilesListTableHeaderButton.vue b/src/views/FilesList/FilesListTableHeaderButton.vue
new file mode 100644
index 0000000000..66f0e3c9da
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeaderButton.vue
@@ -0,0 +1,88 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcButton :class="['files-list__column-sort-button', {
+			'files-list__column-sort-button--active': filesSortingStore.sortingMode === mode,
+			'files-list__column-sort-button--size': filesSortingStore.sortingMode === 'size',
+		}]"
+		:alignment="mode === 'size' ? 'end' : 'start-reverse'"
+		type="tertiary"
+		@click="filesSortingStore.toggleSortBy(mode)">
+		<template #icon>
+			<MenuUp v-if="filesSortingStore.sortingMode !== mode || filesSortingStore.sortingDirection === 'asc'" class="files-list__column-sort-button-icon" />
+			<MenuDown v-else class="files-list__column-sort-button-icon" />
+		</template>
+		<span class="files-list__column-sort-button-text">{{ name }}</span>
+	</NcButton>
+</template>
+
+<script>
+
+import MenuDown from 'vue-material-design-icons/MenuDown.vue'
+import MenuUp from 'vue-material-design-icons/MenuUp.vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+import { useFilesSortingStore } from '../../store/filesSorting.js'
+
+export default {
+	name: 'FilesListTableHeaderButton',
+
+	components: {
+		MenuDown,
+		MenuUp,
+		NcButton,
+	},
+
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		mode: {
+			type: String,
+			required: true,
+		},
+	},
+
+	setup() {
+		const filesSortingStore = useFilesSortingStore()
+		return {
+			filesSortingStore,
+		}
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__column-sort-button {
+	// Compensate for cells margin
+	margin: 0 calc(var(--button-padding, var(--cell-margin)) * -1);
+	min-width: calc(100% - 3 * var(--cell-margin))!important;
+
+	&-text {
+		color: var(--color-text-maxcontrast);
+		font-weight: normal;
+	}
+
+	&-icon {
+		color: var(--color-text-maxcontrast);
+		opacity: 0;
+		transition: opacity var(--animation-quick);
+		inset-inline-start: -10px;
+	}
+
+	&--size &-icon {
+		inset-inline-start: 10px;
+	}
+
+	&--active &-icon,
+	&:hover &-icon,
+	&:focus &-icon,
+	&:active &-icon {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
new file mode 100644
index 0000000000..6d13924bc1
--- /dev/null
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -0,0 +1,529 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry"
+		:loading="loading">
+		<template #filters>
+			<FileListFilters />
+		</template>
+		<template #header>
+			<!-- Table header and sort buttons -->
+			<FilesListTableHeader ref="thead"
+				:nodes="nodes" />
+		</template>
+	</VirtualList>
+</template>
+
+<script>
+import FileEntry from './FileEntry/FileEntry.vue'
+import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
+import FileListFilters from './FileListFilters.vue'
+import FilesListTableHeader from './FilesListTableHeader.vue'
+import VirtualList from './VirtualList.vue'
+
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
+export default {
+	name: 'FilesListVirtual',
+	components: {
+		VirtualList,
+		FileListFilters,
+		FilesListTableHeader,
+		// eslint-disable-next-line vue/no-unused-components
+		FileEntry,
+		// eslint-disable-next-line vue/no-unused-components
+		FileEntryGrid,
+	},
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			FileEntry,
+			FileEntryGrid,
+		}
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list {
+	--row-height: 55px;
+	--cell-margin: 14px;
+
+	--checkbox-padding: calc((var(--row-height) - var(--checkbox-size)) / 2);
+	--checkbox-size: 24px;
+	--clickable-area: var(--default-clickable-area);
+	--icon-preview-size: 32px;
+
+	--fixed-block-start-position: var(--default-clickable-area);
+
+	overflow: auto;
+	height: 100%;
+	will-change: scroll-position;
+
+	&:has(.file-list-filters__active) {
+		--fixed-block-start-position: calc(var(--default-clickable-area) + var(--default-grid-baseline) + var(--clickable-area-small));
+	}
+
+	& :deep() {
+		// Table head, body and footer
+		tbody {
+			will-change: padding;
+			contain: layout paint style;
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			// Necessary for virtual scrolling absolute
+			position: relative;
+
+			/* Hover effect on tbody lines only */
+			tr {
+				contain: strict;
+				&:hover,
+				&:focus {
+					background-color: var(--color-background-dark);
+				}
+			}
+		}
+
+		.files-list__table {
+			display: block;
+
+			&.files-list__table--with-thead-overlay {
+				// Hide the table header below the overlay
+				margin-block-start: calc(-1 * var(--row-height));
+			}
+		}
+
+		.files-list__filters {
+			// Pinned on top when scrolling above table header
+			position: sticky;
+			top: 0;
+			// ensure there is a background to hide the file list on scroll
+			background-color: var(--color-main-background);
+			z-index: 10;
+			// fixed the size
+			padding-inline: var(--row-height) var(--default-grid-baseline, 4px);
+			height: var(--fixed-block-start-position);
+			width: 100%;
+		}
+
+		.files-list__thead,
+		.files-list__tfoot {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			background-color: var(--color-main-background);
+
+		}
+
+		// Table header
+		.files-list__thead {
+			// Pinned on top when scrolling
+			position: sticky;
+			z-index: 10;
+			top: var(--fixed-block-start-position);
+		}
+
+		tr {
+			position: relative;
+			display: flex;
+			align-items: center;
+			width: 100%;
+			user-select: none;
+			border-block-end: 1px solid var(--color-border);
+			box-sizing: border-box;
+			user-select: none;
+			height: var(--row-height);
+		}
+
+		td, th {
+			display: flex;
+			align-items: center;
+			flex: 0 0 auto;
+			justify-content: start;
+			width: var(--row-height);
+			height: var(--row-height);
+			margin: 0;
+			padding: 0;
+			color: var(--color-text-maxcontrast);
+			border: none;
+
+			// Columns should try to add any text
+			// node wrapped in a span. That should help
+			// with the ellipsis on overflow.
+			span {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		.files-list__row-checkbox {
+			justify-content: center;
+
+			.checkbox-radio-switch {
+				display: flex;
+				justify-content: center;
+
+				--icon-size: var(--checkbox-size);
+
+				label.checkbox-radio-switch__label {
+					width: var(--clickable-area);
+					height: var(--clickable-area);
+					margin: 0;
+					padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
+				}
+
+				.checkbox-radio-switch__icon {
+					margin: 0 !important;
+				}
+			}
+		}
+
+		.files-list__row {
+			&:hover, &:focus, &:active, &--active, &--dragover {
+				// WCAG AA compliant
+				background-color: var(--color-background-hover);
+				// text-maxcontrast have been designed to pass WCAG AA over
+				// a white background, we need to adjust then.
+				--color-text-maxcontrast: var(--color-main-text);
+				> * {
+					--color-border: var(--color-border-dark);
+				}
+
+				// Hover state of the row should also change the favorite markers background
+				.favorite-marker-icon svg path {
+					stroke: var(--color-background-hover);
+				}
+			}
+
+			&--dragover * {
+				// Prevent dropping on row children
+				pointer-events: none;
+			}
+		}
+
+		// Entry preview or mime icon
+		.files-list__row-icon {
+			position: relative;
+			display: flex;
+			overflow: visible;
+			align-items: center;
+			// No shrinking or growing allowed
+			flex: 0 0 var(--icon-preview-size);
+			justify-content: center;
+			width: var(--icon-preview-size);
+			height: 100%;
+			// Show same padding as the checkbox right padding for visual balance
+			margin-inline-end: var(--checkbox-padding);
+			color: var(--color-primary-element);
+
+			// Icon is also clickable
+			* {
+				cursor: pointer;
+			}
+
+			& > span {
+				justify-content: flex-start;
+
+				&:not(.files-list__row-icon-favorite) svg {
+					width: var(--icon-preview-size);
+					height: var(--icon-preview-size);
+				}
+
+				// Slightly increase the size of the folder icon
+				&.folder-icon,
+				&.folder-open-icon {
+					margin: -3px;
+					svg {
+						width: calc(var(--icon-preview-size) + 6px);
+						height: calc(var(--icon-preview-size) + 6px);
+					}
+				}
+			}
+
+			&-preview-container {
+				position: relative; // Needed for the blurshash to be positioned correctly
+				overflow: hidden;
+				width: var(--icon-preview-size);
+				height: var(--icon-preview-size);
+				border-radius: var(--border-radius);
+			}
+
+			&-blurhash {
+				position: absolute;
+				inset-block-start: 0;
+				inset-inline-start: 0;
+				height: 100%;
+				width: 100%;
+				object-fit: cover;
+			}
+
+			&-preview {
+				// Center and contain the preview
+				object-fit: contain;
+				object-position: center;
+
+				height: 100%;
+				width: 100%;
+
+				/* Preview not loaded animation effect */
+				&:not(.files-list__row-icon-preview--loaded) {
+					background: var(--color-loading-dark);
+					// animation: preview-gradient-fade 1.2s ease-in-out infinite;
+				}
+			}
+
+			&-favorite {
+				position: absolute;
+				top: 0px;
+				inset-inline-end: -10px;
+			}
+
+			// File and folder overlay
+			&-overlay {
+				position: absolute;
+				max-height: calc(var(--icon-preview-size) * 0.5);
+				max-width: calc(var(--icon-preview-size) * 0.5);
+				color: var(--color-primary-element-text);
+				// better alignment with the folder icon
+				margin-block-start: 2px;
+
+				// Improve icon contrast with a background for files
+				&--file {
+					color: var(--color-main-text);
+					background: var(--color-main-background);
+					border-radius: 100%;
+				}
+			}
+		}
+
+		// Entry link
+		.files-list__row-name {
+			// Prevent link from overflowing
+			overflow: hidden;
+			// Take as much space as possible
+			flex: 1 1 auto;
+
+			button.files-list__row-name-link {
+				display: flex;
+				align-items: center;
+				text-align: start;
+				// Fill cell height and width
+				width: 100%;
+				height: 100%;
+				// Necessary for flex grow to work
+				min-width: 0;
+				margin: 0;
+				padding: 0;
+
+				// Already added to the inner text, see rule below
+				&:focus-visible {
+					outline: none !important;
+				}
+
+				// Keyboard indicator a11y
+				&:focus .files-list__row-name-text {
+					outline: var(--border-width-input-focused) solid var(--color-main-text) !important;
+					border-radius: var(--border-radius-element);
+				}
+				&:focus:not(:focus-visible) .files-list__row-name-text {
+					outline: none !important;
+				}
+			}
+
+			.files-list__row-name-text {
+				color: var(--color-main-text);
+				// Make some space for the outline
+				padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
+				padding-inline-start: -10px;
+				// Align two name and ext
+				display: inline-flex;
+			}
+
+			.files-list__row-name-ext {
+				color: var(--color-text-maxcontrast);
+				// always show the extension
+				overflow: visible;
+			}
+		}
+
+		.files-list__row-actions {
+			// take as much space as necessary
+			width: auto;
+
+			// Add margin to all cells after the actions
+			& ~ td,
+			& ~ th {
+				margin: 0 var(--cell-margin);
+			}
+
+			button {
+				.button-vue__text {
+					// Remove bold from default button styling
+					font-weight: normal;
+				}
+			}
+		}
+
+		.files-list__row-mtime,
+		.files-list__row-status {
+			color: var(--color-text-maxcontrast);
+		}
+		.files-list__row-status {
+			width: calc(var(--row-height) * 1.5);
+			// Right align content/text
+			justify-content: flex-end;
+		}
+
+		.files-list__row-mtime {
+			width: calc(var(--row-height) * 2);
+		}
+
+		.files-list__row-column-custom {
+			width: calc(var(--row-height) * 2);
+		}
+	}
+
+}
+
+@media screen and (max-width: 512px) {
+	.files-list :deep(.files-list__filters) {
+		// Reduce padding on mobile
+		padding-inline: var(--default-grid-baseline, 4px);
+	}
+}
+
+</style>
+
+<style lang="scss">
+// Grid mode
+tbody.files-list__tbody.files-list__tbody--grid {
+	--half-clickable-area: calc(var(--clickable-area) / 2);
+	--item-padding: 16px;
+	--icon-preview-size: 166px;
+	--name-height: 32px;
+	--mtime-height: 16px;
+	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
+	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
+	--checkbox-padding: 0px;
+
+	display: grid;
+	grid-template-columns: repeat(auto-fill, var(--row-width));
+
+	align-content: center;
+	align-items: center;
+	justify-content: space-around;
+	justify-items: center;
+
+	tr {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: var(--row-width);
+		height: var(--row-height);
+		border: none;
+		border-radius: var(--border-radius-large);
+		padding: var(--item-padding);
+	}
+
+	// Checkbox in the top left
+	.files-list__row-checkbox {
+		position: absolute;
+		z-index: 9;
+		top: calc(var(--item-padding)/2);
+		inset-inline-start: calc(var(--item-padding)/2);
+		overflow: hidden;
+		--checkbox-container-size: 44px;
+		width: var(--checkbox-container-size);
+		height: var(--checkbox-container-size);
+
+		// Add a background to the checkbox so we do not see the image through it.
+		.checkbox-radio-switch__content::after {
+			content: '';
+			width: 16px;
+			height: 16px;
+			position: absolute;
+			inset-inline-start: 50%;
+			margin-inline-start: -8px;
+			z-index: -1;
+			background: var(--color-main-background);
+		}
+	}
+
+	// Star icon in the top right
+	.files-list__row-icon-favorite {
+		position: absolute;
+		top: 0;
+		inset-inline-end: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+
+	.files-list__row-name {
+		display: flex;
+		flex-direction: column;
+		width: var(--icon-preview-size);
+		height: calc(var(--icon-preview-size) + var(--name-height));
+		// Ensure that the name outline is visible.
+		overflow: visible;
+
+		span.files-list__row-icon {
+			width: var(--icon-preview-size);
+			height: var(--icon-preview-size);
+		}
+
+		.files-list__row-name-text {
+			margin: 0;
+			// Ensure that the outline is not too close to the text.
+			margin-inline-start: -4px;
+			padding: 0px 4px;
+		}
+	}
+
+	.files-list__row-status {
+		position: absolute;
+		top: var(--item-padding);
+		inset-inline-end: var(--item-padding);
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+
+	.files-list__row-mtime {
+		width: var(--icon-preview-size);
+		height: var(--mtime-height);
+		font-size: calc(var(--default-font-size) - 4px);
+	}
+
+	.files-list__row-actions {
+		position: absolute;
+		inset-inline-end: calc(var(--half-clickable-area) / 2);
+		inset-block-end: calc(var(--mtime-height) / 2);
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+}
+</style>
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
new file mode 100644
index 0000000000..c9dd46320e
--- /dev/null
+++ b/src/views/FilesList/VirtualList.vue
@@ -0,0 +1,92 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="files-list">
+		<div class="files-list__filters">
+			<slot name="filters" />
+		</div>
+
+		<table class="files-list__table">
+			<!-- Header -->
+			<thead ref="thead" class="files-list__thead">
+				<slot name="header" />
+			</thead>
+			<!-- Body -->
+			<tbody class="files-list__tbody"
+				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
+				data-cy-files-list-tbody>
+				<component :is="dataComponent"
+					v-for="(item) in filesStore.filesSorted()"
+					:key="item.nodeId"
+					:source="item"
+					:loading="loading" />
+			</tbody>
+			<tfoot ref="endOfList" />
+		</table>
+	</div>
+</template>
+
+<script>
+import debounce from 'debounce'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
+export default {
+	name: 'VirtualList',
+	props: {
+		dataComponent: {
+			type: [Object, Function],
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			observer: null,
+		}
+	},
+	mounted() {
+		this.observer = new IntersectionObserver(debounce(([entry]) => {
+			if (entry && entry.isIntersecting) {
+				this.getFilesIfNotLoading()
+			}
+		}, 100, false))
+		subscribe('libresign:files:updated', this.updateObserver)
+	},
+	beforeDestroy() {
+		this.observer.disconnect()
+		unsubscribe('libresign:files:updated')
+	},
+	methods: {
+		getFilesIfNotLoading() {
+			if (this.filesStore.loading) {
+				setTimeout(this.getFilesIfNotLoading, 100)
+			} else {
+				this.filesStore.getAllFiles()
+			}
+		},
+		updateObserver() {
+			const endOfListElement = this.$refs?.endOfList
+			if (!endOfListElement) return
+			this.observer.disconnect()
+			this.observer.observe(endOfListElement)
+		},
+	},
+}
+</script>
diff --git a/src/views/Timeline/Timeline.vue b/src/views/Timeline/Timeline.vue
deleted file mode 100644
index 3a4617e26d..0000000000
--- a/src/views/Timeline/Timeline.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="container-timeline">
-		<div class="content-timeline">
-			<TopBar :sidebar-toggle="true">
-				<template #filter>
-					<div class="filtered">
-						<a :class="filesStore.filterActive === 'all' ? 'allFiles active' : 'allFiles'" @click="changeFilter('all')">
-							{{ t('libresign', 'All Files') }}
-						</a>
-						<a :class="filesStore.filterActive === 'pending' ? 'pending active': 'pending'" @click="changeFilter('pending')">
-							{{ t('libresign', 'Pending') }}
-						</a>
-						<a :class="filesStore.filterActive === 'signed' ? 'signed active' : 'signed'" @click="changeFilter('signed')">
-							{{ t('libresign', 'Signed') }}
-						</a>
-					</div>
-				</template>
-			</TopBar>
-			<ul v-if="emptyContentFile ===false">
-				<File v-for="file in fileList"
-					:key="file.nodeId"
-					:node-id="file.nodeId"
-					:class="{'file-details': true, 'active': file.nodeId === filesStore.file?.file?.nodeId}" />
-			</ul>
-			<NcEmptyContent v-else
-				:name="t('libresign', 'There are no documents')">
-				<template #icon>
-					<FolderIcon />
-				</template>
-			</NcEmptyContent>
-		</div>
-	</div>
-</template>
-
-<script>
-import FolderIcon from 'vue-material-design-icons/Folder.vue'
-
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-
-import File from '../../Components/File/File.vue'
-import TopBar from '../../Components/TopBar/TopBar.vue'
-
-import { useFilesStore } from '../../store/files.js'
-
-export default {
-	name: 'Timeline',
-	components: {
-		TopBar,
-		File,
-		NcEmptyContent,
-		FolderIcon,
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		return { filesStore }
-	},
-	data() {
-		return {
-			loading: false,
-			filesFiltered: [],
-		}
-	},
-	computed: {
-		fileList: {
-			get() {
-				return this.filesFiltered.slice().sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1,
-				)
-			},
-			set(value) {
-				this.filesFiltered = value
-			},
-		},
-		emptyContentFile() {
-			return this.fileList.length <= 0
-		},
-	},
-	async created() {
-		await this.filesStore.getAllFiles()
-		this.changeFilter('all')
-	},
-	methods: {
-		changeFilter(type) {
-			this.fileList = this.filesStore.filter(type)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.container-timeline{
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	flex-direction: row;
-
-	.content-timeline{
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-
-		.filtered {
-			display: flex;
-			justify-content: flex-end;
-			padding: 5px;
-
-			a {
-				padding: 6px;
-				background: rgba(206, 206, 206, 0.3);
-			}
-
-			.signed{
-				border-radius: 0 10px 10px 0;
-			}
-
-			.allFiles{
-				border-radius: 10px 0 0 10px;
-			}
-
-			.active {
-				background: darken(rgba(206, 206, 206, 0.3), 20%)
-			}
-		}
-
-		.active {
-			// WCAG AA compliant
-			background-color: var(--color-background-hover);
-			// text-maxcontrast have been designed to pass WCAG AA over
-			// a white background, we need to adjust then.
-			--color-text-maxcontrast: var(--color-main-text);
-			> * {
-				--color-border: var(--color-border-dark);
-			}
-			& {
-				border-radius: 10px;
-			}
-		}
-
-		ul{
-			display: flex;
-			width: 100%;
-			flex-wrap: wrap;
-		}
-	}
-}
-</style>
diff --git a/tests/integration/features/file/list.feature b/tests/integration/features/file/list.feature
index 5ce67f8f59..8f59a45a16 100644
--- a/tests/integration/features/file/list.feature
+++ b/tests/integration/features/file/list.feature
@@ -75,10 +75,10 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.next    | /file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.prev    | null                       |
-      | (jq).ocs.data.pagination.last    | /file/list?page=3&length=2 |
+      | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.first   | null                       |
     # second page
     When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=2"
@@ -86,19 +86,19 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=2&length=2 |
-      | (jq).ocs.data.pagination.next    | /file/list?page=3&length=2 |
-      | (jq).ocs.data.pagination.prev    | /file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.last    | /file/list?page=3&length=2 |
-      | (jq).ocs.data.pagination.first   | /file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
+      | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
     # last page
-    When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=3"
+    When sending "get" to ocs "/apps/libresign/api/v1/file/list?page=3&length=2"
     Then the response should be a JSON array with the following mandatory values
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=3&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.next    | null                       |
-      | (jq).ocs.data.pagination.prev    | /file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.last    | null                       |
-      | (jq).ocs.data.pagination.first   | /file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
diff --git a/tsconfig.json b/tsconfig.json
index 4176c09e07..3d0d2e6764 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,4 +12,4 @@
 	"vueCompilerOptions": {
 		"target": 2.7,
 	}
-}
\ No newline at end of file
+}
diff --git a/webpack.config.js b/webpack.config.js
index a5aec7fbc6..c00c2aa84f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ const path = require('path')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 const { EsbuildPlugin } = require('esbuild-loader')
 const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = merge(nextcloudWebpackConfig, {
 	entry: {
@@ -70,4 +71,14 @@ module.exports = merge(nextcloudWebpackConfig, {
 		],
 	},
 	cache: true,
+	plugins: [
+		new CopyPlugin({
+			patterns: [
+				{
+					from: 'node_modules/@libresign/vue-pdf-editor/dist/pdf.worker.min.mjs',
+					to: '',
+				},
+			],
+		}),
+	],
 })