diff --git a/apps/files/src/actions/deleteAction.ts b/apps/files/src/actions/deleteAction.ts
index f8b7fdb1ac6..d8ed4d35204 100644
--- a/apps/files/src/actions/deleteAction.ts
+++ b/apps/files/src/actions/deleteAction.ts
@@ -25,8 +25,8 @@ import { translate as t } from '@nextcloud/l10n'
 import axios from '@nextcloud/axios'
 import TrashCan from '@mdi/svg/svg/trash-can.svg?raw'
 
-import { registerFileAction, FileAction } from '../services/FileAction'
-import logger from '../logger'
+import { registerFileAction, FileAction } from '../services/FileAction.ts'
+import logger from '../logger.js'
 
 registerFileAction(new FileAction({
 	id: 'delete',
diff --git a/apps/files/src/components/CustomElementRender.vue b/apps/files/src/components/CustomElementRender.vue
index bb6df3fd854..93cf91f78f3 100644
--- a/apps/files/src/components/CustomElementRender.vue
+++ b/apps/files/src/components/CustomElementRender.vue
@@ -24,6 +24,12 @@
 </template>
 
 <script>
+/**
+ * This component is used to render custom
+ * elements provided by an API. Vue doesn't allow
+ * to directly render an HTMLElement, so we can do
+ * this magic here.
+ */
 export default {
 	name: 'CustomElementRender',
 	props: {
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 33e8438156b..260294e1a36 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -43,9 +43,9 @@
 						class="files-list__row-icon-preview"
 						:style="{ backgroundImage }" />
 
-					<span v-else-if="mimeUrl"
+					<span v-else-if="mimeIconUrl"
 						class="files-list__row-icon-preview files-list__row-icon-preview--mime"
-						:style="{ backgroundImage: mimeUrl }" />
+						:style="{ backgroundImage: mimeIconUrl }" />
 
 					<FileIcon v-else />
 				</span>
@@ -100,7 +100,7 @@
 
 <script lang='ts'>
 import { debounce } from 'debounce'
-import { Folder, File, formatFileSize } from '@nextcloud/files'
+import { formatFileSize } from '@nextcloud/files'
 import { Fragment } from 'vue-fragment'
 import { join } from 'path'
 import { showError } from '@nextcloud/dialogs'
@@ -114,12 +114,11 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Vue from 'vue'
 
-import { isCachedPreview } from '../services/PreviewService'
-import { getFileActions } from '../services/FileAction'
-import { useFilesStore } from '../store/files'
-import { UserConfig } from '../types'
-import { useSelectionStore } from '../store/selection'
-import { useUserConfigStore } from '../store/userconfig'
+import { isCachedPreview } from '../services/PreviewService.ts'
+import { getFileActions } from '../services/FileAction.ts'
+import { useFilesStore } from '../store/files.ts'
+import { useSelectionStore } from '../store/selection.ts'
+import { useUserConfigStore } from '../store/userconfig.ts'
 import CustomElementRender from './CustomElementRender.vue'
 import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
@@ -181,12 +180,10 @@ export default Vue.extend({
 	},
 
 	computed: {
-		/** @return {UserConfig} */
 		userConfig() {
 			return this.userConfigStore.userConfig
 		},
 
-		/** @return {Navigation} */
 		currentView() {
 			return this.$navigation.active
 		},
@@ -272,11 +269,11 @@ export default Vue.extend({
 			}
 		},
 
-		mimeUrl() {
+		mimeIconUrl() {
 			const mimeType = this.source.mime || 'application/octet-stream'
-			const mimeUrl = window.OC?.MimeType?.getIconUrl?.(mimeType)
-			if (mimeUrl) {
-				return `url(${mimeUrl})`
+			const mimeIconUrl = window.OC?.MimeType?.getIconUrl?.(mimeType)
+			if (mimeIconUrl) {
+				return `url(${mimeIconUrl})`
 			}
 			return ''
 		},
@@ -309,7 +306,8 @@ export default Vue.extend({
 				this.resetState()
 
 				// When the row is not active anymore
-				// remove the tabindex from the row
+				// remove the display from the row to prevent
+				// keyboard interaction with it.
 				this.$el.parentNode.style.display = 'none'
 				return
 			}
@@ -376,9 +374,6 @@ export default Vue.extend({
 				this.clearImg()
 			}
 
-			// Ensure max 5 previews are being fetched at the same time
-			const controller = new AbortController()
-
 			// Store the promise to be able to cancel it
 			this.previewPromise = new CancelablePromise((resolve, reject, onCancel) => {
 				const img = new Image()
@@ -400,7 +395,6 @@ export default Vue.extend({
 					img.onerror = null
 					img.onload = null
 					img.src = ''
-					controller.abort()
 				})
 			})
 		},
@@ -413,7 +407,7 @@ export default Vue.extend({
 			this.clearImg()
 
 			// Close menu
-			this.$refs.actionsMenu.closeMenu()
+			this.$refs?.actionsMenu?.closeMenu?.()
 		},
 
 		clearImg() {
diff --git a/apps/files/src/components/FilesListFooter.vue b/apps/files/src/components/FilesListFooter.vue
index 6f2cad358b1..a2b12b5771d 100644
--- a/apps/files/src/components/FilesListFooter.vue
+++ b/apps/files/src/components/FilesListFooter.vue
@@ -56,9 +56,8 @@ import { formatFileSize } from '@nextcloud/files'
 import { translate } from '@nextcloud/l10n'
 import Vue from 'vue'
 
-import Navigation from '../services/Navigation'
-import { useFilesStore } from '../store/files'
-import { usePathsStore } from '../store/paths'
+import { useFilesStore } from '../store/files.ts'
+import { usePathsStore } from '../store/paths.ts'
 
 export default Vue.extend({
 	name: 'FilesListFooter',
diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
index f0af8c531dc..288154e3c91 100644
--- a/apps/files/src/components/FilesListHeader.vue
+++ b/apps/files/src/components/FilesListHeader.vue
@@ -71,13 +71,12 @@ import { translate } from '@nextcloud/l10n'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Vue from 'vue'
 
-import { useFilesStore } from '../store/files'
-import { useSelectionStore } from '../store/selection'
-import { useSortingStore } from '../store/sorting'
+import { useFilesStore } from '../store/files.ts'
+import { useSelectionStore } from '../store/selection.ts'
+import { useSortingStore } from '../store/sorting.ts'
 import FilesListHeaderActions from './FilesListHeaderActions.vue'
 import FilesListHeaderButton from './FilesListHeaderButton.vue'
 import logger from '../logger.js'
-import Navigation from '../services/Navigation'
 
 export default Vue.extend({
 	name: 'FilesListHeader',
@@ -119,7 +118,6 @@ export default Vue.extend({
 	computed: {
 		...mapState(useSortingStore, ['filesSortingConfig']),
 
-		/** @return {Navigation} */
 		currentView() {
 			return this.$navigation.active
 		},
diff --git a/apps/files/src/components/FilesListHeaderActions.vue b/apps/files/src/components/FilesListHeaderActions.vue
index 77302b92d6a..5cf0fdbe373 100644
--- a/apps/files/src/components/FilesListHeaderActions.vue
+++ b/apps/files/src/components/FilesListHeaderActions.vue
@@ -47,9 +47,9 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Vue from 'vue'
 
-import { getFileActions } from '../services/FileAction'
-import { useFilesStore } from '../store/files'
-import { useSelectionStore } from '../store/selection'
+import { getFileActions } from '../services/FileAction.ts'
+import { useFilesStore } from '../store/files.ts'
+import { useSelectionStore } from '../store/selection.ts'
 import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
 
diff --git a/apps/files/src/components/FilesListHeaderButton.vue b/apps/files/src/components/FilesListHeaderButton.vue
index fc9b7330956..3e034bd608d 100644
--- a/apps/files/src/components/FilesListHeaderButton.vue
+++ b/apps/files/src/components/FilesListHeaderButton.vue
@@ -40,7 +40,7 @@ import MenuUp from 'vue-material-design-icons/MenuUp.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Vue from 'vue'
 
-import { useSortingStore } from '../store/sorting'
+import { useSortingStore } from '../store/sorting.ts'
 
 export default Vue.extend({
 	name: 'FilesListHeaderButton',
diff --git a/apps/files/src/components/FilesListNotVirtual.vue b/apps/files/src/components/FilesListNotVirtual.vue
deleted file mode 100644
index edfb2bd820a..00000000000
--- a/apps/files/src/components/FilesListNotVirtual.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
-  -
-  - @author Gary Kim <gary@garykim.dev>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-<template>
-	<table class="files-list">
-		<!-- Accessibility description -->
-		<caption class="hidden-visually">
-			{{ currentView.caption || '' }}
-			{{ t('files', 'This list is not fully rendered for performances reasons. The files will be rendered as you navigate through the list.') }}
-		</caption>
-
-		<!-- Header-->
-		<thead>
-			<FilesListHeader :is-size-available="isSizeAvailable" :nodes="nodes" />
-		</thead>
-
-		<!-- Body-->
-		<tbody class="files-list__body">
-			<tr v-for="item in nodes"
-				:key="item.source"
-				class="files-list__row">
-				<FileEntry :active="true"
-					:is-size-available="isSizeAvailable"
-					:source="item" />
-			</tr>
-		</tbody>
-
-		<!-- Footer-->
-		<tfoot>
-			<FilesListFooter :is-size-available="isSizeAvailable" :nodes="nodes" :summary="summary" />
-		</tfoot>
-	</table>
-</template>
-
-<script lang="ts">
-import { RecycleScroller } from 'vue-virtual-scroller'
-import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
-
-import FileEntry from './FileEntry.vue'
-import FilesListHeader from './FilesListHeader.vue'
-import FilesListFooter from './FilesListFooter.vue'
-
-export default Vue.extend({
-	name: 'FilesListVirtual',
-
-	components: {
-		RecycleScroller,
-		FileEntry,
-		FilesListHeader,
-		FilesListFooter,
-	},
-
-	props: {
-		currentView: {
-			type: Object,
-			required: true,
-		},
-		nodes: {
-			type: Array,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			FileEntry,
-		}
-	},
-	computed: {
-		files() {
-			return this.nodes.filter(node => node.type === 'file')
-		},
-
-		summaryFile() {
-			const count = this.files.length
-			return translatePlural('files', '{count} file', '{count} files', count, { count })
-		},
-		summaryFolder() {
-			const count = this.nodes.length - this.files.length
-			return translatePlural('files', '{count} folder', '{count} folders', count, { count })
-		},
-		summary() {
-			return translate('files', '{summaryFile} and {summaryFolder}', this)
-		},
-		isSizeAvailable() {
-			return this.nodes.some(node => node.attributes.size !== undefined)
-		},
-	},
-
-	methods: {
-		getFileId(node) {
-			return node.attributes.fileid
-		},
-
-		t: translate,
-	},
-})
-</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: 44px;
-	--icon-preview-size: 32px;
-
-	display: block;
-	overflow: auto;
-	height: 100%;
-
-	&::v-deep {
-		// Table head, body and footer
-		tbody, .vue-recycle-scroller__slot {
-			display: flex;
-			flex-direction: column;
-			width: 100%;
-			// Necessary for virtual scrolling absolute
-			position: relative;
-		}
-
-		// Table header
-		.vue-recycle-scroller__slot[role='thead'] {
-			// Pinned on top when scrolling
-			position: sticky;
-			z-index: 10;
-			top: 0;
-			height: var(--row-height);
-			background-color: var(--color-main-background);
-		}
-
-		/**
-		 * Common row styling. tr are handled by
-		 * vue-virtual-scroller, so we need to
-		 * have those rules in here.
-		 */
-		tr {
-			display: flex;
-			align-items: center;
-			width: 100%;
-			border-bottom: 1px solid var(--color-border);
-		}
-	}
-}
-
-</style>
diff --git a/apps/files/src/main.js b/apps/files/src/main.js
index e516275ba28..a8464f0ee0d 100644
--- a/apps/files/src/main.js
+++ b/apps/files/src/main.js
@@ -1,6 +1,6 @@
 import './templates.js'
 import './legacy/filelistSearch.js'
-import './actions/deleteAction'
+import './actions/deleteAction.ts'
 
 import processLegacyFilesViews from './legacy/navigationMapper.js'
 
diff --git a/apps/files/src/store/files.ts b/apps/files/src/store/files.ts
index f90f3bff7bb..f3289378096 100644
--- a/apps/files/src/store/files.ts
+++ b/apps/files/src/store/files.ts
@@ -21,7 +21,7 @@
  */
 /* eslint-disable */
 import type { Folder, Node } from '@nextcloud/files'
-import type { FilesStore, RootsStore, RootOptions, Service, FilesState } from '../types'
+import type { FilesStore, RootsStore, RootOptions, Service, FilesState } from '../types.ts'
 
 import { defineStore } from 'pinia'
 import { subscribe } from '@nextcloud/event-bus'
diff --git a/apps/files/src/store/paths.ts b/apps/files/src/store/paths.ts
index 43027390fe1..b0f9552f606 100644
--- a/apps/files/src/store/paths.ts
+++ b/apps/files/src/store/paths.ts
@@ -20,7 +20,7 @@
  *
  */
 /* eslint-disable */
-import type { PathOptions, ServicesState } from '../types'
+import type { PathOptions, ServicesState } from '../types.ts'
 
 import { defineStore } from 'pinia'
 import Vue from 'vue'
diff --git a/apps/files/src/store/sorting.ts b/apps/files/src/store/sorting.ts
index dc83d100478..6afb6fa97b6 100644
--- a/apps/files/src/store/sorting.ts
+++ b/apps/files/src/store/sorting.ts
@@ -25,7 +25,7 @@ import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 import axios from '@nextcloud/axios'
-import type { direction, SortingStore } from '../types'
+import type { direction, SortingStore } from '../types.ts'
 
 const saveUserConfig = (mode: string, direction: direction, view: string) => {
 	return axios.post(generateUrl('/apps/files/api/v1/sorting'), {
diff --git a/apps/files/src/store/userconfig.ts b/apps/files/src/store/userconfig.ts
index d432b502acf..f771de7cc5c 100644
--- a/apps/files/src/store/userconfig.ts
+++ b/apps/files/src/store/userconfig.ts
@@ -25,9 +25,8 @@ import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
 import Vue from 'vue'
 import axios from '@nextcloud/axios'
-import type { UserConfig, UserConfigStore } from '../types'
+import type { UserConfig, UserConfigStore } from '../types.ts'
 import { emit, subscribe } from '@nextcloud/event-bus'
-import type { update } from 'cypress/types/lodash'
 
 const userConfig = loadState('files', 'config', {
 	show_hidden: false,
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 065749adaf5..c8d539113ce 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -75,11 +75,11 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import TrashCan from 'vue-material-design-icons/TrashCan.vue'
 import Vue from 'vue'
 
-import Navigation, { ContentsWithRoot } from '../services/Navigation'
-import { useFilesStore } from '../store/files'
-import { usePathsStore } from '../store/paths'
-import { useSelectionStore } from '../store/selection'
-import { useSortingStore } from '../store/sorting'
+import Navigation, { ContentsWithRoot } from '../services/Navigation.ts'
+import { useFilesStore } from '../store/files.ts'
+import { usePathsStore } from '../store/paths.ts'
+import { useSelectionStore } from '../store/selection.ts'
+import { useSortingStore } from '../store/sorting.ts'
 import BreadCrumbs from '../components/BreadCrumbs.vue'
 import FilesListVirtual from '../components/FilesListVirtual.vue'
 import logger from '../logger.js'
@@ -276,7 +276,6 @@ export default Vue.extend({
 
 				// If we're in the root dir, define the root
 				if (dir === '/') {
-					console.debug('files', 'Setting root', { service: currentView.id, folder })
 					this.filesStore.setRoot({ service: currentView.id, root: folder })
 				} else
 				// Otherwise, add the folder to the store
diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts
index c8b0f07dea1..d2fe2b31feb 100644
--- a/apps/files/src/views/Navigation.cy.ts
+++ b/apps/files/src/views/Navigation.cy.ts
@@ -3,7 +3,7 @@ import * as L10n from '@nextcloud/l10n'
 import FolderSvg from '@mdi/svg/svg/folder.svg'
 import ShareSvg from '@mdi/svg/svg/share-variant.svg'
 
-import NavigationService from '../services/Navigation'
+import NavigationService from '../services/Navigation.ts'
 import NavigationView from './Navigation.vue'
 import router from '../router/router.js'
 
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index f7b089b61c1..e38f769cd67 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -162,6 +162,7 @@ export default {
 		currentView(view, oldView) {
 			// If undefined, it means we're initializing the view
 			// This is handled by the legacy-view:initialized event
+			// TODO: remove when legacy views are dropped
 			if (view?.id === oldView?.id) {
 				return
 			}
diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue
index b1c544f8ecf..4fab65a5a1c 100644
--- a/apps/files/src/views/Settings.vue
+++ b/apps/files/src/views/Settings.vue
@@ -90,7 +90,7 @@ import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
-import { useUserConfigStore } from '../store/userconfig'
+import { useUserConfigStore } from '../store/userconfig.ts'
 
 export default {
 	name: 'Settings',
diff --git a/apps/files_trashbin/src/actions/restoreAction.ts b/apps/files_trashbin/src/actions/restoreAction.ts
index 0d309a3f3c6..493106953a6 100644
--- a/apps/files_trashbin/src/actions/restoreAction.ts
+++ b/apps/files_trashbin/src/actions/restoreAction.ts
@@ -27,7 +27,8 @@ import { translate as t } from '@nextcloud/l10n'
 import axios from '@nextcloud/axios'
 import History from '@mdi/svg/svg/history.svg?raw'
 
-import { registerFileAction, FileAction } from '../../../files/src/services/FileAction'
+import { registerFileAction, FileAction } from '../../../files/src/services/FileAction.ts'
+import logger from '../../../files/src/logger.js'
 
 registerFileAction(new FileAction({
 	id: 'restore',
@@ -64,7 +65,7 @@ registerFileAction(new FileAction({
 			emit('files:file:deleted', node)
 			return true
 		} catch (error) {
-			console.error(error)
+			logger.error(error)
 			return false
 		}
 	},
diff --git a/apps/files_trashbin/src/css/trashbin.css b/apps/files_trashbin/src/css/trashbin.css
deleted file mode 100644
index 40bbdfb037b..00000000000
--- a/apps/files_trashbin/src/css/trashbin.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.files-list__row-trashbin-deleted {
-	
-}
diff --git a/apps/files_trashbin/src/main.ts b/apps/files_trashbin/src/main.ts
index 118f0ec72ee..aa41f48ab12 100644
--- a/apps/files_trashbin/src/main.ts
+++ b/apps/files_trashbin/src/main.ts
@@ -19,14 +19,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import type NavigationService from '../../files/src/services/Navigation'
-import type { Navigation } from '../../files/src/services/Navigation'
+import type NavigationService from '../../files/src/services/Navigation.ts'
+import type { Navigation } from '../../files/src/services/Navigation.ts'
 
 import { translate as t, translate } from '@nextcloud/l10n'
 import DeleteSvg from '@mdi/svg/svg/delete.svg?raw'
 import moment from '@nextcloud/moment'
 
-import getContents from './services/trashbin'
+import { getContents } from './services/trashbin'
 
 // Register restore action
 import './actions/restoreAction'
diff --git a/apps/files_trashbin/src/services/trashbin.ts b/apps/files_trashbin/src/services/trashbin.ts
index b20911b5b2d..9982750ba5c 100644
--- a/apps/files_trashbin/src/services/trashbin.ts
+++ b/apps/files_trashbin/src/services/trashbin.ts
@@ -25,7 +25,7 @@ import { File, Folder, parseWebdavPermissions } from '@nextcloud/files'
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 
 import type { FileStat, ResponseDataDetailed } from 'webdav'
-import type { ContentsWithRoot } from '../../../files/src/services/Navigation'
+import type { ContentsWithRoot } from '../../../files/src/services/Navigation.ts'
 
 import client, { rootPath } from './client'
 
@@ -78,7 +78,7 @@ const resultToNode = function(node: FileStat): File | Folder {
 		: new Folder(nodeData)
 }
 
-export default async (path: string = '/'): Promise<ContentsWithRoot> => {
+export const getContents =  async (path: string = '/'): Promise<ContentsWithRoot> => {
 	// TODO: use only one request when webdav-client supports it
 	// @see https://github.com/perry-mitchell/webdav-client/pull/334
 	const rootResponse = await client.stat(path, {