feat(FilePicker): Show empty content when there are no files in folder

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

l10n/messages.pot

@@ -26,11 +26,11 @@ msgstr ""
 msgid "Copy"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:210
+#: lib/components/FilePicker/FilePicker.vue:241
 msgid "Could not create the new folder"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:133
+#: lib/components/FilePicker/FilePicker.vue:151
 #: lib/components/FilePicker/FilePickerNavigation.vue:65
 msgid "Favorites"
 msgstr ""
@@ -39,6 +39,14 @@ msgstr ""
 msgid "File name cannot be empty."
 msgstr ""
 
+#: lib/components/FilePicker/FilePicker.vue:227
+msgid "Files and folders you mark as favorite will show up here."
+msgstr ""
+
+#: lib/components/FilePicker/FilePicker.vue:225
+msgid "Files and folders you recently modified will show up here."
+msgstr ""
+
 #: lib/components/FilePicker/FileList.vue:39
 msgid "Modified"
 msgstr ""
@@ -52,7 +60,7 @@ msgstr ""
 msgid "Name"
 msgstr ""
 
-#: lib/components/FilePicker/FilePicker.vue:133
+#: lib/components/FilePicker/FilePicker.vue:151
 #: lib/components/FilePicker/FilePickerNavigation.vue:61
 msgid "Recent"
 msgstr ""
@@ -68,3 +76,7 @@ msgstr ""
 #: lib/toast.ts:242
 msgid "Undo"
 msgstr ""
+
+#: lib/components/FilePicker/FilePicker.vue:223
+msgid "Upload some content or sync with your devices!"
+msgstr ""

lib/components/FilePicker/FilePicker.vue

@@ -15,33 +15,51 @@
 			</div>
 
 			<!-- File list -->
-			<FileList :allow-pick-directory="allowPickDirectory"
+			<FileList v-if="filteredFiles.length > 0"
+				:allow-pick-directory="allowPickDirectory"
 				:files="filteredFiles"
 				:multiselect="multiselect"
 				:loading="isLoading"
 				:path.sync="currentPath"
 				:selected-files.sync="selectedFiles"
 				:name="viewHeadline"
 				@update:path="currentView = 'files'" />
+			<NcEmptyContent v-else-if="filterString"
+				:name="t('No matching files')"
+				:description="t('No files matching your filter were found.')">
+				<template #icon>
+					<IconFile />
+				</template>
+			</NcEmptyContent>
+			<NcEmptyContent v-else
+				:name="t('No files in here')"
+				:description="noFilesDescription">
+				<template #icon>
+					<IconFile />
+				</template>
+			</NcEmptyContent>
 		</div>
 	</DialogBase>
 </template>
 
 <script setup lang="ts">
 import type { IFilePickerButton, IFilePickerFilter } from '../types'
-import { davRootPath, type Node } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
 
+import IconFile from 'vue-material-design-icons/File.vue'
 import DialogBase from '../DialogBase.vue'
 import FileList from './FileList.vue'
 import FilePickerBreadcrumbs from './FilePickerBreadcrumbs.vue'
 import FilePickerNavigation from './FilePickerNavigation.vue'
 
-import { t } from '../../utils/l10n'
+import { davRootPath } from '@nextcloud/files'
+import { NcEmptyContent } from '@nextcloud/vue'
 import { join } from 'path'
 import { computed, onMounted, ref, toRef } from 'vue'
+import { showError } from '../../toast'
 import { useDAVFiles } from '../../usables/dav'
 import { useMimeFilter } from '../../usables/mime'
-import { showError } from '../../toast'
+import { t } from '../../utils/l10n'
 
 const props = withDefaults(defineProps<{
 	/** Buttons to be displayed */
@@ -197,6 +215,19 @@ const filteredFiles = computed(() => {
 	return filtered
 })
 
+/**
+ * If no files are found in the current view this message will be shown in the EmptyContent
+ */
+const noFilesDescription = computed(() => {
+	if (currentView.value === 'files') {
+		return t('Upload some content or sync with your devices!')
+	} else if (currentView.value === 'recent') {
+		return t('Files and folders you recently modified will show up here.')
+	} else {
+		return t('Files and folders you mark as favorite will show up here.')
+	}
+})
+
 /**
  * Handle creating new folder (breadcrumb menu)
  * @param name The new folder name