From 985b66c64f7a7165564fdc65297b1ff5a1e2bbfc Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 20 Jan 2026 16:41:40 +0100
Subject: [PATCH] feat(files): render filters in top bar

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../FileListFilter/FileListFilter.vue         |  55 ----
 .../FileListFilter/FileListFilterChips.vue    |  45 ++++
 .../FileListFilter/FileListFilterModified.vue | 190 ++++++++------
 .../FileListFilter/FileListFilterToSearch.vue |  26 +-
 .../FileListFilter/FileListFilterType.vue     | 248 ++++++++++--------
 .../FileListFilter/FileListFilters.vue        | 139 ++++++++++
 apps/files/src/components/FileListFilters.vue |  76 ------
 .../files/src/components/FilesListVirtual.vue |  25 +-
 apps/files/src/filters/ModifiedFilter.ts      |  88 +++----
 apps/files/src/filters/SearchFilter.ts        |  47 ----
 apps/files/src/filters/TypeFilter.ts          | 139 +++-------
 apps/files/src/init.ts                        |   2 -
 apps/files/src/shims.d.ts                     |   9 +
 apps/files/src/store/filters.ts               |   8 +-
 apps/files/src/views/FilesList.vue            |   4 +
 .../src/components/FileListFilterAccount.vue  | 155 ++++++-----
 .../src/files_filters/AccountFilter.ts        |  76 +++---
 17 files changed, 681 insertions(+), 651 deletions(-)
 delete mode 100644 apps/files/src/components/FileListFilter/FileListFilter.vue
 create mode 100644 apps/files/src/components/FileListFilter/FileListFilterChips.vue
 create mode 100644 apps/files/src/components/FileListFilter/FileListFilters.vue
 delete mode 100644 apps/files/src/components/FileListFilters.vue
 delete mode 100644 apps/files/src/filters/SearchFilter.ts
 create mode 100644 apps/files/src/shims.d.ts

diff --git a/apps/files/src/components/FileListFilter/FileListFilter.vue b/apps/files/src/components/FileListFilter/FileListFilter.vue
deleted file mode 100644
index 879a95da0ba..00000000000
--- a/apps/files/src/components/FileListFilter/FileListFilter.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<NcActions
-		force-menu
-		:variant="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 setup lang="ts">
-import { t } from '@nextcloud/l10n'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
-import NcActions from '@nextcloud/vue/components/NcActions'
-import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
-
-defineProps<{
-	isActive: boolean
-	filterName: string
-}>()
-
-defineEmits<{
-	(event: 'reset-filter'): void
-}>()
-</script>
-
-<style scoped>
-.files-list-filter__clear-button :deep(.action-button__text) {
-	color: var(--color-text-error, var(--color-error-text));
-}
-
-:deep(.button-vue) {
-	font-weight: normal !important;
-
-	* {
-		font-weight: normal !important;
-	}
-}
-</style>
diff --git a/apps/files/src/components/FileListFilter/FileListFilterChips.vue b/apps/files/src/components/FileListFilter/FileListFilterChips.vue
new file mode 100644
index 00000000000..5ddbbf9866e
--- /dev/null
+++ b/apps/files/src/components/FileListFilter/FileListFilterChips.vue
@@ -0,0 +1,45 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcChip from '@nextcloud/vue/components/NcChip'
+import { useFiltersStore } from '../../store/filters.ts'
+
+const filterStore = useFiltersStore()
+const activeChips = computed(() => filterStore.activeChips)
+</script>
+
+<template>
+	<ul
+		v-if="activeChips.length > 0"
+		:class="$style.fileListFilterChips"
+		:aria-label="t('files', 'Active filters')">
+		<li v-for="(chip, index) of activeChips" :key="index">
+			<NcChip
+				:aria-label-close="t('files', 'Remove filter')"
+				:icon-svg="chip.icon"
+				:text="chip.text"
+				@close="chip.onclick">
+				<template v-if="chip.user" #icon>
+					<NcAvatar
+						disable-menu
+						hide-status
+						:size="24"
+						:user="chip.user" />
+				</template>
+			</NcChip>
+		</li>
+	</ul>
+</template>
+
+<style module>
+.fileListFilterChips {
+	display: flex;
+	gap: var(--default-grid-baseline);
+}
+</style>
diff --git a/apps/files/src/components/FileListFilter/FileListFilterModified.vue b/apps/files/src/components/FileListFilter/FileListFilterModified.vue
index 2066a0912a9..e7d5b6cda13 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterModified.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterModified.vue
@@ -3,100 +3,122 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<FileListFilter
-		:is-active="isActive"
-		:filter-name="t('files', 'Modified')"
-		@reset-filter="resetFilter">
-		<template #icon>
-			<NcIconSvgWrapper :path="mdiCalendarRangeOutline" />
-		</template>
-		<NcActionButton
+	<div>
+		<NcButton
 			v-for="preset of timePresets"
 			:key="preset.id"
-			type="radio"
-			close-after-click
-			:model-value.sync="selectedOption"
-			:value="preset.id">
+			alignment="start"
+			:pressed="preset === selectedOption"
+			variant="tertiary"
+			wide
+			@update:pressed="$event ? (selectedOption = preset) : onReset()">
 			{{ preset.label }}
-		</NcActionButton>
-		<!-- TODO: Custom time range -->
-	</FileListFilter>
+		</NcButton>
+		<NcDateTimePicker
+			v-if="selectedOption?.id === 'custom'"
+			v-model="timeRange"
+			append-to-body
+			:aria-label="t('files', 'Custom date range')"
+			type="date-range" />
+	</div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue'
-import type { ITimePreset } from '../../filters/ModifiedFilter.ts'
+<script setup lang="ts">
+import type { ITimePreset, ModifiedFilter } from '../../filters/ModifiedFilter.ts'
 
-import { mdiCalendarRangeOutline } from '@mdi/js'
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
-import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import FileListFilter from './FileListFilter.vue'
+import { t } from '@nextcloud/l10n'
+import { NcDateTimePicker } from '@nextcloud/vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 
-export default defineComponent({
-	components: {
-		FileListFilter,
-		NcActionButton,
-		NcIconSvgWrapper,
-	},
+const props = defineProps<{
+	filter: ModifiedFilter
+}>()
 
-	props: {
-		timePresets: {
-			type: Array as PropType<ITimePreset[]>,
-			required: true,
-		},
-	},
-
-	setup() {
-		return {
-			// icons used in template
-			mdiCalendarRangeOutline,
+const selectedOption = ref<typeof timePresets[number]>()
+watch(selectedOption, (preset) => {
+	if (selectedOption.value) {
+		if (selectedOption.value.id === 'custom' && !timeRange.value) {
+			timeRange.value = [new Date(startOfLastWeek()), new Date(startOfToday())]
+			selectedOption.value.timeRange = [...timeRange.value]
 		}
-	},
-
-	data() {
-		return {
-			selectedOption: null as string | null,
-			timeRangeEnd: null as number | null,
-			timeRangeStart: null as number | null,
-		}
-	},
-
-	computed: {
-		/**
-		 * Is the filter currently active
-		 */
-		isActive() {
-			return this.selectedOption !== null
-		},
-
-		currentPreset() {
-			return this.timePresets.find(({ id }) => id === this.selectedOption) ?? null
-		},
-	},
-
-	watch: {
-		selectedOption() {
-			if (this.selectedOption === null) {
-				this.$emit('update:preset')
-			} else {
-				const preset = this.currentPreset
-				this.$emit('update:preset', preset)
-			}
-		},
-	},
-
-	methods: {
-		t,
-
-		resetFilter() {
-			this.selectedOption = null
-			this.timeRangeEnd = null
-			this.timeRangeStart = null
-		},
-	},
+		props.filter.setPreset(selectedOption.value)
+	} else {
+		props.filter.setPreset()
+	}
 })
+
+const timeRange = ref<[Date, Date]>()
+watch(timeRange, () => {
+	if (timeRange.value) {
+		selectedOption.value!.timeRange = [...timeRange.value]
+		props.filter.setPreset(selectedOption.value)
+	}
+})
+
+onMounted(() => {
+	selectedOption.value = props.filter.preset && timePresets.find((f) => f.id === props.filter.preset!.id)
+	props.filter.addEventListener('reset', onReset)
+})
+onUnmounted(() => {
+	props.filter.removeEventListener('reset', onReset)
+})
+
+/**
+ * Handler for resetting the filter
+ */
+function onReset() {
+	selectedOption.value = undefined
+	timeRange.value = undefined
+}
+</script>
+
+<script lang="ts">
+const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+const startOfLastWeek = () => startOfToday() - (7 * 24 * 60 * 60 * 1000)
+
+/**
+ * Available presets
+ */
+const timePresets = [
+	{
+		id: 'today',
+		label: t('files', 'Today'),
+		filter: (time: number) => time > startOfToday(),
+	} satisfies ITimePreset,
+	{
+		id: 'last-7',
+		label: t('files', 'Last 7 days'),
+		filter: (time: number) => time > startOfLastWeek(),
+	} satisfies ITimePreset,
+	{
+		id: 'last-30',
+		label: t('files', 'Last 30 days'),
+		filter: (time: number) => time > (startOfToday() - (30 * 24 * 60 * 60 * 1000)),
+	} satisfies ITimePreset,
+	{
+		id: 'this-year',
+		label: t('files', 'This year ({year})', { year: (new Date()).getFullYear() }),
+		filter: (time: number) => time > (new Date(startOfToday())).setMonth(0, 1),
+	} satisfies ITimePreset,
+	{
+		id: 'last-year',
+		label: t('files', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
+		filter: (time: number) => (time > (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1)) && (time < (new Date(startOfToday())).setMonth(0, 1)),
+	} satisfies ITimePreset,
+	{
+		id: 'custom',
+		label: t('files', 'Custom range'),
+		timeRange: [new Date(startOfLastWeek()), new Date(startOfToday())],
+		filter(time: number) {
+			if (!this.timeRange) {
+				return true
+			}
+			const timeValue = new Date(time).getTime()
+			return timeValue >= this.timeRange[0].getTime() && timeValue <= this.timeRange[1].getTime()
+		},
+	} satisfies ITimePreset & Record<string, unknown>,
+]
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue b/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue
index 938be171f6d..695f9c8ae76 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue
@@ -4,44 +4,26 @@
 -->
 
 <template>
-	<NcButton v-show="isVisible" @click="onClick">
+	<NcButton v-if="isVisible" size="small" @click="onClick">
 		{{ t('files', 'Search everywhere') }}
 	</NcButton>
 </template>
 
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
-import { ref } from 'vue'
+import { computed } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import { getPinia } from '../../store/index.ts'
 import { useSearchStore } from '../../store/search.ts'
 
-const isVisible = ref(false)
+const searchStore = useSearchStore(getPinia())
 
-defineExpose({
-	hideButton,
-	showButton,
-})
-
-/**
- * Hide the button - called by the filter class
- */
-function hideButton() {
-	isVisible.value = false
-}
-
-/**
- * Show the button - called by the filter class
- */
-function showButton() {
-	isVisible.value = true
-}
+const isVisible = computed(() => searchStore.query.length >= 3 && searchStore.scope === 'filter')
 
 /**
  * Button click handler to make the filtering a global search.
  */
 function onClick() {
-	const searchStore = useSearchStore(getPinia())
 	searchStore.scope = 'globally'
 }
 </script>
diff --git a/apps/files/src/components/FileListFilter/FileListFilterType.vue b/apps/files/src/components/FileListFilter/FileListFilterType.vue
index abc0fa4cd1d..3e4803e5b1f 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterType.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterType.vue
@@ -3,124 +3,164 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<FileListFilter
-		class="file-list-filter-type"
-		:is-active="isActive"
-		:filter-name="t('files', 'Type')"
-		@reset-filter="resetFilter">
-		<template #icon>
-			<NcIconSvgWrapper :path="mdiFileOutline" />
-		</template>
-		<NcActionButton
+	<div :class="$style.fileListFilterType">
+		<NcButton
 			v-for="fileType of typePresets"
 			:key="fileType.id"
-			type="checkbox"
-			:model-value="selectedOptions.includes(fileType)"
-			@click="toggleOption(fileType)">
+			:pressed="selectedOptions.includes(fileType)"
+			variant="tertiary"
+			alignment="start"
+			wide
+			@update:pressed="toggleOption(fileType, $event)">
 			<template #icon>
 				<NcIconSvgWrapper :svg="fileType.icon" />
 			</template>
 			{{ fileType.label }}
-		</NcActionButton>
-	</FileListFilter>
+		</NcButton>
+	</div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue'
-import type { ITypePreset } from '../../filters/TypeFilter.ts'
+<script setup lang="ts">
+import type { ITypePreset, TypeFilter } from '../../filters/TypeFilter.ts'
 
-import { mdiFileOutline } from '@mdi/js'
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import svgDocument from '@mdi/svg/svg/file-document.svg?raw'
+import svgPDF from '@mdi/svg/svg/file-pdf-box.svg?raw'
+import svgPresentation from '@mdi/svg/svg/file-presentation-box.svg?raw'
+import svgSpreadsheet from '@mdi/svg/svg/file-table-box.svg?raw'
+import svgFolder from '@mdi/svg/svg/folder.svg?raw'
+import svgImage from '@mdi/svg/svg/image.svg?raw'
+import svgMovie from '@mdi/svg/svg/movie.svg?raw'
+import svgAudio from '@mdi/svg/svg/music.svg?raw'
+import { t } from '@nextcloud/l10n'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import FileListFilter from './FileListFilter.vue'
 
-export default defineComponent({
-	name: 'FileListFilterType',
+const props = defineProps<{
+	filter: TypeFilter
+}>()
 
-	components: {
-		FileListFilter,
-		NcActionButton,
-		NcIconSvgWrapper,
-	},
-
-	props: {
-		presets: {
-			type: Array as PropType<ITypePreset[]>,
-			default: () => [],
-		},
-
-		typePresets: {
-			type: Array as PropType<ITypePreset[]>,
-			required: true,
-		},
-	},
-
-	setup() {
-		return {
-			mdiFileOutline,
-			t,
-		}
-	},
-
-	data() {
-		return {
-			selectedOptions: [] as ITypePreset[],
-		}
-	},
-
-	computed: {
-		isActive() {
-			return this.selectedOptions.length > 0
-		},
-	},
-
-	watch: {
-		/** Reset selected options if property is changed */
-		presets() {
-			this.selectedOptions = this.presets ?? []
-		},
-
-		selectedOptions(newValue, oldValue) {
-			if (this.selectedOptions.length === 0) {
-				if (oldValue.length !== 0) {
-					this.$emit('update:presets')
-				}
-			} else {
-				this.$emit('update:presets', this.selectedOptions)
-			}
-		},
-	},
-
-	mounted() {
-		this.selectedOptions = this.presets ?? []
-	},
-
-	methods: {
-		resetFilter() {
-			this.selectedOptions = []
-		},
-
-		/**
-		 * Toggle option from selected option
-		 *
-		 * @param option The option to toggle
-		 */
-		toggleOption(option: ITypePreset) {
-			const idx = this.selectedOptions.indexOf(option)
-			if (idx !== -1) {
-				this.selectedOptions.splice(idx, 1)
-			} else {
-				this.selectedOptions.push(option)
-			}
-		},
-	},
+const selectedOptions = ref<ITypePreset[]>([])
+watch(selectedOptions, () => {
+	props.filter.setPresets([...selectedOptions.value])
 })
+
+onMounted(() => {
+	props.filter.addEventListener('reset', resetFilter)
+	props.filter.addEventListener('deselect', onDeselect)
+	selectedOptions.value = typePresets.filter(({ id }) => props.filter.presets.some((preset) => preset.id === id))
+})
+onUnmounted(() => {
+	props.filter.removeEventListener('reset', resetFilter)
+	props.filter.removeEventListener('deselect', onDeselect)
+})
+
+/**
+ * Handler for reset event from filter
+ */
+function resetFilter() {
+	selectedOptions.value = []
+}
+
+/**
+ * Handle deselect event from filter
+ *
+ * @param event - The custom event
+ */
+function onDeselect(event: CustomEvent<string>) {
+	const option = typePresets.find((preset) => preset.id === event.detail)
+	if (option) {
+		toggleOption(option, false)
+	}
+}
+
+/**
+ * Toggle option from selected option
+ *
+ * @param option The option to toggle
+ * @param selected Whether the option is selected or not
+ */
+function toggleOption(option: ITypePreset, selected: boolean) {
+	selectedOptions.value = selectedOptions.value.filter((o) => o.id !== option.id)
+
+	if (selected) {
+		selectedOptions.value.push(option)
+	}
+}
 </script>
 
-<style>
-.file-list-filter-type {
-	max-width: 220px;
+<script lang="ts">
+/**
+ * Available presets
+ */
+const typePresets = [
+	{
+		id: 'document',
+		label: t('files', 'Documents'),
+		icon: colorize(svgDocument, '#49abea'),
+		mime: ['x-office/document'],
+	},
+	{
+		id: 'spreadsheet',
+		label: t('files', 'Spreadsheets'),
+		icon: colorize(svgSpreadsheet, '#9abd4e'),
+		mime: ['x-office/spreadsheet'],
+	},
+	{
+		id: 'presentation',
+		label: t('files', 'Presentations'),
+		icon: colorize(svgPresentation, '#f0965f'),
+		mime: ['x-office/presentation'],
+	},
+	{
+		id: 'pdf',
+		label: t('files', 'PDFs'),
+		icon: colorize(svgPDF, '#dc5047'),
+		mime: ['application/pdf'],
+	},
+	{
+		id: 'folder',
+		label: t('files', 'Folders'),
+		icon: colorize(svgFolder, window.getComputedStyle(document.body).getPropertyValue('--color-primary-element')),
+		mime: ['httpd/unix-directory'],
+	},
+	{
+		id: 'audio',
+		label: t('files', 'Audio'),
+		icon: svgAudio,
+		mime: ['audio'],
+	},
+	{
+		id: 'image',
+		// TRANSLATORS: This is for filtering files, e.g. PNG or JPEG, so photos, drawings, or images in general
+		label: t('files', 'Images'),
+		icon: svgImage,
+		mime: ['image'],
+	},
+	{
+		id: 'video',
+		label: t('files', 'Videos'),
+		icon: svgMovie,
+		mime: ['video'],
+	},
+] as ITypePreset[]
+
+/**
+ * Helper to colorize an svg icon
+ *
+ * @param svg - the svg content
+ * @param color - the color to apply
+ */
+function colorize(svg: string, color: string) {
+	return svg.replace('<path ', `<path fill="${color}" `)
+}
+</script>
+
+<style module>
+.fileListFilterType {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	width: 100%;
 }
 </style>
diff --git a/apps/files/src/components/FileListFilter/FileListFilters.vue b/apps/files/src/components/FileListFilter/FileListFilters.vue
new file mode 100644
index 00000000000..82b42a19f93
--- /dev/null
+++ b/apps/files/src/components/FileListFilter/FileListFilters.vue
@@ -0,0 +1,139 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { IFileListFilterWithUi } from '@nextcloud/files'
+
+import { mdiArrowLeft, mdiFilterVariant } from '@mdi/js'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
+import { useFileListWidth } from '../../composables/useFileListWidth.ts'
+import { useFiltersStore } from '../../store/filters.ts'
+
+const filterStore = useFiltersStore()
+const visualFilters = computed(() => filterStore.filtersWithUI)
+const hasActiveFilters = computed(() => filterStore.activeChips.length > 0)
+
+const selectedFilter = ref<IFileListFilterWithUi>()
+
+const { isWide } = useFileListWidth()
+const menuTriggerId = 'file-list-filters-menu-trigger'
+
+const boundary = document.getElementById('app-content-vue')!
+</script>
+
+<template>
+	<div :class="$style.fileListFilters" data-test-id="files-list-filters">
+		<template v-if="isWide">
+			<NcPopover v-for="filter of visualFilters" :key="filter.id" :boundary="boundary">
+				<template #trigger>
+					<NcButton variant="tertiary">
+						<template #icon>
+							<NcIconSvgWrapper :svg="filter.iconSvgInline" />
+						</template>
+						{{ filter.displayName }}
+					</NcButton>
+				</template>
+				<template #default>
+					<div :class="$style.fileListFilters__popoverContainer">
+						<component :is="filter.tagName" :filter.prop="filter" />
+					</div>
+				</template>
+			</NcPopover>
+		</template>
+
+		<NcPopover
+			v-else
+			:boundary="boundary"
+			:popup-role="selectedFilter ? 'dialog' : 'menu'"
+			@update:shown="selectedFilter = undefined">
+			<template #trigger>
+				<NcButton
+					:id="menuTriggerId"
+					:aria-label="t('files', 'Filters')"
+					:pressed="hasActiveFilters"
+					variant="tertiary">
+					<template #icon>
+						<NcIconSvgWrapper :path="mdiFilterVariant" />
+					</template>
+				</NcButton>
+			</template>
+			<template #default>
+				<div v-if="selectedFilter" :class="$style.fileListFilters__popoverFilterView">
+					<NcButton wide variant="tertiary" @click="selectedFilter = undefined">
+						<template #icon>
+							<NcIconSvgWrapper directional :path="mdiArrowLeft" />
+						</template>
+						{{ t('files', 'Back to filters') }}
+					</NcButton>
+					<component :is="selectedFilter.tagName" :filter.prop="selectedFilter" />
+				</div>
+				<template v-else>
+					<ul :class="$style.fileListFilters__popoverContainer" :aria-labelledby="menuTriggerId" role="menu">
+						<li v-for="filter of visualFilters" :key="filter.id" role="presentation">
+							<NcButton
+								role="menuitem"
+								alignment="start"
+								variant="tertiary"
+								wide
+								@click="selectedFilter = filter">
+								<template #icon>
+									<NcIconSvgWrapper :svg="filter.iconSvgInline" />
+								</template>
+								{{ filter.displayName }}
+							</NcButton>
+						</li>
+					</ul>
+				</template>
+			</template>
+		</NcPopover>
+	</div>
+</template>
+
+<style module>
+.fileListFilters {
+	display: flex;
+	flex-direction: row;
+	gap: var(--default-grid-baseline);
+	margin-inline-end: var(--default-grid-baseline);
+	height: 100%;
+	width: 100%;
+}
+
+.fileListFilters__popoverFilterView {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+	padding: calc(var(--default-grid-baseline) / 2);
+	min-width: calc(7 * var(--default-clickable-area));
+}
+
+.fileListFilters__popoverContainer {
+	box-sizing: border-box;
+	padding: calc(var(--default-grid-baseline) / 2);
+	min-width: calc(7 * var(--default-clickable-area));
+}
+
+.fileListFilters__filter {
+	display: flex;
+	align-items: start;
+	justify-content: start;
+	gap: calc(var(--default-grid-baseline, 4px) * 2);
+
+	> * {
+		flex: 0 1 fit-content;
+	}
+}
+
+.fileListFilters__active {
+	display: flex;
+	flex-direction: row;
+	gap: calc(var(--default-grid-baseline, 4px) * 2);
+}
+</style>
diff --git a/apps/files/src/components/FileListFilters.vue b/apps/files/src/components/FileListFilters.vue
deleted file mode 100644
index 0fc6b29d140..00000000000
--- a/apps/files/src/components/FileListFilters.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="file-list-filters">
-		<div class="file-list-filters__filter" data-cy-files-filters>
-			<span
-				v-for="filter of visualFilters"
-				:key="filter.id"
-				ref="filterElements" />
-		</div>
-		<ul v-if="activeChips.length > 0" class="file-list-filters__active" :aria-label="t('files', 'Active filters')">
-			<li v-for="(chip, index) of activeChips" :key="index">
-				<NcChip
-					:aria-label-close="t('files', 'Remove filter')"
-					:icon-svg="chip.icon"
-					:text="chip.text"
-					@close="chip.onclick">
-					<template v-if="chip.user" #icon>
-						<NcAvatar
-							disable-menu
-							hide-status
-							:size="24"
-							:user="chip.user" />
-					</template>
-				</NcChip>
-			</li>
-		</ul>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { t } from '@nextcloud/l10n'
-import { computed, ref, watchEffect } from 'vue'
-import NcAvatar from '@nextcloud/vue/components/NcAvatar'
-import NcChip from '@nextcloud/vue/components/NcChip'
-import { useFiltersStore } from '../store/filters.ts'
-
-const filterStore = useFiltersStore()
-const visualFilters = computed(() => filterStore.filtersWithUI)
-const activeChips = computed(() => filterStore.activeChips)
-
-const filterElements = ref<HTMLElement[]>([])
-watchEffect(() => {
-	filterElements.value
-		.forEach((el, index) => visualFilters.value[index].mount(el))
-})
-</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/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 8f9d1d09012..f642836a2b7 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -17,9 +17,8 @@
 		}"
 		:scroll-to-index="scrollToIndex"
 		:caption="caption">
-		<template #filters>
-			<FileListFilters />
-		</template>
+		<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -- no space allowed as otherwise `:empty` css selector does not trigger! -->
+		<template #filters><FileListFilterToSearch /><FileListFilterChips /></template>
 
 		<template v-if="!isNoneSelected" #header-overlay>
 			<span class="files-list__selected">
@@ -81,7 +80,8 @@ import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 import { computed, defineComponent } from 'vue'
 import FileEntry from './FileEntry.vue'
 import FileEntryGrid from './FileEntryGrid.vue'
-import FileListFilters from './FileListFilters.vue'
+import FileListFilterChips from './FileListFilter/FileListFilterChips.vue'
+import FileListFilterToSearch from './FileListFilter/FileListFilterToSearch.vue'
 import FilesListHeader from './FilesListHeader.vue'
 import FilesListTableFooter from './FilesListTableFooter.vue'
 import FilesListTableHeader from './FilesListTableHeader.vue'
@@ -99,7 +99,8 @@ export default defineComponent({
 	name: 'FilesListVirtual',
 
 	components: {
-		FileListFilters,
+		FileListFilterChips,
+		FileListFilterToSearch,
 		FilesListHeader,
 		FilesListTableFooter,
 		FilesListTableHeader,
@@ -511,15 +512,15 @@ export default defineComponent({
 	--clickable-area: var(--default-clickable-area);
 	--icon-preview-size: 24px;
 
-	--fixed-block-start-position: var(--default-clickable-area);
+	--fixed-block-start-position: calc(var(--clickable-area-small) + var(--default-grid-baseline, 4px));
 	display: flex;
 	flex-direction: column;
 	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));
+	&:has(&__filters:empty) {
+		--fixed-block-start-position: 0px;
 	}
 
 	& :deep() {
@@ -572,6 +573,10 @@ export default defineComponent({
 		}
 
 		.files-list__filters {
+			display: flex;
+			gap: var(--default-grid-baseline);
+			box-sizing: border-box;
+
 			// Pinned on top when scrolling above table header
 			position: sticky;
 			top: 0;
@@ -582,6 +587,10 @@ export default defineComponent({
 			padding-inline: var(--row-height) var(--default-grid-baseline, 4px);
 			height: var(--fixed-block-start-position);
 			width: 100%;
+
+			&:not(:empty) {
+				padding-block: calc(var(--default-grid-baseline, 4px) / 2);
+			}
 		}
 
 		.files-list__thead-overlay {
diff --git a/apps/files/src/filters/ModifiedFilter.ts b/apps/files/src/filters/ModifiedFilter.ts
index e877ccc5be3..e78dacbd37d 100644
--- a/apps/files/src/filters/ModifiedFilter.ts
+++ b/apps/files/src/filters/ModifiedFilter.ts
@@ -2,11 +2,13 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { IFileListFilterChip, INode } from '@nextcloud/files'
 
-import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+import type { IFileListFilterChip, IFileListFilterWithUi, INode } from '@nextcloud/files'
+
+import svgCalendarRangeOutline from '@mdi/svg/svg/calendar-range-outline.svg?raw'
 import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
+import wrap from '@vue/web-component-wrapper'
 import Vue from 'vue'
 import FileListFilterModified from '../components/FileListFilter/FileListFilterModified.vue'
 
@@ -16,63 +18,20 @@ export interface ITimePreset {
 	filter: (time: number) => boolean
 }
 
-const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+const tagName = 'files-file-list-filter-modified'
 
-/**
- * Available presets
- */
-const timePresets: ITimePreset[] = [
-	{
-		id: 'today',
-		label: t('files', 'Today'),
-		filter: (time: number) => time > startOfToday(),
-	},
-	{
-		id: 'last-7',
-		label: t('files', 'Last 7 days'),
-		filter: (time: number) => time > (startOfToday() - (7 * 24 * 60 * 60 * 1000)),
-	},
-	{
-		id: 'last-30',
-		label: t('files', 'Last 30 days'),
-		filter: (time: number) => time > (startOfToday() - (30 * 24 * 60 * 60 * 1000)),
-	},
-	{
-		id: 'this-year',
-		label: t('files', 'This year ({year})', { year: (new Date()).getFullYear() }),
-		filter: (time: number) => time > (new Date(startOfToday())).setMonth(0, 1),
-	},
-	{
-		id: 'last-year',
-		label: t('files', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
-		filter: (time: number) => (time > (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1)) && (time < (new Date(startOfToday())).setMonth(0, 1)),
-	},
-] as const
-
-class ModifiedFilter extends FileListFilter {
+class ModifiedFilter extends FileListFilter implements IFileListFilterWithUi {
 	private currentInstance?: Vue
 	private currentPreset?: ITimePreset
 
+	public readonly displayName = t('files', 'Modified')
+	public readonly iconSvgInline = svgCalendarRangeOutline
+	public readonly tagName = tagName
+
 	constructor() {
 		super('files:modified', 50)
 	}
 
-	public mount(el: HTMLElement) {
-		if (this.currentInstance) {
-			this.currentInstance.$destroy()
-		}
-
-		const View = Vue.extend(FileListFilterModified as never)
-		this.currentInstance = new View({
-			propsData: {
-				timePresets,
-			},
-			el,
-		})
-			.$on('update:preset', this.setPreset.bind(this))
-			.$mount()
-	}
-
 	public filter(nodes: INode[]): INode[] {
 		if (!this.currentPreset) {
 			return nodes
@@ -82,7 +41,11 @@ class ModifiedFilter extends FileListFilter {
 	}
 
 	public reset(): void {
-		this.setPreset()
+		this.dispatchEvent(new CustomEvent('reset'))
+	}
+
+	public get preset() {
+		return this.currentPreset
 	}
 
 	public setPreset(preset?: ITimePreset) {
@@ -92,9 +55,9 @@ class ModifiedFilter extends FileListFilter {
 		const chips: IFileListFilterChip[] = []
 		if (preset) {
 			chips.push({
-				icon: calendarSvg,
+				icon: svgCalendarRangeOutline,
 				text: preset.label,
-				onclick: () => this.setPreset(),
+				onclick: () => this.reset(),
 			})
 		} else {
 			(this.currentInstance as { resetFilter: () => void } | undefined)?.resetFilter()
@@ -103,9 +66,26 @@ class ModifiedFilter extends FileListFilter {
 	}
 }
 
+export type { ModifiedFilter }
+
 /**
  * Register the file list filter by modification date
  */
 export function registerModifiedFilter() {
+	const WrappedComponent = wrap(Vue, FileListFilterModified)
+	// In Vue 2, wrap doesn't support disabling shadow :(
+	// Disable with a hack
+	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', {
+		value() {
+			return this
+		},
+	})
+	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', {
+		get() {
+			return this
+		},
+	})
+
+	customElements.define(tagName, WrappedComponent)
 	registerFileListFilter(new ModifiedFilter())
 }
diff --git a/apps/files/src/filters/SearchFilter.ts b/apps/files/src/filters/SearchFilter.ts
deleted file mode 100644
index e4891c5dfe7..00000000000
--- a/apps/files/src/filters/SearchFilter.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*!
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import type { INode } from '@nextcloud/files'
-import type { ComponentPublicInstance } from 'vue'
-
-import { subscribe } from '@nextcloud/event-bus'
-import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
-import Vue from 'vue'
-import FileListFilterToSearch from '../components/FileListFilter/FileListFilterToSearch.vue'
-
-class SearchFilter extends FileListFilter {
-	private currentInstance?: ComponentPublicInstance<typeof FileListFilterToSearch>
-
-	constructor() {
-		super('files:filter-to-search', 999)
-		subscribe('files:search:updated', ({ query, scope }) => {
-			if (query && scope === 'filter') {
-				this.currentInstance?.showButton()
-			} else {
-				this.currentInstance?.hideButton()
-			}
-		})
-	}
-
-	public mount(el: HTMLElement) {
-		if (this.currentInstance) {
-			this.currentInstance.$destroy()
-		}
-
-		const View = Vue.extend(FileListFilterToSearch)
-		this.currentInstance = new View().$mount(el) as unknown as ComponentPublicInstance<typeof FileListFilterToSearch>
-	}
-
-	public filter(nodes: INode[]): INode[] {
-		return nodes
-	}
-}
-
-/**
- * Register a file list filter to only show hidden files if enabled by user config
- */
-export function registerFilterToSearchToggle() {
-	registerFileListFilter(new SearchFilter())
-}
diff --git a/apps/files/src/filters/TypeFilter.ts b/apps/files/src/filters/TypeFilter.ts
index e06b4d150a3..c258b023b9d 100644
--- a/apps/files/src/filters/TypeFilter.ts
+++ b/apps/files/src/filters/TypeFilter.ts
@@ -2,21 +2,16 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { IFileListFilterChip, INode } from '@nextcloud/files'
 
-// TODO: Create a modern replacement for OC.MimeType...
-import svgDocument from '@mdi/svg/svg/file-document.svg?raw'
-import svgPDF from '@mdi/svg/svg/file-pdf-box.svg?raw'
-import svgPresentation from '@mdi/svg/svg/file-presentation-box.svg?raw'
-import svgSpreadsheet from '@mdi/svg/svg/file-table-box.svg?raw'
-import svgFolder from '@mdi/svg/svg/folder.svg?raw'
-import svgImage from '@mdi/svg/svg/image.svg?raw'
-import svgMovie from '@mdi/svg/svg/movie.svg?raw'
-import svgAudio from '@mdi/svg/svg/music.svg?raw'
+import type { IFileListFilterChip, IFileListFilterWithUi, INode } from '@nextcloud/files'
+
+import svgFileOutline from '@mdi/svg/svg/file-outline.svg?raw'
 import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
+import wrap from '@vue/web-component-wrapper'
 import Vue from 'vue'
 import FileListFilterType from '../components/FileListFilter/FileListFilterType.vue'
+import logger from '../logger.ts'
 
 export interface ITypePreset {
 	id: string
@@ -25,106 +20,21 @@ export interface ITypePreset {
 	mime: string[]
 }
 
-/**
- *
- * @param svg
- * @param color
- */
-function colorize(svg: string, color: string) {
-	return svg.replace('<path ', `<path fill="${color}" `)
-}
+const tagName = 'files-file-list-filter-type'
 
-/**
- * Available presets
- */
-async function getTypePresets() {
-	return [
-		{
-			id: 'document',
-			label: t('files', 'Documents'),
-			icon: colorize(svgDocument, '#49abea'),
-			mime: ['x-office/document'],
-		},
-		{
-			id: 'spreadsheet',
-			label: t('files', 'Spreadsheets'),
-			icon: colorize(svgSpreadsheet, '#9abd4e'),
-			mime: ['x-office/spreadsheet'],
-		},
-		{
-			id: 'presentation',
-			label: t('files', 'Presentations'),
-			icon: colorize(svgPresentation, '#f0965f'),
-			mime: ['x-office/presentation'],
-		},
-		{
-			id: 'pdf',
-			label: t('files', 'PDFs'),
-			icon: colorize(svgPDF, '#dc5047'),
-			mime: ['application/pdf'],
-		},
-		{
-			id: 'folder',
-			label: t('files', 'Folders'),
-			icon: colorize(svgFolder, window.getComputedStyle(document.body).getPropertyValue('--color-primary-element')),
-			mime: ['httpd/unix-directory'],
-		},
-		{
-			id: 'audio',
-			label: t('files', 'Audio'),
-			icon: svgAudio,
-			mime: ['audio'],
-		},
-		{
-			id: 'image',
-			// TRANSLATORS: This is for filtering files, e.g. PNG or JPEG, so photos, drawings, or images in general
-			label: t('files', 'Images'),
-			icon: svgImage,
-			mime: ['image'],
-		},
-		{
-			id: 'video',
-			label: t('files', 'Videos'),
-			icon: svgMovie,
-			mime: ['video'],
-		},
-	] as ITypePreset[]
-}
-
-class TypeFilter extends FileListFilter {
+class TypeFilter extends FileListFilter implements IFileListFilterWithUi {
 	private currentInstance?: Vue
 	private currentPresets: ITypePreset[]
-	private allPresets?: ITypePreset[]
+
+	public readonly displayName = t('files', 'Type')
+	public readonly iconSvgInline = svgFileOutline
+	public readonly tagName = tagName
 
 	constructor() {
 		super('files:type', 10)
 		this.currentPresets = []
 	}
 
-	public async mount(el: HTMLElement) {
-		// We need to defer this as on init script this is not available:
-		if (this.allPresets === undefined) {
-			this.allPresets = await getTypePresets()
-		}
-
-		// Already mounted
-		if (this.currentInstance) {
-			this.currentInstance.$destroy()
-			delete this.currentInstance
-		}
-
-		const View = Vue.extend(FileListFilterType as never)
-		this.currentInstance = new View({
-			propsData: {
-				presets: this.currentPresets,
-				typePresets: this.allPresets!,
-			},
-			el,
-		})
-			.$on('update:presets', this.setPresets.bind(this))
-			.$mount()
-	}
-
 	public filter(nodes: INode[]): INode[] {
 		if (!this.currentPresets || this.currentPresets.length === 0) {
 			return nodes
@@ -149,10 +59,17 @@ class TypeFilter extends FileListFilter {
 	}
 
 	public reset(): void {
-		this.setPresets()
+		// to be listener by the component
+		this.dispatchEvent(new CustomEvent('reset'))
+	}
+
+	public get presets(): ITypePreset[] {
+		return this.currentPresets
 	}
 
 	public setPresets(presets?: ITypePreset[]) {
+		logger.debug('TypeFilter: setting presets', { presets })
+
 		this.currentPresets = presets ?? []
 		if (this.currentInstance !== undefined) {
 			// could be called before the instance was created
@@ -185,13 +102,31 @@ class TypeFilter extends FileListFilter {
 	 */
 	private removeFilterPreset(presetId: string) {
 		const filtered = this.currentPresets.filter(({ id }) => id !== presetId)
+		this.dispatchEvent(new CustomEvent('deselect', { detail: presetId }))
 		this.setPresets(filtered)
 	}
 }
 
+export type { TypeFilter }
+
 /**
  * Register the file list filter by file type
  */
 export function registerTypeFilter() {
+	const WrappedComponent = wrap(Vue, FileListFilterType)
+	// In Vue 2, wrap doesn't support disabling shadow :(
+	// Disable with a hack
+	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', {
+		value() {
+			return this
+		},
+	})
+	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', {
+		get() {
+			return this
+		},
+	})
+
+	window.customElements.define(tagName, WrappedComponent)
 	registerFileListFilter(new TypeFilter())
 }
diff --git a/apps/files/src/init.ts b/apps/files/src/init.ts
index 42876b5c6b2..243fbcf0cb0 100644
--- a/apps/files/src/init.ts
+++ b/apps/files/src/init.ts
@@ -21,7 +21,6 @@ import { action as viewInFolderAction } from './actions/viewInFolderAction.ts'
 import { registerFilenameFilter } from './filters/FilenameFilter.ts'
 import { registerHiddenFilesFilter } from './filters/HiddenFilesFilter.ts'
 import { registerModifiedFilter } from './filters/ModifiedFilter.ts'
-import { registerFilterToSearchToggle } from './filters/SearchFilter.ts'
 import { registerTypeFilter } from './filters/TypeFilter.ts'
 import { entry as newFolderEntry } from './newMenu/newFolder.ts'
 import { registerTemplateEntries } from './newMenu/newFromTemplate.ts'
@@ -68,7 +67,6 @@ registerHiddenFilesFilter()
 registerTypeFilter()
 registerModifiedFilter()
 registerFilenameFilter()
-registerFilterToSearchToggle()
 
 // Register sidebar action
 registerSidebarFavoriteAction()
diff --git a/apps/files/src/shims.d.ts b/apps/files/src/shims.d.ts
new file mode 100644
index 00000000000..acd053e7af9
--- /dev/null
+++ b/apps/files/src/shims.d.ts
@@ -0,0 +1,9 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare module '*.svg?raw' {
+	const content: string
+	export default content
+}
diff --git a/apps/files/src/store/filters.ts b/apps/files/src/store/filters.ts
index b3b9d270482..57bc2740d4c 100644
--- a/apps/files/src/store/filters.ts
+++ b/apps/files/src/store/filters.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { FilterUpdateChipsEvent, IFileListFilter, IFileListFilterChip } from '@nextcloud/files'
+import type { FilterUpdateChipsEvent, IFileListFilter, IFileListFilterChip, IFileListFilterWithUi } from '@nextcloud/files'
 
 import { emit, subscribe } from '@nextcloud/event-bus'
 import { getFileListFilters } from '@nextcloud/files'
@@ -16,8 +16,8 @@ import logger from '../logger.ts'
  *
  * @param value The filter to check
  */
-function isFileListFilterWithUi(value: IFileListFilter): value is Required<IFileListFilter> {
-	return 'mount' in value
+function isFileListFilterWithUi(value: IFileListFilter): value is IFileListFilterWithUi {
+	return 'tagName' in value
 }
 
 export const useFiltersStore = defineStore('filters', () => {
@@ -37,7 +37,7 @@ export const useFiltersStore = defineStore('filters', () => {
 	/**
 	 * All filters that provide a UI for visual controlling the filter state
 	 */
-	const filtersWithUI = computed<Required<IFileListFilter>[]>(() => sortedFilters.value.filter(isFileListFilterWithUi))
+	const filtersWithUI = computed<IFileListFilterWithUi[]>(() => sortedFilters.value.filter(isFileListFilterWithUi))
 
 	/**
 	 * Register a new filter on the store.
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 5c720fe9a8a..94a381d82a6 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -63,6 +63,8 @@
 				</NcActionButton>
 			</NcActions>
 
+			<FileListFilters />
+
 			<NcButton
 				v-if="enableGridView"
 				:aria-label="gridViewButtonLabel"
@@ -194,6 +196,7 @@ import IconReload from 'vue-material-design-icons/Reload.vue'
 import ViewGridIcon from 'vue-material-design-icons/ViewGridOutline.vue'
 import BreadCrumbs from '../components/BreadCrumbs.vue'
 import DragAndDropNotice from '../components/DragAndDropNotice.vue'
+import FileListFilters from '../components/FileListFilter/FileListFilters.vue'
 import FilesListVirtual from '../components/FilesListVirtual.vue'
 import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
@@ -220,6 +223,7 @@ export default defineComponent({
 	components: {
 		BreadCrumbs,
 		DragAndDropNotice,
+		FileListFilters,
 		FilesListVirtual,
 		LinkIcon,
 		ListViewIcon,
diff --git a/apps/files_sharing/src/components/FileListFilterAccount.vue b/apps/files_sharing/src/components/FileListFilterAccount.vue
index 767f50b1c1d..6548ccbd025 100644
--- a/apps/files_sharing/src/components/FileListFilterAccount.vue
+++ b/apps/files_sharing/src/components/FileListFilterAccount.vue
@@ -3,53 +3,45 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<FileListFilter
-		class="file-list-filter-accounts"
-		:is-active="selectedAccounts.length > 0"
-		:filter-name="t('files_sharing', 'People')"
-		@reset-filter="resetFilter">
-		<template #icon>
-			<NcIconSvgWrapper :path="mdiAccountMultipleOutline" />
-		</template>
-		<NcActionInput
+	<div :class="$style.fileListFilterAccount">
+		<NcTextField
 			v-if="availableAccounts.length > 1"
 			v-model="accountFilter"
-			:label="t('files_sharing', 'Filter accounts')"
-			:label-outside="false"
-			:show-trailing-button="false"
-			type="search" />
-		<NcActionButton
+			type="search"
+			:label="t('files_sharing', 'Filter accounts')" />
+		<NcButton
 			v-for="account of shownAccounts"
 			:key="account.id"
-			class="file-list-filter-accounts__item"
-			type="radio"
-			:model-value="selectedAccounts.includes(account)"
-			:value="account.id"
-			@click="toggleAccount(account.id)">
+			alignment="start"
+			:pressed="selectedAccounts.includes(account)"
+			variant="tertiary"
+			wide
+			@update:pressed="toggleAccount(account.id, $event)">
 			<template #icon>
 				<NcAvatar
-					class="file-list-filter-accounts__avatar"
+					:class="$style.fileListFilterAccount__avatar"
 					v-bind="account"
 					:size="24"
 					disable-menu
 					hide-status />
 			</template>
 			{{ account.displayName }}
-		</NcActionButton>
-	</FileListFilter>
+			<span v-if="account.id === currentUserId" :class="$style.fileListFilterAccount__currentUser">
+				({{ t('files', 'you') }})
+			</span>
+		</NcButton>
+	</div>
 </template>
 
 <script setup lang="ts">
-import type { IAccountData } from '../files_filters/AccountFilter.ts'
+import type { AccountFilter, IAccountData } from '../files_filters/AccountFilter.ts'
 
-import { mdiAccountMultipleOutline } from '@mdi/js'
-import { translate as t } from '@nextcloud/l10n'
-import { computed, ref, watch } from 'vue'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
-import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import { t } from '@nextcloud/l10n'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
-import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import FileListFilter from '../../../files/src/components/FileListFilter/FileListFilter.vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import { getCurrentUser } from '../../../../core/src/OC/currentuser.js'
 
 interface IUserSelectData {
 	id: string
@@ -57,48 +49,88 @@ interface IUserSelectData {
 	displayName: string
 }
 
-const emit = defineEmits<{
-	(event: 'update:accounts', value: IAccountData[]): void
+const props = defineProps<{
+	filter: AccountFilter
 }>()
 
+const currentUserId = getCurrentUser()!.uid
+
 const accountFilter = ref('')
 const availableAccounts = ref<IUserSelectData[]>([])
 const selectedAccounts = ref<IUserSelectData[]>([])
+watch(selectedAccounts, () => {
+	const accounts = selectedAccounts.value.map(({ id: uid, displayName }) => ({ uid, displayName }))
+	props.filter.setAccounts(accounts.length > 0 ? accounts : undefined)
+})
+
+onMounted(() => {
+	setAvailableAccounts(props.filter.availableAccounts)
+	selectedAccounts.value = availableAccounts.value.filter(({ id }) => props.filter.filterAccounts?.some(({ uid }) => uid === id)) ?? []
+	props.filter.addEventListener('accounts-updated', setAvailableAccounts)
+	props.filter.addEventListener('reset', resetFilter)
+	props.filter.addEventListener('deselect', deselect)
+})
+onUnmounted(() => {
+	props.filter.removeEventListener('accounts-updated', setAvailableAccounts)
+	props.filter.removeEventListener('reset', resetFilter)
+	props.filter.removeEventListener('deselect', deselect)
+})
 
 /**
  * Currently shown accounts (filtered)
  */
 const shownAccounts = computed(() => {
 	if (!accountFilter.value) {
-		return availableAccounts.value
+		return [...availableAccounts.value].sort(sortAccounts)
 	}
+
 	const queryParts = accountFilter.value.toLocaleLowerCase().trim().split(' ')
-	return availableAccounts.value.filter((account) => queryParts.every((part) => account.user.toLocaleLowerCase().includes(part)
+	const accounts = availableAccounts.value.filter((account) => queryParts.every((part) => account.user.toLocaleLowerCase().includes(part)
 		|| account.displayName.toLocaleLowerCase().includes(part)))
+	return accounts.sort(sortAccounts)
 })
 
+/**
+ * Sort accounts, putting the current user at the begin
+ *
+ * @param a - First account
+ * @param b - Second account
+ */
+function sortAccounts(a: IUserSelectData, b: IUserSelectData) {
+	if (a.id === currentUserId) {
+		return -1
+	}
+	if (b.id === currentUserId) {
+		return 1
+	}
+	return a.displayName.localeCompare(b.displayName)
+}
+
 /**
  * Toggle an account as selected
  *
  * @param accountId The account to toggle
+ * @param selected Whether to select or deselect the account
  */
-function toggleAccount(accountId: string) {
-	const account = availableAccounts.value.find(({ id }) => id === accountId)
-	if (account && selectedAccounts.value.includes(account)) {
-		selectedAccounts.value = selectedAccounts.value.filter(({ id }) => id !== accountId)
-	} else {
+function toggleAccount(accountId: string, selected: boolean) {
+	selectedAccounts.value = selectedAccounts.value.filter(({ id }) => id !== accountId)
+	if (selected) {
+		const account = availableAccounts.value.find(({ id }) => id === accountId)
 		if (account) {
 			selectedAccounts.value = [...selectedAccounts.value, account]
 		}
 	}
 }
 
-// Watch selected account, on change we emit the new account data to the filter instance
-watch(selectedAccounts, () => {
-	// Emit selected accounts as account data
-	const accounts = selectedAccounts.value.map(({ id: uid, displayName }) => ({ uid, displayName }))
-	emit('update:accounts', accounts)
-})
+/**
+ * Deselect an account
+ *
+ * @param event - The custom event
+ */
+function deselect(event: CustomEvent) {
+	const accountId = event.detail as string
+	selectedAccounts.value = selectedAccounts.value.filter(({ id }) => id !== accountId)
+}
 
 /**
  * Reset this filter
@@ -113,26 +145,27 @@ function resetFilter() {
  *
  * @param accounts - Accounts to use
  */
-function setAvailableAccounts(accounts: IAccountData[]): void {
+function setAvailableAccounts(accounts: IAccountData[] | CustomEvent): void {
+	if (accounts instanceof CustomEvent) {
+		accounts = accounts.detail as IAccountData[]
+	}
 	availableAccounts.value = accounts.map(({ uid, displayName }) => ({ displayName, id: uid, user: uid }))
 }
-
-defineExpose({
-	resetFilter,
-	setAvailableAccounts,
-	toggleAccount,
-})
 </script>
 
-<style scoped lang="scss">
-.file-list-filter-accounts {
-	&__item {
-		min-width: 250px;
-	}
+<style module>
+.fileListFilterAccount {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+}
 
-	&__avatar {
-		// 24px is the avatar size
-		margin: calc((var(--default-clickable-area) - 24px) / 2)
-	}
+.fileListFilterAccount__avatar {
+	/* 24px is the avatar size */
+	margin: calc((var(--default-clickable-area) - 24px) / 2);
+}
+
+.fileListFilterAccount__currentUser {
+	font-weight: normal !important;
 }
 </style>
diff --git a/apps/files_sharing/src/files_filters/AccountFilter.ts b/apps/files_sharing/src/files_filters/AccountFilter.ts
index 01a48de4b83..c728c29f0e7 100644
--- a/apps/files_sharing/src/files_filters/AccountFilter.ts
+++ b/apps/files_sharing/src/files_filters/AccountFilter.ts
@@ -3,12 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { IFileListFilterChip, INode } from '@nextcloud/files'
+import type { IFileListFilterChip, IFileListFilterWithUi, INode } from '@nextcloud/files'
 
+import svgAccountMultipleOutline from '@mdi/svg/svg/account-multiple-outline.svg?raw'
 import { subscribe } from '@nextcloud/event-bus'
 import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
 import { ShareType } from '@nextcloud/sharing'
 import { isPublicShare } from '@nextcloud/sharing/public'
+import wrap from '@vue/web-component-wrapper'
 import Vue from 'vue'
 import FileListFilterAccount from '../components/FileListFilterAccount.vue'
 
@@ -21,48 +24,42 @@ export interface IAccountData {
 	displayName: string
 }
 
-type CurrentInstance = Vue & {
-	resetFilter: () => void
-	setAvailableAccounts: (accounts: IAccountData[]) => void
-	toggleAccount: (account: string) => void
-}
+const tagName = 'files_sharing-file-list-filter-account'
 
 /**
  * File list filter to filter by owner / sharee
  */
-class AccountFilter extends FileListFilter {
-	private availableAccounts: IAccountData[]
-	private currentInstance?: CurrentInstance
-	private filterAccounts?: IAccountData[]
+class AccountFilter extends FileListFilter implements IFileListFilterWithUi {
+	#availableAccounts: IAccountData[]
+	#filterAccounts?: IAccountData[]
+
+	public readonly displayName = t('files_sharing', 'People')
+	public readonly iconSvgInline = svgAccountMultipleOutline
+	public readonly tagName = tagName
 
 	constructor() {
 		super('files_sharing:account', 100)
-		this.availableAccounts = []
+		this.#availableAccounts = []
 
 		subscribe('files:list:updated', ({ contents }) => {
 			this.updateAvailableAccounts(contents)
 		})
 	}
 
-	public mount(el: HTMLElement) {
-		if (this.currentInstance) {
-			this.currentInstance.$destroy()
-		}
+	public get availableAccounts() {
+		return this.#availableAccounts
+	}
 
-		const View = Vue.extend(FileListFilterAccount as never)
-		this.currentInstance = new View({ el })
-			.$on('update:accounts', (accounts?: IAccountData[]) => this.setAccounts(accounts))
-			.$mount() as CurrentInstance
-		this.currentInstance
-			.setAvailableAccounts(this.availableAccounts)
+	public get filterAccounts() {
+		return this.#filterAccounts
 	}
 
 	public filter(nodes: INode[]): INode[] {
-		if (!this.filterAccounts || this.filterAccounts.length === 0) {
+		if (!this.#filterAccounts || this.#filterAccounts.length === 0) {
 			return nodes
 		}
 
-		const userIds = this.filterAccounts.map(({ uid }) => uid)
+		const userIds = this.#filterAccounts.map(({ uid }) => uid)
 		// Filter if the owner of the node is in the list of filtered accounts
 		return nodes.filter((node) => {
 			if (window.OCP.Files.Router.params.view === TRASHBIN_VIEW_ID) {
@@ -95,7 +92,7 @@ class AccountFilter extends FileListFilter {
 	}
 
 	public reset(): void {
-		this.currentInstance?.resetFilter()
+		this.dispatchEvent(new CustomEvent('reset'))
 	}
 
 	/**
@@ -104,13 +101,13 @@ class AccountFilter extends FileListFilter {
 	 * @param accounts - Account to filter or undefined if inactive.
 	 */
 	public setAccounts(accounts?: IAccountData[]) {
-		this.filterAccounts = accounts
+		this.#filterAccounts = accounts
 		let chips: IFileListFilterChip[] = []
-		if (this.filterAccounts && this.filterAccounts.length > 0) {
-			chips = this.filterAccounts.map(({ displayName, uid }) => ({
+		if (this.#filterAccounts && this.#filterAccounts.length > 0) {
+			chips = this.#filterAccounts.map(({ displayName, uid }) => ({
 				text: displayName,
 				user: uid,
-				onclick: () => this.currentInstance?.toggleAccount(uid),
+				onclick: () => this.dispatchEvent(new CustomEvent('deselect', { detail: uid })),
 			}))
 		}
 
@@ -164,13 +161,13 @@ class AccountFilter extends FileListFilter {
 			}
 		}
 
-		this.availableAccounts = [...available.values()]
-		if (this.currentInstance) {
-			this.currentInstance.setAvailableAccounts(this.availableAccounts)
-		}
+		this.#availableAccounts = [...available.values()]
+		this.dispatchEvent(new CustomEvent('accounts-updated'))
 	}
 }
 
+export type { AccountFilter }
+
 /**
  * Register the file list filter by owner or sharees
  */
@@ -180,5 +177,20 @@ export function registerAccountFilter() {
 		return
 	}
 
+	const WrappedComponent = wrap(Vue, FileListFilterAccount)
+	// In Vue 2, wrap doesn't support disabling shadow :(
+	// Disable with a hack
+	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', {
+		value() {
+			return this
+		},
+	})
+	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', {
+		get() {
+			return this
+		},
+	})
+
+	customElements.define(tagName, WrappedComponent)
 	registerFileListFilter(new AccountFilter())
 }