feat(files-list): restructure header with primary RequestPicker and breadcrumb dropdown menu

Signed-off-by: Vitor Mattos <[email protected]>

Author: vitormattos

src/views/FilesList/FilesList.vue

@@ -5,25 +5,40 @@
 <template>
 	<NcAppContent :page-heading="t('libresign', 'Files')">
 		<div class="files-list__header">
+			<!-- Request picker -->
+			<RequestPicker variant="primary" />
+
+			<!-- Current folder breadcrumbs -->
 			<NcBreadcrumbs class="files-list__breadcrumbs">
 				<NcBreadcrumb :name="t('libresign', 'Files')"
 					:title="t('libresign', 'Files')"
 					:force-icon-text="true"
 					:to="{ name: 'fileslist' }"
 					:aria-description="t('libresign', 'Files')"
 					:disable-drop="true"
-					@click="refresh()">
+					force-menu
+					v-model:open="isMenuOpen">
 					<template #icon>
 						<NcIconSvgWrapper :size="20"
 							:svg="viewIcon" />
 					</template>
+					<template #menu-icon>
+						<NcIconSvgWrapper :path="isMenuOpen ? mdiChevronUp : mdiChevronDown" />
+					</template>
+					<!-- Reload button -->
+					<NcActionButton close-after-click @click="refresh()">
+						<template #icon>
+							<NcIconSvgWrapper :path="mdiReload" />
+						</template>
+						<!-- TRANSLATORS Button inside the breadcrumb dropdown menu that reloads the file list -->
+						{{ t('libresign', 'Reload content') }}
+					</NcActionButton>
 				</NcBreadcrumb>
-				<template #actions>
-					<RequestPicker />
-				</template>
 			</NcBreadcrumbs>
 
-			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
+			<NcLoadingIcon v-if="isRefreshing"
+				class="files-list__refresh-icon"
+				:name="t('libresign', 'File list is reloading')" />
 
 			<NcButton :aria-label="gridViewButtonLabel"
 				:title="gridViewButtonLabel"
@@ -75,10 +90,14 @@ import { t } from '@nextcloud/l10n'
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
 import {
+	mdiChevronDown,
+	mdiChevronUp,
 	mdiFolder,
+	mdiReload,
 	mdiViewGrid,
 } from '@mdi/js'
 
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb'
 import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs'
@@ -98,6 +117,7 @@ import { useSidebarStore } from '../../store/sidebar.js'
 export default {
 	name: 'FilesList',
 	components: {
+		NcActionButton,
 		NcAppContent,
 		NcButton,
 		NcBreadcrumb,
@@ -118,12 +138,16 @@ export default {
 			filtersStore,
 			userConfigStore,
 			sidebarStore,
+			mdiChevronDown,
+			mdiChevronUp,
 			mdiFolder,
+			mdiReload,
 			mdiViewGrid,
 		}
 	},
 	data() {
 		return {
+			isMenuOpen: false,
 			loading: true,
 			dirContentsFiltered: [],
 		}