Support difference between all files/file library

app/src/modules/files/components/add-folder/add-folder.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 			try {
 				const newFolder = await api.post(`/folders`, {
 					name: newFolderName.value,
-					parent_folder: props.parent,
+					parent_folder: props.parent === 'root' ? null : props.parent,
 				});
 
 				await fetchFolders();

app/src/modules/files/components/folder-picker/folder-picker-list-item.vue

@@ -8,13 +8,7 @@
 		<v-list-item-icon><v-icon :name="currentFolder === folder.id ? 'folder_open' : 'folder'" /></v-list-item-icon>
 		<v-list-item-content>{{ folder.name }}</v-list-item-content>
 	</v-list-item>
-	<v-list-group
-		:open="startOpenFolders.includes(folder.id)"
-		v-else
-		@click="clickHandler(folder.id)"
-		:active="currentFolder === folder.id"
-		:disabled="disabled"
-	>
+	<v-list-group v-else @click="clickHandler(folder.id)" :active="currentFolder === folder.id" :disabled="disabled">
 		<template #activator>
 			<v-list-item-icon>
 				<v-icon :name="currentFolder === folder.id ? 'folder_open' : 'folder'" />
@@ -29,7 +23,6 @@
 			:click-handler="clickHandler"
 			:disabled="disabledFolders.includes(childFolder.id)"
 			:disabled-folders="disabledFolders"
-			:start-open-folders="startOpenFolders"
 		/>
 	</v-list-group>
 </template>
@@ -66,10 +59,6 @@ export default defineComponent({
 			type: Array as PropType<string[]>,
 			default: () => [],
 		},
-		startOpenFolders: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
 	},
 });
 </script>

app/src/modules/files/components/folder-picker/folder-picker.vue

@@ -2,26 +2,32 @@
 	<v-skeleton-loader v-if="loading" />
 	<div class="folder-picker" v-else>
 		<v-list dense>
-			<v-list-group open @click="$emit('input', null)" :active="value === null">
-				<template #activator>
-					<v-list-item-icon>
-						<v-icon name="folder_special" />
-					</v-list-item-icon>
-					<v-list-item-content>{{ $t('file_library') }}</v-list-item-content>
-				</template>
+			<v-item-group scope="folder-picker" multiple v-model="openFolders">
+				<v-list-group
+					disable-groupable-parent
+					@click="$emit('input', null)"
+					:active="value === null"
+					scope="folder-picker"
+					value="root"
+				>
+					<template #activator>
+						<v-list-item-icon>
+							<v-icon name="folder_special" />
+						</v-list-item-icon>
+						<v-list-item-content>{{ $t('file_library') }}</v-list-item-content>
+					</template>
 
-				<folder-picker-list-item
-					v-for="folder in tree"
-					:key="folder.id"
-					:folder="folder"
-					:current-folder="value"
-					:click-handler="(id) => $emit('input', id)"
-					:disabled="disabledFolders.includes(folder.id)"
-					:disabled-folders="disabledFolders"
-					:open="startOpenFolders.includes(folder.id)"
-					:start-open-folders="startOpenFolders"
-				/>
-			</v-list-group>
+					<folder-picker-list-item
+						v-for="folder in tree"
+						:key="folder.id"
+						:folder="folder"
+						:current-folder="value"
+						:click-handler="(id) => $emit('input', id)"
+						:disabled="disabledFolders.includes(folder.id)"
+						:disabled-folders="disabledFolders"
+					/>
+				</v-list-group>
+			</v-item-group>
 		</v-list>
 	</div>
 </template>
@@ -83,35 +89,27 @@ export default defineComponent({
 			}
 		});
 
-		const startOpenFolders = computed(() => {
-			if (!folders.value) return [];
+		const shouldBeOpen: string[] = [];
+		const folder = folders.value.find((folder) => folder.id === props.value);
 
-			const openFolders: string[] = [];
-			const folder = folders.value.find((folder) => folder.id === props.value);
+		if (folder && folder.parent_folder) parseFolder(folder.parent_folder);
 
-			if (folder && folder.parent_folder) parseFolder(folder.parent_folder);
+		const startOpenFolders = ['root'];
 
-			return openFolders;
-
-			function parseFolder(id: string) {
-				if (!folders.value) return;
-				openFolders.push(id);
-
-				const folder = folders.value.find((folder) => folder.id === id);
-
-				if (folder && folder.parent_folder) {
-					parseFolder(folder.parent_folder);
-				}
+		for (const folderID of shouldBeOpen) {
+			if (startOpenFolders.includes(folderID) === false) {
+				startOpenFolders.push(folderID);
 			}
-		});
-
+		}
 		const selectedFolder = computed(() => {
 			return folders.value.find((folder) => folder.id === props.value) || {};
 		});
 
+		const openFolders = ref(startOpenFolders);
+
 		fetchFolders();
 
-		return { loading, folders, tree, selectedFolder, startOpenFolders };
+		return { loading, folders, tree, selectedFolder, openFolders };
 
 		async function fetchFolders() {
 			if (folders.value.length > 0) return;
@@ -132,6 +130,17 @@ export default defineComponent({
 				loading.value = false;
 			}
 		}
+
+		function parseFolder(id: string) {
+			if (!folders.value) return;
+			shouldBeOpen.push(id);
+
+			const folder = folders.value.find((folder) => folder.id === id);
+
+			if (folder && folder.parent_folder) {
+				parseFolder(folder.parent_folder);
+			}
+		}
 	},
 });
 </script>

app/src/modules/files/components/navigation/navigation-folder.vue

@@ -13,13 +13,13 @@
 
 		<v-list-group
 			v-else
-			:to="root ? '/files' : `/files?folder=${folder.id}`"
-			:active="currentFolder === folder.id"
-			exact
-			@contextmenu.native.prevent.stop="$refs.contextMenu.activate"
-			scope="files-navigation"
+			:to="root ? `/files?folder=root` : `/files?folder=${folder.id}`"
+			:active="root ? currentFolder === 'root' : currentFolder === folder.id"
 			:value="root ? '$root' : folder.id"
+			scope="files-navigation"
+			exact
 			disable-groupable-parent
+			@contextmenu.native.prevent.stop="$refs.contextMenu.activate"
 		>
 			<template #activator>
 				<v-list-item-icon>

app/src/modules/files/routes/browse/browse.vue

@@ -166,12 +166,21 @@ export default defineComponent({
 				];
 
 				for (const [field, value] of Object.entries(props.queryFilters)) {
-					urlFilters.push({
-						locked: true,
-						operator: 'eq',
-						field,
-						value,
-					});
+					if (value === 'root') {
+						urlFilters.push({
+							locked: true,
+							operator: 'null',
+							field,
+							value: true,
+						});
+					} else {
+						urlFilters.push({
+							locked: true,
+							operator: 'eq',
+							field,
+							value,
+						});
+					}
 				}
 
 				return [...urlFilters, ...filters.value];