EmptyFilePage refactoring

public/mix-manifest.json

@@ -38,11 +38,11 @@
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=cfe3c4040260640f485d",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=df7397408805a1cc93fa",
-    "/chunks/files.js": "/chunks/files.js?id=fc70967e777c5ea045a0",
+    "/chunks/files.js": "/chunks/files.js?id=b5a3adaa6057e4cdba19",
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settings-subscripti~a6463864.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settings-subscripti~a6463864.js?id=d7f552be271c36429869",
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared-with-me~chun~fd99312c.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared-with-me~chun~fd99312c.js?id=8096a407cf1fca18307b",
-    "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=8bf75a2001236ed0f68c",
+    "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=d0a2e05e3e243b2e2c4e",
-    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=5cda99b7ef66929ede67",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=6f45ee917e7e45ca8902",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=388926106039c69c8cf8",
     "/chunks/files~chunks/shared-with-me~chunks/shared/files~chunks/team-folders.js": "/chunks/files~chunks/shared-with-me~chunks/shared/files~chunks/team-folders.js?id=4b8864f9265f55f61cf7",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=533962a06f477f6e046b",
@@ -50,7 +50,7 @@
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=58ab6cbdd635cf1a1214",
     "/chunks/invitation.js": "/chunks/invitation.js?id=84ddb67c583e448a6bde",
     "/chunks/invoices.js": "/chunks/invoices.js?id=fe45319300d75d185b81",
-    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=2eab8f3a4ac2f80f964f",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=40883f96214d6c29095e",
     "/chunks/not-found.js": "/chunks/not-found.js?id=3b8341b600865315cff5",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=436e329c2ec932cd6873",
     "/chunks/pages.js": "/chunks/pages.js?id=5cb4242dcd91c0968ced",
@@ -61,11 +61,11 @@
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=b5017d712135057283c9",
     "/chunks/plans.js": "/chunks/plans.js?id=6fca685daa45f22e4c8f",
     "/chunks/platform.js": "/chunks/platform.js?id=36b8f5235fde82b0faf9",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=907c88b8fc01dcc93d17",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=aa3bb21e1e3e94daf202",
     "/chunks/profile.js": "/chunks/profile.js?id=0638997b77c6f1246062",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=58edfb3a35062e1ba4e0",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=dd562240fff9f6e2260a",
-    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=df05e667b2bdf096a49a",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=61a959804968195e87d0",
     "/chunks/settings.js": "/chunks/settings.js?id=f6974b79daefb66bc566",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=d1eee7192b4d8bc1748c",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=cd6a74b233390ba79ddb",
@@ -76,9 +76,9 @@
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=e67e12955133c57194d1",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=a12ff03d8bd433021c6b",
-    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=7f24af3607a3b8b403e4",
+    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=33766e7a9a3f97bd9ab9",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=8b9ac9ed9afd8dd15229",
-    "/chunks/shared/files.js": "/chunks/shared/files.js?id=56c4adb6cf0fd79dd022",
+    "/chunks/shared/files.js": "/chunks/shared/files.js?id=28b058da609faafd2f02",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=1f5ef0d9638037a6e659",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=229e1a8b99558b316f44",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=eaf0d6ea279134fb8319",
@@ -86,8 +86,8 @@
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0506045df0785350b1e3",
     "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=6c93560e75087f4adbe7",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=3e6aa30a7f2e8a321dad",
-    "/chunks/team-folders.js": "/chunks/team-folders.js?id=7ffb1ce44de550ec4344",
+    "/chunks/team-folders.js": "/chunks/team-folders.js?id=6a74f33a137aa020726f",
-    "/chunks/trash.js": "/chunks/trash.js?id=536e0a2ecddf0647e0f9",
+    "/chunks/trash.js": "/chunks/trash.js?id=5ca5bdb09de0a5de3f05",
     "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=f0b33c0540fd6c6ef8d6",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=f59d97c1cbf6649b7057",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=0a574f2dec3a8227f0ff",
@@ -414,5 +414,24 @@
     "/chunks/shared.f38ea24d32141eb4b70b.hot-update.js": "/chunks/shared.f38ea24d32141eb4b70b.hot-update.js",
     "/js/main.0c53798fe667387163f3.hot-update.js": "/js/main.0c53798fe667387163f3.hot-update.js",
     "/chunks/platform.f7cb59614b2cbbb53cd5.hot-update.js": "/chunks/platform.f7cb59614b2cbbb53cd5.hot-update.js",
-    "/js/main.f5fc31d904afb9c6fa84.hot-update.js": "/js/main.f5fc31d904afb9c6fa84.hot-update.js"
+    "/js/main.f5fc31d904afb9c6fa84.hot-update.js": "/js/main.f5fc31d904afb9c6fa84.hot-update.js",
+    "/chunks/files.28754297764a569e9bce.hot-update.js": "/chunks/files.28754297764a569e9bce.hot-update.js",
+    "/js/main.cb21e63adbf4be824cc0.hot-update.js": "/js/main.cb21e63adbf4be824cc0.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.cb21e63adbf4be824cc0.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.cb21e63adbf4be824cc0.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.cb21e63adbf4be824cc0.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.cb21e63adbf4be824cc0.hot-update.js",
+    "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
+    "/js/main.ecc728167a480ccd5fd1.hot-update.js": "/js/main.ecc728167a480ccd5fd1.hot-update.js",
+    "/chunks/files.ecc728167a480ccd5fd1.hot-update.js": "/chunks/files.ecc728167a480ccd5fd1.hot-update.js",
+    "/chunks/files~chunks/recent-uploads.js": "/chunks/files~chunks/recent-uploads.js?id=55360dc582aa1729adbb",
+    "/chunks/recent-uploads.ecc728167a480ccd5fd1.hot-update.js": "/chunks/recent-uploads.ecc728167a480ccd5fd1.hot-update.js",
+    "/js/main.d93b6c165b15dc52c5b6.hot-update.js": "/js/main.d93b6c165b15dc52c5b6.hot-update.js",
+    "/chunks/shared/files.d93b6c165b15dc52c5b6.hot-update.js": "/chunks/shared/files.d93b6c165b15dc52c5b6.hot-update.js",
+    "/chunks/my-shared-items.8f0223e27a9ea9a1327b.hot-update.js": "/chunks/my-shared-items.8f0223e27a9ea9a1327b.hot-update.js",
+    "/chunks/files.0dfc221af22c20a96862.hot-update.js": "/chunks/files.0dfc221af22c20a96862.hot-update.js",
+    "/chunks/my-shared-items.0dfc221af22c20a96862.hot-update.js": "/chunks/my-shared-items.0dfc221af22c20a96862.hot-update.js",
+    "/chunks/recent-uploads.0dfc221af22c20a96862.hot-update.js": "/chunks/recent-uploads.0dfc221af22c20a96862.hot-update.js",
+    "/chunks/shared-with-me.0dfc221af22c20a96862.hot-update.js": "/chunks/shared-with-me.0dfc221af22c20a96862.hot-update.js",
+    "/chunks/shared/files.0dfc221af22c20a96862.hot-update.js": "/chunks/shared/files.0dfc221af22c20a96862.hot-update.js",
+    "/chunks/team-folders.0dfc221af22c20a96862.hot-update.js": "/chunks/team-folders.0dfc221af22c20a96862.hot-update.js",
+    "/chunks/trash.0dfc221af22c20a96862.hot-update.js": "/chunks/trash.0dfc221af22c20a96862.hot-update.js"
 }

resources/js/components/FilesView/FileBrowser.vue

@@ -11,10 +11,6 @@
 		tabindex="-1"
 		@click.self="filesContainerClick"
 	>
-		<!--Show empty page if no content-->
-		<EmptyFilePage>
-			<slot name="empty-file-page" />
-		</EmptyFilePage>
 
 		<!--Item previews list-->
 		<div v-if="isList" class="file-list-wrapper">
@@ -61,22 +57,16 @@
 </template>
 
 <script>
-	import EmptyFilePage from '/resources/js/components/FilesView/EmptyFilePage'
-	import EmptyMessage from '/resources/js/components/FilesView/EmptyMessage'
 	import FileItemList from '/resources/js/components/FilesView/FileItemList'
 	import FileItemGrid from '/resources/js/components/FilesView/FileItemGrid'
-	import InfoSidebar from '/resources/js/components/FilesView/InfoSidebar'
 	import {mapGetters} from 'vuex'
 	import {events} from '/resources/js/bus'
 
 	export default {
 		name: 'FileBrowser',
 		components: {
-			EmptyFilePage,
 			FileItemList,
 			FileItemGrid,
-			EmptyMessage,
-			InfoSidebar,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/Files.vue

@@ -97,24 +97,24 @@
 			</MobileActionButton>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
+			<h1 class="title">
+				{{ $t('empty_page.title') }}
+			</h1>
+			<p class="description">
+				{{ $t('empty_page.description') }}
+			</p>
+			<ButtonUpload button-style="theme">
+				{{ $t('empty_page.call_to_action') }}
+			</ButtonUpload>
+		</EmptyFilePage>
 
-			<template v-slot:empty-file-page>
+		<FileBrowser />
-				<h1 class="title">
-					{{ $t('empty_page.title') }}
-				</h1>
-                <p class="description">
-					{{ $t('empty_page.description') }}
-				</p>
-                <ButtonUpload button-style="theme">
-                    {{ $t('empty_page.call_to_action') }}
-                </ButtonUpload>
-			</template>
-		</FileBrowser>
 	</div>
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -134,6 +134,7 @@
 	export default {
 		name: 'Files',
 		components: {
+			EmptyFilePage,
 			FileActionsMobile,
 			MobileActionButtonUpload,
 			MobileMultiSelectToolbar,

resources/js/views/FileView/MySharedItems.vue

@@ -63,11 +63,11 @@
 			</MobileActionButton>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
-			<template v-slot:empty-file-page>
+			<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
-				<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
+		</EmptyFilePage>
-			</template>
+
-		</FileBrowser>
+		<FileBrowser />
 
 		<MobileMultiSelectToolbar>
 			<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
@@ -77,6 +77,7 @@
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -103,6 +104,7 @@
 			ContextMenu,
 			Option,
 			FileActionsMobile,
+			EmptyFilePage,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/Public.vue

@@ -99,30 +99,31 @@
 			</template>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
-			<template v-slot:empty-file-page>
+			<template v-if="$checkPermission('editor')">
-				<template v-if="$checkPermission('editor')">
+				<h1 class="title">
-					<h1 class="title">
+					{{ $t('empty_page.title') }}
-						{{ $t('empty_page.title') }}
+				</h1>
-					</h1>
+				<p class="description">
-					<p class="description">
+					{{ $t('empty_page.description') }}
-						{{ $t('empty_page.description') }}
+				</p>
-					</p>
+				<ButtonUpload button-style="theme">
-					<ButtonUpload button-style="theme">
+					{{ $t('empty_page.call_to_action') }}
-						{{ $t('empty_page.call_to_action') }}
+				</ButtonUpload>
-					</ButtonUpload>
-				</template>
-				<template v-if="$checkPermission('visitor')">
-					<h1 class="title">
-						{{ $t('empty_page.title') }}
-					</h1>
-				</template>
 			</template>
-		</FileBrowser>
+			<template v-if="$checkPermission('visitor')">
+				<h1 class="title">
+					{{ $t('empty_page.title') }}
+				</h1>
+			</template>
+		</EmptyFilePage>
+
+		<FileBrowser />
 	</div>
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -153,6 +154,7 @@
 			ContextMenu,
 			Option,
 			FileActionsMobile,
+			EmptyFilePage,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/RecentUploads.vue

@@ -57,19 +57,19 @@
 			</MobileActionButton>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
-			<template v-slot:empty-file-page>
+			<h1 class="title">
-				<h1 class="title">
+				{{ $t('empty_page.title') }}
-					{{ $t('empty_page.title') }}
+			</h1>
-				</h1>
+			<p class="description">
-                <p class="description">
+				{{ $t('empty_page.description') }}
-					{{ $t('empty_page.description') }}
+			</p>
-				</p>
+			<ButtonUpload button-style="theme">
-                <ButtonUpload button-style="theme">
+				{{ $t('empty_page.call_to_action') }}
-                    {{ $t('empty_page.call_to_action') }}
+			</ButtonUpload>
-                </ButtonUpload>
+		</EmptyFilePage>
-			</template>
+
-		</FileBrowser>
+		<FileBrowser />
 
 		<MobileMultiSelectToolbar>
 			<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
@@ -79,6 +79,7 @@
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -107,6 +108,7 @@
 			ContextMenu,
 			Option,
 			FileActionsMobile,
+			EmptyFilePage,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/SharedWithMe.vue

@@ -75,44 +75,45 @@
 			</MobileActionButton>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
-			<template v-slot:empty-file-page>
 
-				<!--Homepage-->
+			<!--Homepage-->
-				<template v-if="isTeamFolderHomepage">
+			<template v-if="isTeamFolderHomepage">
-					<h1 class="title">
+				<h1 class="title">
-						{{ $t('Nothing shared with you') }}
+					{{ $t('Nothing shared with you') }}
-					</h1>
+				</h1>
-					<p class="description">
+				<p class="description">
-						{{ $t('All items that are shared with you will be visible here.') }}
+					{{ $t('All items that are shared with you will be visible here.') }}
-					</p>
+				</p>
-				</template>
-
-				<!--Empty folder wit can-edit privileges -->
-				<template v-if="canEdit && ! isTeamFolderHomepage">
-					<h1 class="title">
-						{{ $t('empty_page.title') }}
-					</h1>
-					<p class="description">
-						{{ $t('empty_page.description') }}
-					</p>
-					<ButtonUpload button-style="theme">
-						{{ $t('empty_page.call_to_action') }}
-					</ButtonUpload>
-				</template>
-
-				<!--Empty folder wit can-view privileges -->
-				<template v-if="! canEdit && ! isTeamFolderHomepage">
-					<h1 class="title">
-						{{ $t('There is Nothing Yet') }}
-					</h1>
-				</template>
 			</template>
-		</FileBrowser>
+
+			<!--Empty folder wit can-edit privileges -->
+			<template v-if="canEdit && ! isTeamFolderHomepage">
+				<h1 class="title">
+					{{ $t('empty_page.title') }}
+				</h1>
+				<p class="description">
+					{{ $t('empty_page.description') }}
+				</p>
+				<ButtonUpload button-style="theme">
+					{{ $t('empty_page.call_to_action') }}
+				</ButtonUpload>
+			</template>
+
+			<!--Empty folder wit can-view privileges -->
+			<template v-if="! canEdit && ! isTeamFolderHomepage">
+				<h1 class="title">
+					{{ $t('There is Nothing Yet') }}
+				</h1>
+			</template>
+		</EmptyFilePage>
+
+		<FileBrowser />
 	</div>
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -149,6 +150,7 @@
 			ButtonBase,
 			Option,
 			FileActionsMobile,
+			EmptyFilePage,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/TeamFolders.vue

@@ -98,38 +98,38 @@
 			</MobileActionButton>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
-			<template v-slot:empty-file-page>
+			<template v-if="isTeamFolderHomepage">
-
+				<h1 class="title">
-				<template v-if="isTeamFolderHomepage">
+					{{ $t('Create your Team Folder') }}
-					<h1 class="title">
+				</h1>
-						{{ $t('Create your Team Folder') }}
+				<p class="description">
-					</h1>
+					{{ $t('Share your files with your team easily by creating new team folder.') }}
-					<p class="description">
+				</p>
-						{{ $t('Share your files with your team easily by creating new team folder.') }}
+				<ButtonBase @click.native="$createTeamFolder" button-style="theme" class="m-center">
-					</p>
+					{{ $t('Create Team Folder') }}
-					<ButtonBase @click.native="$createTeamFolder" button-style="theme" class="m-center">
+				</ButtonBase>
-						{{ $t('Create Team Folder') }}
-					</ButtonBase>
-				</template>
-
-				<template v-if="! isTeamFolderHomepage">
-					<h1 class="title">
-						{{ $t('empty_page.title') }}
-					</h1>
-					<p class="description">
-						{{ $t('empty_page.description') }}
-					</p>
-					<ButtonUpload button-style="theme">
-						{{ $t('empty_page.call_to_action') }}
-					</ButtonUpload>
-				</template>
 			</template>
-		</FileBrowser>
+
+			<template v-if="! isTeamFolderHomepage">
+				<h1 class="title">
+					{{ $t('empty_page.title') }}
+				</h1>
+				<p class="description">
+					{{ $t('empty_page.description') }}
+				</p>
+				<ButtonUpload button-style="theme">
+					{{ $t('empty_page.call_to_action') }}
+				</ButtonUpload>
+			</template>
+		</EmptyFilePage>
+
+		<FileBrowser />
 	</div>
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -166,6 +166,7 @@
 			ButtonBase,
 			Option,
 			FileActionsMobile,
+			EmptyFilePage,
 		},
 		computed: {
 			...mapGetters([

resources/js/views/FileView/Trash.vue

@@ -60,11 +60,11 @@
 			</MobileActionButton>
 		</FileActionsMobile>
 
-		<FileBrowser>
+		<EmptyFilePage>
-			<template v-slot:empty-file-page>
+			<h1 class="title">{{ $t('empty_page.title') }}</h1>
-				<h1 class="title">{{ $t('empty_page.title') }}</h1>
+		</EmptyFilePage>
-			</template>
+
-		</FileBrowser>
+		<FileBrowser />
 
 		<MobileMultiSelectToolbar>
 			<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
@@ -74,6 +74,7 @@
 </template>
 
 <script>
+	import EmptyFilePage from "../../components/FilesView/EmptyFilePage";
 	import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -100,6 +101,7 @@
 			ContextMenu,
 			Option,
 			FileActionsMobile,
+			EmptyFilePage,
 		},
 		computed: {
 			...mapGetters([