From e1b23ddcf00608945fc331bf1957f6dbc31a2690 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 28 Aug 2023 23:36:51 +0200
Subject: [PATCH] feat: Get files app config and use it for the file picker

* Sort favorties first if configured
* Use sorting order like the files app does
* Show hidden files if configured
* Crop file previews if configured

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FileList.spec.ts    |  26 ++--
 lib/components/FilePicker/FileList.vue        | 116 +++++++++-------
 lib/components/FilePicker/FileListRow.spec.ts |   7 -
 lib/components/FilePicker/FilePicker.vue      |   8 ++
 lib/components/FilePicker/FilePreview.vue     |   8 +-
 lib/composables/filesSettings.spec.ts         |  68 ++++++++++
 lib/composables/filesSettings.ts              | 128 ++++++++++++++++++
 lib/composables/filesViews.spec.ts            |  90 ++++++++++++
 package-lock.json                             |   2 +
 package.json                                  |   6 +-
 10 files changed, 391 insertions(+), 68 deletions(-)
 create mode 100644 lib/composables/filesSettings.spec.ts
 create mode 100644 lib/composables/filesSettings.ts
 create mode 100644 lib/composables/filesViews.spec.ts

diff --git a/lib/components/FilePicker/FileList.spec.ts b/lib/components/FilePicker/FileList.spec.ts
index ecac0c865..c550cbcf4 100644
--- a/lib/components/FilePicker/FileList.spec.ts
+++ b/lib/components/FilePicker/FileList.spec.ts
@@ -26,12 +26,10 @@ import { beforeAll, describe, expect, it, vi } from 'vitest'
 import FileList from './FileList.vue'
 import { File, Folder } from '@nextcloud/files'
 
-// mock OC.MimeType
-window.OC = {
-	MimeType: {
-		getIconUrl: (mime: string) => `icon/${mime}`,
-	},
-} as never
+const axios = vi.hoisted(() => ({
+	get: vi.fn(() => new Promise(() => {})),
+}))
+vi.mock('axios', () => axios)
 
 const exampleNodes = [
 	new File({
@@ -81,6 +79,7 @@ describe('FilePicker FileList', () => {
 
 		const wrapper = mount(FileList, {
 			propsData: {
+				currentView: 'files',
 				multiselect: false,
 				allowPickDirectory: false,
 				loading: false,
@@ -98,6 +97,7 @@ describe('FilePicker FileList', () => {
 	it('header checkbox is not shown if multiselect is `false`', () => {
 		const wrapper = mount(FileList, {
 			propsData: {
+				currentView: 'files',
 				multiselect: false,
 				allowPickDirectory: false,
 				loading: false,
@@ -112,6 +112,7 @@ describe('FilePicker FileList', () => {
 	it('header checkbox is shown if multiselect is `true`', () => {
 		const wrapper = mount(FileList, {
 			propsData: {
+				currentView: 'files',
 				multiselect: true,
 				allowPickDirectory: false,
 				loading: false,
@@ -132,6 +133,7 @@ describe('FilePicker FileList', () => {
 		const nodes = [...exampleNodes]
 		const wrapper = mount(FileList, {
 			propsData: {
+				currentView: 'files',
 				multiselect: true,
 				allowPickDirectory: false,
 				loading: false,
@@ -150,6 +152,7 @@ describe('FilePicker FileList', () => {
 			const nodes = [...exampleNodes]
 			const wrapper = mount(FileList, {
 				propsData: {
+					currentView: 'files',
 					multiselect: true,
 					allowPickDirectory: false,
 					loading: false,
@@ -164,16 +167,18 @@ describe('FilePicker FileList', () => {
 			expect(rows.length).toBe(nodes.length)
 			// folder are sorted first
 			expect(rows.at(0).attributes('data-filename')).toBe('directory')
+			// by default favorites are sorted before other files
+			expect(rows.at(1).attributes('data-filename')).toBe('favorite.txt')
 			// other files are ascending
-			expect(rows.at(1).attributes('data-filename')).toBe('a-file.txt')
-			expect(rows.at(2).attributes('data-filename')).toBe('b-file.txt')
-			expect(rows.at(3).attributes('data-filename')).toBe('favorite.txt')
+			expect(rows.at(2).attributes('data-filename')).toBe('a-file.txt')
+			expect(rows.at(3).attributes('data-filename')).toBe('b-file.txt')
 		})
 
 		it('can sort descending by name', async () => {
 			const nodes = [...exampleNodes]
 			const wrapper = mount(FileList, {
 				propsData: {
+					currentView: 'files',
 					multiselect: true,
 					allowPickDirectory: false,
 					loading: false,
@@ -190,8 +195,9 @@ describe('FilePicker FileList', () => {
 			expect(rows.length).toBe(nodes.length)
 			// folder are sorted first
 			expect(rows.at(0).attributes('data-filename')).toBe('directory')
-			// other files are descending
+			// by default favorites are sorted before other files
 			expect(rows.at(1).attributes('data-filename')).toBe('favorite.txt')
+			// other files are descending
 			expect(rows.at(2).attributes('data-filename')).toBe('b-file.txt')
 			expect(rows.at(3).attributes('data-filename')).toBe('a-file.txt')
 		})
diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
index 085cc1a22..928ff9c50 100644
--- a/lib/components/FilePicker/FileList.vue
+++ b/lib/components/FilePicker/FileList.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="file-picker__files" ref="fileContainer">
+	<div ref="fileContainer" class="file-picker__files">
 		<table>
 			<thead>
 				<tr>
-					<th class="row-checkbox" v-if="multiselect">
+					<th v-if="multiselect" class="row-checkbox">
 						<span class="hidden-visually">
 							{{ t('Select entry') }}
 						</span>
@@ -16,11 +16,10 @@
 					<th :aria-sort="sortByName" class="row-name">
 						<div class="header-wrapper">
 							<span class="file-picker__header-preview" />
-							<NcButton
-								:wide="true"
+							<NcButton :wide="true"
 								type="tertiary"
 								data-test="file-picker_sort-name"
-								@click="toggleSortByName">
+								@click="toggleSorting('basename')">
 								<template #icon>
 									<IconSortAscending v-if="sortByName === 'ascending'" :size="20" />
 									<IconSortDescending v-else-if="sortByName === 'descending'" :size="20" />
@@ -31,7 +30,7 @@
 						</div>
 					</th>
 					<th :aria-sort="sortBySize" class="row-size">
-						<NcButton :wide="true" type="tertiary" @click="toggleSortBySize">
+						<NcButton :wide="true" type="tertiary" @click="toggleSorting('size')">
 							<template #icon>
 								<IconSortAscending v-if="sortBySize === 'ascending'" :size="20" />
 								<IconSortDescending v-else-if="sortBySize === 'descending'" :size="20" />
@@ -41,7 +40,7 @@
 						</NcButton>
 					</th>
 					<th :aria-sort="sortByModified" class="row-modified">
-						<NcButton :wide="true" type="tertiary" @click="toggleSortByModified">
+						<NcButton :wide="true" type="tertiary" @click="toggleSorting('mtime')">
 							<template #icon>
 								<IconSortAscending v-if="sortByModified === 'ascending'" :size="20" />
 								<IconSortDescending v-else-if="sortByModified === 'descending'" :size="20" />
@@ -54,7 +53,7 @@
 			</thead>
 			<tbody>
 				<template v-if="loading">
-					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect"/>
+					<LoadingTableRow v-for="index in skeletonNumber" :key="index" :show-checkbox="multiselect" />
 				</template>
 				<template v-else>
 					<FileListRow v-for="file in sortedFiles"
@@ -73,20 +72,24 @@
 </template>
 
 <script setup lang="ts">
-import { FileType, type Node } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
+import type { FileListViews } from '../../composables/filesSettings'
 
+import { FileType } from '@nextcloud/files'
 import { getCanonicalLocale } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { join } from 'path'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useFilesSettings, useFilesViews } from '../../composables/filesSettings'
 import { t } from '../../utils/l10n'
-import { computed, nextTick, onMounted, onUnmounted, ref, type Ref } from 'vue'
 
-import IconSortAscending from 'vue-material-design-icons/MenuDown.vue'
-import IconSortDescending from 'vue-material-design-icons/MenuUp.vue'
+import IconSortAscending from 'vue-material-design-icons/MenuUp.vue'
+import IconSortDescending from 'vue-material-design-icons/MenuDown.vue'
 import LoadingTableRow from './LoadingTableRow.vue'
 import FileListRow from './FileListRow.vue'
 
 const props = defineProps<{
+	currentView: FileListViews,
 	multiselect: boolean
 	allowPickDirectory: boolean
 	loading: boolean
@@ -100,52 +103,65 @@ const emit = defineEmits<{
 	(e: 'update:selectedFiles', nodes: Node[]): void
 }>()
 
-type ISortingOptions = 'ascending' | 'descending' | undefined
+/// sorting related stuff
 
-const sortByName = ref<ISortingOptions>('ascending')
-const sortBySize = ref<ISortingOptions>(undefined)
-const sortByModified = ref<ISortingOptions>(undefined)
+type ISortingAttributes = 'basename' | 'size' | 'mtime'
+type ISortingOrder = 'ascending' | 'descending' | 'none'
 
-const ordering = {
-	ascending: <T>(a: T, b: T, fn: (a: T, b: T) => number) => fn(a, b),
-	descending: <T>(a: T, b: T, fn: (a: T, b: T) => number) => fn(b, a),
-	none: <T>(a: T, b: T, fn: (a: T, b: T) => number) => 0,
-}
-
-const byName = (a: Node, b: Node) => (a.attributes?.displayName || a.basename).localeCompare(b.attributes?.displayName || b.basename, getCanonicalLocale())
-const bySize = (a: Node, b: Node) => (b.size || 0) - (a.size || 0)
-const byDate = (a: Node, b: Node) => (a.mtime?.getTime() || 0) - (b.mtime?.getTime() || 0)
+/** Override files app sorting */
+const customSortingConfig = ref<{ sortBy: ISortingAttributes, order: ISortingOrder }>()
+/** The current sorting of the files app */
+const { currentConfig: filesAppSorting } = useFilesViews(props.currentView)
+/** Wrapper that uses custom sorting, but fallsback to the files app */
+const sortingConfig = computed(() => customSortingConfig.value ?? filesAppSorting.value)
 
-const toggleSorting = (variable: Ref<ISortingOptions>) => {
-	const old = variable.value
-	// reset
-	sortByModified.value = sortBySize.value = sortByName.value = undefined
+// Some helpers for the template
+const sortByName = computed(() => sortingConfig.value.sortBy === 'basename' ? (sortingConfig.value.order === 'none' ? undefined : sortingConfig.value.order) : undefined)
+const sortBySize = computed(() => sortingConfig.value.sortBy === 'size' ? (sortingConfig.value.order === 'none' ? undefined : sortingConfig.value.order) : undefined)
+const sortByModified = computed(() => sortingConfig.value.sortBy === 'mtime' ? (sortingConfig.value.order === 'none' ? undefined : sortingConfig.value.order) : undefined)
 
-	if (old === 'ascending') {
-		variable.value = 'descending'
+const toggleSorting = (sortBy: ISortingAttributes) => {
+	if (sortingConfig.value.sortBy === sortBy) {
+		if (sortingConfig.value.order === 'ascending') {
+			customSortingConfig.value = { sortBy: sortingConfig.value.sortBy, order: 'descending' }
+		} else {
+			customSortingConfig.value = { sortBy: sortingConfig.value.sortBy, order: 'ascending' }
+		}
 	} else {
-		variable.value = 'ascending'
+		customSortingConfig.value = { sortBy, order: 'ascending' }
 	}
 }
 
-const toggleSortByName = () => toggleSorting(sortByName)
-const toggleSortBySize = () => toggleSorting(sortBySize)
-const toggleSortByModified = () => toggleSorting(sortByModified)
+const { sortFavoritesFirst } = useFilesSettings()
 
 /**
  * Files sorted by columns
  */
-const sortedFiles = computed(() => [...props.files].sort(
+const sortedFiles = computed(() => {
+	const ordering = {
+		ascending: <T, >(a: T, b: T, fn: (a: T, b: T) => number) => fn(a, b),
+		descending: <T, >(a: T, b: T, fn: (a: T, b: T) => number) => fn(b, a),
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		none: <T, >(_a: T, _b: T, _fn: (a: T, b: T) => number) => 0,
+	}
+
+	const sorting = {
+		basename: (a: Node, b: Node) => (a.attributes?.displayName || a.basename).localeCompare(b.attributes?.displayName || b.basename, getCanonicalLocale()),
+		size: (a: Node, b: Node) => (a.size || 0) - (b.size || 0),
+		// reverted because "young" is smaller than "old"
+		mtime: (a: Node, b: Node) => (b.mtime?.getTime?.() || 0) - (a.mtime?.getTime?.() || 0),
+	}
+
+	return [...props.files].sort(
 		(a, b) =>
-			// Folders always come above the files
-			(b.type === FileType.Folder ? 1 : 0) - (a.type === FileType.Folder ? 1 : 0) ||
-			// Favorites above other files
-			// (b.attributes?.favorite || false) - (a.attributes?.favorite || false) ||
-			// then sort by name / size / modified
-			ordering[sortByName.value || 'none'](a, b, byName) ||
-			ordering[sortBySize.value || 'none'](a, b, bySize) ||
-			ordering[sortByModified.value || 'none'](a, b, byDate)
+		// Folders always come above the files
+			(b.type === FileType.Folder ? 1 : 0) - (a.type === FileType.Folder ? 1 : 0)
+		// Favorites above other files
+		|| (sortFavoritesFirst ? ((b.attributes.favorite ? 1 : 0) - (a.attributes.favorite ? 1 : 0)) : 0)
+		// then sort by name / size / modified
+		|| ordering[sortingConfig.value.order](a, b, sorting[sortingConfig.value.sortBy]),
 	)
+},
 )
 
 /**
@@ -171,6 +187,10 @@ function onSelectAll() {
 	}
 }
 
+/**
+ * Handle selecting a node on the files list
+ * @param file the selected node
+ */
 function onNodeSelected(file: Node) {
 	if (props.selectedFiles.includes(file)) {
 		emit('update:selectedFiles', props.selectedFiles.filter((f) => f.path !== file.path))
@@ -184,6 +204,10 @@ function onNodeSelected(file: Node) {
 	}
 }
 
+/**
+ * Emit the new current path
+ * @param dir The directory that is entered
+ */
 function onChangeDirectory(dir: Node) {
 	emit('update:path', join(props.path, dir.basename))
 }
@@ -197,7 +221,7 @@ const fileContainer = ref<HTMLDivElement>()
 	const resize = () => nextTick(() => {
 		const nodes = fileContainer.value?.parentElement?.children || []
 		let height = fileContainer.value?.parentElement?.clientHeight || 450
-		for(let index = 0; index < nodes.length; index++) {
+		for (let index = 0; index < nodes.length; index++) {
 			if (!fileContainer.value?.isSameNode(nodes[index])) {
 				height -= nodes[index].clientHeight
 			}
@@ -276,7 +300,7 @@ const fileContainer = ref<HTMLDivElement>()
 		}
 		th :deep(.button-vue__wrapper) {
 			color: var(--color-text-maxcontrast);
-	
+
 			.button-vue__text {
 				font-weight: normal;
 			}
diff --git a/lib/components/FilePicker/FileListRow.spec.ts b/lib/components/FilePicker/FileListRow.spec.ts
index 164b161d8..8190657cd 100644
--- a/lib/components/FilePicker/FileListRow.spec.ts
+++ b/lib/components/FilePicker/FileListRow.spec.ts
@@ -26,13 +26,6 @@ import { File } from '@nextcloud/files'
 
 import FileListRow from './FileListRow.vue'
 
-// Mock OC.MimeType
-window.OC = {
-	MimeType: {
-		getIconUrl: (mime: string) => `/icon/${mime}`,
-	},
-} as never
-
 describe('FilePicker: FileListRow', () => {
 	const node = new File({
 		owner: null,
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index 69a5ae7be..0fb658f16 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/lib/components/FilePicker/FilePicker.vue
@@ -18,6 +18,7 @@
 			<!-- If loading or files found show file list, otherwise show empty content-->
 			<FileList v-if="isLoading || filteredFiles.length > 0"
 				:allow-pick-directory="allowPickDirectory"
+				:current-view="currentView"
 				:files="filteredFiles"
 				:multiselect="multiselect"
 				:loading="isLoading"
@@ -61,6 +62,7 @@ import { showError } from '../../toast'
 import { useDAVFiles } from '../../composables/dav'
 import { useMimeFilter } from '../../composables/mime'
 import { t } from '../../utils/l10n'
+import { useFilesSettings } from '../../composables/filesSettings'
 
 const props = withDefaults(defineProps<{
 	/** Buttons to be displayed */
@@ -207,12 +209,18 @@ const { files, isLoading, loadFiles, getFile, client } = useDAVFiles(currentView
 
 onMounted(() => loadFiles())
 
+const { showHiddenFiles } = useFilesSettings()
+
 /**
  * The files list filtered by the current value of the filter input
  */
 const filteredFiles = computed(() => {
 	let filtered = files.value
 
+	if (!showHiddenFiles.value) {
+		// Hide hidden files if not configured otherwise
+		filtered = filtered.filter((file) => !file.basename.startsWith('.'))
+	}
 	if (props.mimetypeFilter.length > 0) {
 		// filter by mime type but always include folders to navigate
 		filtered = filtered.filter(file => file.type === 'folder' || (file.mime && isSupportedMimeType(file.mime)))
diff --git a/lib/components/FilePicker/FilePreview.vue b/lib/components/FilePicker/FilePreview.vue
index a6aa75ee2..c1ca5b17c 100644
--- a/lib/components/FilePicker/FilePreview.vue
+++ b/lib/components/FilePicker/FilePreview.vue
@@ -11,8 +11,9 @@
 
 <script setup lang="ts">
 import { FileType, type Node } from '@nextcloud/files'
-import { usePreviewURL } from '../../usables/preview'
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { getPreviewURL } from '../../composables/preview'
+import { useFilesSettings } from '../../composables/filesSettings'
 import { t } from '../../utils/l10n'
 
 import IconFile from 'vue-material-design-icons/File.vue'
@@ -27,7 +28,8 @@ const props = defineProps<{
 	node: Node
 }>()
 
-const { previewURL } = usePreviewURL(toRef(props, 'node'))
+const { cropImagePreviews } = useFilesSettings()
+const previewURL = computed(() => getPreviewURL(props.node, { cropPreview: cropImagePreviews.value }))
 
 const isFile = computed(() => props.node.type === FileType.File)
 const canLoadPreview = ref(false)
diff --git a/lib/composables/filesSettings.spec.ts b/lib/composables/filesSettings.spec.ts
new file mode 100644
index 000000000..07cb9461f
--- /dev/null
+++ b/lib/composables/filesSettings.spec.ts
@@ -0,0 +1,68 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+import { describe, it, expect, vi, afterEach, beforeAll, afterAll } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { useFilesSettings } from './filesSettings'
+
+const axios = vi.hoisted(() => ({
+	get: vi.fn(),
+}))
+vi.mock('@nextcloud/axios', () => ({ default: axios }))
+
+const TestComponent = defineComponent({
+	setup() {
+		const settings = useFilesSettings()
+		return {
+			...settings,
+		}
+	},
+	render: (h) => h('div'),
+})
+
+describe('files app settings composable', () => {
+	beforeAll(() => { vi.useFakeTimers() })
+	afterAll(() => { vi.useRealTimers() })
+	afterEach(() => { vi.resetAllMocks() })
+
+	it('Sets the inital state correctly', async () => {
+		axios.get.mockImplementation(() => {
+			return new Promise(() => {})
+		})
+		const vue = await shallowMount(TestComponent)
+		expect(vue.vm.showHiddenFiles).toBe(false)
+		expect(vue.vm.sortFavoritesFirst).toBe(true)
+		expect(vue.vm.cropImagePreviews).toBe(true)
+		expect(axios.get).toBeCalled()
+	})
+
+	it('is reactive when loading values', async () => {
+		axios.get.mockImplementation(() => {
+			return new Promise((resolve) => window.setTimeout(() => resolve({ data: { data: { show_hidden: true } } }), 400))
+		})
+		const vue = await shallowMount(TestComponent)
+		expect(vue.vm.showHiddenFiles).toBe(false)
+		await vi.advanceTimersByTimeAsync(500)
+		expect(vue.vm.showHiddenFiles).toBe(true)
+	})
+})
diff --git a/lib/composables/filesSettings.ts b/lib/composables/filesSettings.ts
new file mode 100644
index 000000000..278e4c756
--- /dev/null
+++ b/lib/composables/filesSettings.ts
@@ -0,0 +1,128 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+import { computed, ref, type ComputedRef, type Ref } from 'vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { toValue } from '@vueuse/core'
+import { onMounted } from 'vue'
+
+interface OCAFilesUserConfig {
+	show_hidden: boolean
+	crop_image_previews: boolean
+	sort_favorites_first: boolean
+}
+
+interface OCAFilesView {
+	sorting_direction: 'asc'|'desc'
+	sorting_mode: 'basename'|'size'|'mtime'
+}
+
+interface OCAFilesViewConfig {
+	[view: string]: OCAFilesView
+}
+
+interface ViewConfig {
+	sortBy: 'basename'|'size'|'mtime'
+	order: 'ascending'|'descending'|'none'
+}
+
+export type FileListViews = 'files'|'recent'|'favorites'
+
+/**
+ * Composable to get the files app settings
+ * (show hidden files, sort favorites, crop previews)
+ */
+export const useFilesSettings = () => {
+	const filesUserState = loadState<OCAFilesUserConfig|null>('files', 'config', null)
+
+	const showHiddenFiles = ref(filesUserState?.show_hidden ?? false)
+	const sortFavoritesFirst = ref(filesUserState?.sort_favorites_first ?? true)
+	const cropImagePreviews = ref(filesUserState?.crop_image_previews ?? true)
+
+	onMounted(() => {
+		axios.get(generateUrl('/apps/files/api/v1/configs')).then((respose) => {
+			showHiddenFiles.value = respose.data?.data?.show_hidden ?? false
+			sortFavoritesFirst.value = respose.data?.data?.sort_favorites_first ?? true
+			cropImagePreviews.value = respose.data?.data?.crop_image_previews ?? true
+		})
+	})
+
+	return {
+		showHiddenFiles,
+		sortFavoritesFirst,
+		cropImagePreviews,
+	}
+}
+
+/**
+ * Composable to get the files app view configs for sorting the files list
+ * @param currentView the currently active view
+ */
+export const useFilesViews = (currentView?: FileListViews|Ref<FileListViews>|ComputedRef<FileListViews>) => {
+	const convertOrder = (order?: string) => order === 'asc' ? 'ascending' : (order === 'desc' ? 'descending' : 'none')
+
+	const filesViewsState = loadState<OCAFilesViewConfig|null>('files', 'viewConfigs', null)
+
+	const filesViewConfig = ref<ViewConfig>({
+		sortBy: filesViewsState?.files?.sorting_mode ?? 'basename',
+		order: convertOrder(filesViewsState?.files?.sorting_direction ?? 'asc'),
+	})
+	const recentViewConfig = ref<ViewConfig>({
+		sortBy: filesViewsState?.recent?.sorting_mode ?? 'basename',
+		order: convertOrder(filesViewsState?.recent?.sorting_direction ?? 'asc'),
+	})
+	const favoritesViewConfig = ref<ViewConfig>({
+		sortBy: filesViewsState?.favorites?.sorting_mode ?? 'basename',
+		order: convertOrder(filesViewsState?.favorites?.sorting_direction ?? 'asc'),
+	})
+
+	onMounted(() => {
+		axios.get(generateUrl('/apps/files/api/v1/views')).then((response) => {
+			filesViewConfig.value = {
+				sortBy: response.data?.data?.files?.sorting_mode ?? 'basename',
+				order: convertOrder(response.data?.data?.files?.sorting_direction),
+			}
+			favoritesViewConfig.value = {
+				sortBy: response.data?.data?.favorites?.sorting_mode ?? 'basename',
+				order: convertOrder(response.data?.data?.favorites?.sorting_direction),
+			}
+			recentViewConfig.value = {
+				sortBy: response.data?.data?.recent?.sorting_mode ?? 'basename',
+				order: convertOrder(response.data?.data?.recent?.sorting_direction),
+			}
+		})
+	})
+
+	const currentConfig = computed(() => toValue(currentView || 'files') === 'files' ? filesViewConfig.value : (toValue(currentView) === 'recent' ? recentViewConfig.value : favoritesViewConfig.value))
+	const sortBy = computed(() => currentConfig.value.sortBy)
+	const order = computed(() => currentConfig.value.order)
+
+	return {
+		filesViewConfig,
+		favoritesViewConfig,
+		recentViewConfig,
+		currentConfig,
+		sortBy,
+		order,
+	}
+}
diff --git a/lib/composables/filesViews.spec.ts b/lib/composables/filesViews.spec.ts
new file mode 100644
index 000000000..93a775628
--- /dev/null
+++ b/lib/composables/filesViews.spec.ts
@@ -0,0 +1,90 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+import { describe, it, expect, vi, afterEach, beforeAll, afterAll } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import { defineComponent, type PropType } from 'vue'
+import { useFilesViews, type FileListViews } from './filesSettings'
+
+const axios = vi.hoisted(() => ({
+	get: vi.fn(),
+}))
+vi.mock('@nextcloud/axios', () => ({ default: axios }))
+
+const TestComponent = defineComponent({
+	props: {
+		currentView: {
+			type: String as PropType<FileListViews>,
+		}
+	},
+	setup(props) {
+		const settings = useFilesViews(props.currentView)
+		return {
+			...settings,
+		}
+	},
+	render: (h) => h('div'),
+})
+
+describe('files app views config composable', () => {
+	beforeAll(() => { vi.useFakeTimers() })
+	afterAll(() => { vi.useRealTimers() })
+	afterEach(() => { vi.resetAllMocks() })
+
+	it('Sets the inital state correctly', async () => {
+		axios.get.mockImplementation(() => {
+			return new Promise(() => {})
+		})
+		const vue = await shallowMount(TestComponent, {
+			propsData: {
+				currentView: 'files',
+			},
+		})
+		expect(vue.vm.filesViewConfig).toEqual({ sortBy: 'basename', order: 'ascending' })
+		expect(vue.vm.recentViewConfig).toEqual({ sortBy: 'basename', order: 'ascending' })
+		expect(vue.vm.currentConfig).toEqual({ sortBy: 'basename', order: 'ascending' })
+		expect(axios.get).toBeCalled()
+	})
+
+	it('is reactive when loading values', async () => {
+		axios.get.mockImplementation(() => {
+			return new Promise((resolve) => window.setTimeout(() => resolve({
+				data: {
+					data: {
+						files: {
+							sorting_mode: 'mtime',
+							sorting_direction: 'desc',
+						},
+					},
+				},
+			}), 400))
+		})
+		const vue = await shallowMount(TestComponent, {
+			propsData: {
+				currentView: 'files',
+			},
+		})
+		expect(vue.vm.filesViewConfig).toEqual({ sortBy: 'basename', order: 'ascending' })
+		await vi.advanceTimersByTimeAsync(500)
+		expect(vue.vm.filesViewConfig).toEqual({ sortBy: 'mtime', order: 'descending' })
+	})
+})
diff --git a/package-lock.json b/package-lock.json
index 8a1295526..cb7bf02c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "5.0.0-beta.5",
       "license": "GPL-3.0-or-later",
       "dependencies": {
+        "@nextcloud/axios": "^2.4.0",
         "@nextcloud/files": "^3.0.0-beta.24",
+        "@nextcloud/initial-state": "^2.1.0",
         "@nextcloud/l10n": "^2.2.0",
         "@nextcloud/router": "^2.1.2",
         "@nextcloud/typings": "^1.7.0",
diff --git a/package.json b/package.json
index 38571e100..d25d4ae43 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
     "dev": "vite --mode development build",
     "dev:watch": "vite --mode development build --watch",
     "doc": "typedoc --tsconfig tsconfig-typedoc.json --plugin @zamiell/typedoc-plugin-not-exported --out dist/doc dist/index.d.ts && touch dist/doc/.nojekyll",
-    "stylelint": "stylelint src",
-    "stylelint:fix": "stylelint src --fix",
+    "lint": "eslint lib/",
+    "lint:fix": "eslint --fix lib/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "l10n:extract": "node build/extract-l10n.js"
@@ -55,7 +55,9 @@
     "vue": "^2.7.14"
   },
   "dependencies": {
+    "@nextcloud/axios": "^2.4.0",
     "@nextcloud/files": "^3.0.0-beta.24",
+    "@nextcloud/initial-state": "^2.1.0",
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/typings": "^1.7.0",