From 8cf6b6ea78f54df3f96b14ae3c284078d70555b2 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Sat, 21 Aug 2021 09:21:36 +0200
Subject: [PATCH] FileActionsMobile.vue refactoring

---
 public/mix-manifest.json                      |  48 ++++-
 .../FilesView/FileActionsMobile.vue           | 150 +--------------
 .../js/components/Spotlight/Spotlight.vue     |   2 +-
 resources/js/helpers/functionHelpers.js       |  20 ++
 resources/js/views/FileView/Files.vue         |  42 ++++-
 resources/js/views/FileView/MySharedItems.vue |  28 ++-
 .../js/views/FileView/NavigationPanel.vue     |  12 +-
 resources/js/views/FileView/Public.vue        | 178 ++++++++++++++++++
 resources/js/views/FileView/RecentUploads.vue |  31 ++-
 resources/js/views/FileView/Trash.vue         |  29 ++-
 resources/js/views/Platform.vue               |   7 +-
 11 files changed, 371 insertions(+), 176 deletions(-)
 create mode 100644 resources/js/views/FileView/Public.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 017778d2..aedcc453 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -36,7 +36,7 @@
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1e02112873d0b86eb1ac",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=dc4aa33310fc98be6749",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a547f8b4e9a83935a777",
-    "/chunks/files.js": "/chunks/files.js?id=69952994c602c0faa4f1",
+    "/chunks/files.js": "/chunks/files.js?id=bb9e631304f45c038f07",
     "/chunks/files~chunks/platform~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.js?id=4711dbca9d83d061561c",
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=74456138b2b60df5cb0d",
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=a831ffd52ccae7b0b983",
@@ -56,7 +56,7 @@
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=17469545c5b6a16c3bbf",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48",
     "/chunks/plans.js": "/chunks/plans.js?id=5a3c28288952fcad96e5",
-    "/chunks/platform.js": "/chunks/platform.js?id=516203dc89a47f1d1d17",
+    "/chunks/platform.js": "/chunks/platform.js?id=be707b14e5252b9c142d",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=3434322e91f37e1887a6",
     "/chunks/profile.js": "/chunks/profile.js?id=658aa03af778cc2cc100",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
@@ -279,7 +279,7 @@
     "/chunks/files~chunks/recent-uploads~chunks/settings-subscription~chunks/shared/file-browser~chunks/us~e19a6aab.js": "/chunks/files~chunks/recent-uploads~chunks/settings-subscription~chunks/shared/file-browser~chunks/us~e19a6aab.js?id=c6db4e7202b511a9dad2",
     "/chunks/files~chunks/recent-uploads~chunks/shared/file-browser.js": "/chunks/files~chunks/recent-uploads~chunks/shared/file-browser.js?id=75529efcaced324a5a41",
     "/chunks/files~chunks/recent-uploads~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/recent-uploads~chunks/shared/file-browser~chunks/shared/single-file.js?id=8edd48ae1858eec149cd",
-    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=31a5e5938c890603eb38",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=b87aa591a8421f4f0297",
     "/vendors~chunks/files~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/shared/file-browser~~6b78b248.js": "/vendors~chunks/files~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/shared/file-browser~~6b78b248.js?id=7daa0928ae6797db8131",
     "/chunks/platform.e2a097025658a9f4a106.hot-update.js": "/chunks/platform.e2a097025658a9f4a106.hot-update.js",
     "/js/main.9ff7db4e7f0964d55a3a.hot-update.js": "/js/main.9ff7db4e7f0964d55a3a.hot-update.js",
@@ -311,10 +311,10 @@
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~aaaa339d.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~aaaa339d.js?id=593b877c4ab874ceccfe",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/settings-subscription~chunks/shared~5df0355d.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/settings-subscription~chunks/shared~5df0355d.js?id=00e9511436f16aa2fb9f",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/shared/s~b80f3c10.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/shared/s~b80f3c10.js?id=b8f5bee79fa82cda17e2",
-    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js?id=03ca5b9af8e64371d757",
-    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=be67042ecb66b980c058",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.js?id=8729ac166452b3d91a81",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=67239fd4cd9fea8fea33",
     "/chunks/recent-uploads.e3ff88b07311820bcc70.hot-update.js": "/chunks/recent-uploads.e3ff88b07311820bcc70.hot-update.js",
-    "/chunks/trash.js": "/chunks/trash.js?id=e3b67a1768063dd1fe11",
+    "/chunks/trash.js": "/chunks/trash.js?id=3e6fd87082127fb69959",
     "/vendors~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chun~57b3f416.js": "/vendors~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chun~57b3f416.js?id=97d6f92560813d690f24",
     "/chunks/platform.5389987c296bbc0f9256.hot-update.js": "/chunks/platform.5389987c296bbc0f9256.hot-update.js",
     "/chunks/trash.0c591e25c8bd11631179.hot-update.js": "/chunks/trash.0c591e25c8bd11631179.hot-update.js",
@@ -558,5 +558,39 @@
     "/chunks/platform~chunks/shared/file-browser.d61eaf1096b58a661b80.hot-update.js": "/chunks/platform~chunks/shared/file-browser.d61eaf1096b58a661b80.hot-update.js",
     "/chunks/platform~chunks/shared/file-browser.2250f2e6c77d124dfbba.hot-update.js": "/chunks/platform~chunks/shared/file-browser.2250f2e6c77d124dfbba.hot-update.js",
     "/chunks/platform~chunks/shared/file-browser.a512553f25e9cd9088f4.hot-update.js": "/chunks/platform~chunks/shared/file-browser.a512553f25e9cd9088f4.hot-update.js",
-    "/chunks/platform~chunks/shared/file-browser.8a3660e247a02eaa1d71.hot-update.js": "/chunks/platform~chunks/shared/file-browser.8a3660e247a02eaa1d71.hot-update.js"
+    "/chunks/platform~chunks/shared/file-browser.8a3660e247a02eaa1d71.hot-update.js": "/chunks/platform~chunks/shared/file-browser.8a3660e247a02eaa1d71.hot-update.js",
+    "/chunks/platform.734e56bff2cd0c2d8932.hot-update.js": "/chunks/platform.734e56bff2cd0c2d8932.hot-update.js",
+    "/chunks/platform.c82c3d0292495e0d4f30.hot-update.js": "/chunks/platform.c82c3d0292495e0d4f30.hot-update.js",
+    "/chunks/platform.25a2528424328b6b959d.hot-update.js": "/chunks/platform.25a2528424328b6b959d.hot-update.js",
+    "/chunks/platform.4c44ad6cbec4d0f2a2e7.hot-update.js": "/chunks/platform.4c44ad6cbec4d0f2a2e7.hot-update.js",
+    "/chunks/platform.20db4699956babf29f39.hot-update.js": "/chunks/platform.20db4699956babf29f39.hot-update.js",
+    "/chunks/platform.df3ece7ace6f8fec97bf.hot-update.js": "/chunks/platform.df3ece7ace6f8fec97bf.hot-update.js",
+    "/chunks/platform.25ae8de99a4fb740617f.hot-update.js": "/chunks/platform.25ae8de99a4fb740617f.hot-update.js",
+    "/chunks/admin~chunks/platform.bbd3ad766b82b44c3108.hot-update.js": "/chunks/admin~chunks/platform.bbd3ad766b82b44c3108.hot-update.js",
+    "/chunks/admin~chunks/platform.91e09f5f6df9c07b0394.hot-update.js": "/chunks/admin~chunks/platform.91e09f5f6df9c07b0394.hot-update.js",
+    "/chunks/platform.2814719db7fb5953f006.hot-update.js": "/chunks/platform.2814719db7fb5953f006.hot-update.js",
+    "/chunks/platform.45f434c4b1f1af3dd33a.hot-update.js": "/chunks/platform.45f434c4b1f1af3dd33a.hot-update.js",
+    "/chunks/files.d5a1bdec7c2b91efccd0.hot-update.js": "/chunks/files.d5a1bdec7c2b91efccd0.hot-update.js",
+    "/chunks/files.72d09983e51b21ae1cf4.hot-update.js": "/chunks/files.72d09983e51b21ae1cf4.hot-update.js",
+    "/chunks/files.9f207b8a120b43dbdbc3.hot-update.js": "/chunks/files.9f207b8a120b43dbdbc3.hot-update.js",
+    "/chunks/files.0e9b9690b5e26805f69e.hot-update.js": "/chunks/files.0e9b9690b5e26805f69e.hot-update.js",
+    "/js/main.0e92323cab17760e3e02.hot-update.js": "/js/main.0e92323cab17760e3e02.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.0e92323cab17760e3e02.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.0e92323cab17760e3e02.hot-update.js",
+    "/chunks/files.c2874df0d6347a75edff.hot-update.js": "/chunks/files.c2874df0d6347a75edff.hot-update.js",
+    "/chunks/files.d0d965427dbeff0e3758.hot-update.js": "/chunks/files.d0d965427dbeff0e3758.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.740ad0926231c525802e.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.740ad0926231c525802e.hot-update.js",
+    "/chunks/recent-uploads.612dd83ddd776fb776dd.hot-update.js": "/chunks/recent-uploads.612dd83ddd776fb776dd.hot-update.js",
+    "/chunks/recent-uploads.7de564ce82f80f5b7983.hot-update.js": "/chunks/recent-uploads.7de564ce82f80f5b7983.hot-update.js",
+    "/chunks/trash.f1796617d419c2d5eb63.hot-update.js": "/chunks/trash.f1796617d419c2d5eb63.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.4a10397d74257879c284.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.4a10397d74257879c284.hot-update.js",
+    "/chunks/trash.4a10397d74257879c284.hot-update.js": "/chunks/trash.4a10397d74257879c284.hot-update.js",
+    "/chunks/trash.4931f0b269433206265f.hot-update.js": "/chunks/trash.4931f0b269433206265f.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.9a1887c57cfcb4021024.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.9a1887c57cfcb4021024.hot-update.js",
+    "/chunks/my-shared-items.08cfc12320c2d87d37c4.hot-update.js": "/chunks/my-shared-items.08cfc12320c2d87d37c4.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.52c6edee86d0c9d6a80f.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.52c6edee86d0c9d6a80f.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.5e98da0bd69dfd9c51c5.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.5e98da0bd69dfd9c51c5.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.1758a3ddb92d34510caa.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.1758a3ddb92d34510caa.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.a3264d5419378e297bfb.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.a3264d5419378e297bfb.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.623b5ea7c85db0fb6379.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.623b5ea7c85db0fb6379.hot-update.js",
+    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.66ca13c50d8cfe40fc64.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared/file-browser~chunks/trash.66ca13c50d8cfe40fc64.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/FileActionsMobile.vue b/resources/js/components/FilesView/FileActionsMobile.vue
index 6dbd1d57..a88e8785 100644
--- a/resources/js/components/FilesView/FileActionsMobile.vue
+++ b/resources/js/components/FilesView/FileActionsMobile.vue
@@ -1,112 +1,12 @@
 <template>
     <div id="mobile-actions-wrapper">
 
-        <!--Base location-->
-        <div v-if="$isThisLocation(['base']) && $checkPermission(['master', 'editor']) && ! isSelectMode" class="mobile-actions">
-            <MobileActionButton @click.native="showSpotlight" icon="search">
-				{{ $t('actions.search')}}
-			</MobileActionButton>
-			<MobileActionButton @click.native="showLocations" icon="filter">
-                {{ filterLocationTitle }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="createItems" icon="cloud-plus">
-                {{ $t('mobile.create') }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
-                {{ $t('context_menu.select') }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
-                {{ $t('preview_sorting.preview_sorting_button') }}
-            </MobileActionButton>
+        <!--Show Buttons-->
+        <div v-if="! isSelectMode" class="mobile-actions">
+			<slot></slot>
         </div>
 
-        <!--Base location editor-->
-        <div v-if="$isThisLocation('public') && $checkPermission('editor') && ! isSelectMode" class="mobile-actions">
-			<MobileActionButton @click.native="showSpotlight" icon="search">
-				{{ $t('actions.search')}}
-			</MobileActionButton>
-            <MobileActionButton @click.native="createFolder" icon="folder-plus">
-                {{ $t('context_menu.add_folder') }}
-            </MobileActionButton>
-            <MobileActionButtonUpload>
-                {{ $t('context_menu.upload') }}
-            </MobileActionButtonUpload>
-            <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
-                {{ $t('context_menu.select') }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
-                {{ $t('preview_sorting.preview_sorting_button') }}
-            </MobileActionButton>
-        </div>
-
-        <!--Base location visitor-->
-        <div v-if="$isThisLocation('public') && $checkPermission('visitor') && ! isSelectMode" class="mobile-actions">
-			<MobileActionButton @click.native="showSpotlight" icon="search">
-				{{ $t('actions.search')}}
-			</MobileActionButton>
-             <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
-               {{ $t('context_menu.select') }}
-            </MobileActionButton>
-             <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
-                {{ $t('preview_sorting.preview_sorting_button') }}
-            </MobileActionButton>
-        </div>
-
-        <!--Recent uploads location-->
-        <div v-if="$isThisLocation('latest') && ! isSelectMode" class="mobile-actions">
-			<MobileActionButton @click.native="showSpotlight" icon="search">
-				{{ $t('actions.search')}}
-			</MobileActionButton>
-            <MobileActionButton @click.native="showLocations" icon="filter">
-                {{ filterLocationTitle }}
-            </MobileActionButton>
-            <MobileActionButtonUpload>
-                {{ $t('context_menu.upload') }}
-            </MobileActionButtonUpload>
-            <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
-                {{ $t('context_menu.select') }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
-                {{ $t('preview_sorting.preview_sorting_button') }}
-            </MobileActionButton>
-        </div>
-
-        <!--Trash location--->
-        <div v-if="$isThisLocation(['trash', 'trash-root']) && ! isSelectMode" class="mobile-actions">
-			<MobileActionButton @click.native="showSpotlight" icon="search">
-				{{ $t('actions.search')}}
-			</MobileActionButton>
-            <MobileActionButton @click.native="showLocations" icon="filter">
-                {{ filterLocationTitle }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
-                {{ $t('context_menu.empty_trash') }}
-            </MobileActionButton>
-             <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
-                {{ $t('context_menu.select') }}
-            </MobileActionButton>
-             <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
-                {{ $t('preview_sorting.preview_sorting_button') }}
-            </MobileActionButton>
-        </div>
-
-        <!--Shared location--->
-        <div v-if="$isThisLocation(['shared']) && ! isSelectMode" class="mobile-actions">
-			<MobileActionButton @click.native="showSpotlight" icon="search">
-				{{ $t('actions.search')}}
-			</MobileActionButton>
-            <MobileActionButton @click.native="showLocations" icon="filter">
-                {{ filterLocationTitle }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
-                {{ $t('context_menu.select') }}
-            </MobileActionButton>
-            <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
-                {{ $t('preview_sorting.preview_sorting_button') }}
-            </MobileActionButton>
-        </div>
-
-        <!-- Multi select mode -->
+		<!-- Multi select mode -->
         <div v-if="isSelectMode" class="mobile-actions">
             <MobileActionButton @click.native="selectAll" icon="check-square">
                 {{ $t('mobile_selecting.select_all') }}
@@ -125,77 +25,37 @@
 </template>
 
 <script>
-    import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
     import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
     import UploadProgress from '/resources/js/components/FilesView/UploadProgress'
-    import {mapGetters} from 'vuex'
     import {events} from '/resources/js/bus'
-    import store from "../../store";
 
     export default {
         name: 'FileActionsMobile',
         components: {
-            MobileActionButtonUpload,
             MobileActionButton,
             UploadProgress,
         },
-        computed: {
-            ...mapGetters([
-                'FilePreviewType'
-            ]),
-            previewIcon() {
-                return this.FilePreviewType === 'list'
-                    ? 'th'
-                    : 'th-list'
-            },
-            filterLocationTitle() {
-                return {
-                    'base': 'Files',
-                    'public': 'Files',
-                    'shared': 'Shared',
-                    'latest': 'Latest',
-                    'trash': 'Trash',
-                    'trash-root': 'Trash',
-                }[this.$store.getters.currentFolder.location]
-            }
-        },
         data() {
             return {
                 isSelectMode: false,
             }
         },
         methods: {
-			showSpotlight() {
-				events.$emit('spotlight:show')
-			},
-            showLocations() {
-                events.$emit('mobile-menu:show', 'file-filter')
-            },
-			createItems() {
-                events.$emit('mobile-menu:show', 'create-list')
-            },
             selectAll() {
                 this.$store.commit('ADD_ALL_ITEMS_TO_CLIPBOARD')
             },
             deselectAll() {
                 this.$store.commit('CLIPBOARD_CLEAR')
             },
-            enableMultiSelectMode() {
-                this.isSelectMode = true
-
-                events.$emit('mobileSelecting:start')
-            },
             disableMultiSelectMode() {
                 this.isSelectMode = false
 
                 events.$emit('mobileSelecting:stop')
             },
-            showViewOptions() {
-                events.$emit('mobile-menu:show', 'file-sorting')
-            },
         },
         mounted() {
             events.$on('mobileSelecting:stop', () => this.isSelectMode = false)
+            events.$on('mobileSelecting:start', () => this.isSelectMode = true)
         }
     }
 </script>
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 580d9b6b..1b37c3e1 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -108,7 +108,7 @@ export default {
 					this.$router.push({name: 'Files'})
 				}
 
-				this.$store.dispatch('getFolder', [{ folder: this.results[this.index], back: true, init: false }])
+				this.$store.dispatch('getFolder', this.results[this.index].id)
 			} else {
 
 				// Show file
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 932f87cd..29342a1a 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -339,6 +339,26 @@ const FunctionHelpers = {
             // Show panel if is not open
             this.$store.dispatch('fileInfoToggle', true)
         }
+
+        Vue.prototype.$openSpotlight = function () {
+            events.$emit('spotlight:show')
+        }
+
+        Vue.prototype.$showLocations = function () {
+            events.$emit('mobile-menu:show', 'file-filter')
+        }
+
+        Vue.prototype.$createItems = function () {
+            events.$emit('mobile-menu:show', 'create-list')
+        }
+
+        Vue.prototype.$enableMultiSelectMode = function () {
+            events.$emit('mobileSelecting:start')
+        }
+
+        Vue.prototype.$showViewOptions = function () {
+            events.$emit('mobile-menu:show', 'file-sorting')
+        }
     }
 }
 
diff --git a/resources/js/views/FileView/Files.vue b/resources/js/views/FileView/Files.vue
index 52f407e7..f38a0de9 100644
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -43,16 +43,31 @@
 		<!--Show files & folders-->
 		<FileBrowser>
 			<template v-slot:file-actions-mobile>
-				<!-- todo: Implement mobile buttons-->
+				<MobileActionButton @click.native="$openSpotlight" icon="search">
+					{{ $t('actions.search') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showLocations" icon="filter">
+					{{ filterLocationTitle }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$createItems" icon="cloud-plus">
+					{{ $t('mobile.create') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+					{{ $t('context_menu.select') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
+					{{ $t('preview_sorting.preview_sorting_button') }}
+				</MobileActionButton>
 			</template>
 
 			<template v-slot:empty-file-page>
-				<h1 class="title">{{ $t('empty_page.title') }}</h1>
-                <p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
-                <ButtonUpload
-					v-if="$checkPermission(['master', 'editor'])"
-					button-style="theme"
-				>
+				<h1 class="title">
+					{{ $t('empty_page.title') }}
+				</h1>
+                <p v-if="$checkPermission(['master', 'editor'])" class="description">
+					{{ $t('empty_page.description') }}
+				</p>
+                <ButtonUpload v-if="$checkPermission(['master', 'editor'])" button-style="theme">
                     {{ $t('empty_page.call_to_action') }}
                 </ButtonUpload>
 			</template>
@@ -61,6 +76,8 @@
 </template>
 
 <script>
+    import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
+	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
     import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
 	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
@@ -72,6 +89,8 @@
 	export default {
 		name: 'Files',
 		components: {
+			MobileActionButtonUpload,
+			MobileActionButton,
 			ButtonUpload,
 			OptionGroup,
 			FileBrowser,
@@ -95,6 +114,15 @@
 			favourites() {
 				return this.user.data.relationships.favourites.data.attributes.folders
 			},
+			filterLocationTitle() {
+				return {
+					'RecentUploads': this.$t('Recent'),
+					'MySharedItems': this.$t('Shared'),
+					'Trash': this.$t('Trash'),
+					'Public': this.$t('Files'),
+					'Files': this.$t('Files'),
+				}[this.$route.name]
+			}
 		},
 		data() {
 			return {
diff --git a/resources/js/views/FileView/MySharedItems.vue b/resources/js/views/FileView/MySharedItems.vue
index ff8c5739..9290f076 100644
--- a/resources/js/views/FileView/MySharedItems.vue
+++ b/resources/js/views/FileView/MySharedItems.vue
@@ -35,7 +35,18 @@
 		<!--Show files & folders-->
 		<FileBrowser>
 			<template v-slot:file-actions-mobile>
-				<!-- todo: Implement mobile buttons-->
+				<MobileActionButton @click.native="$openSpotlight" icon="search">
+					{{ $t('actions.search')}}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showLocations" icon="filter">
+					{{ filterLocationTitle }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+					{{ $t('context_menu.select') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
+					{{ $t('preview_sorting.preview_sorting_button') }}
+				</MobileActionButton>
 			</template>
 
 			<template v-slot:empty-file-page>
@@ -46,6 +57,8 @@
 </template>
 
 <script>
+    import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
+	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
 	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
 	import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -56,6 +69,8 @@
 	export default {
 		name: 'MySharedItems',
 		components: {
+			MobileActionButtonUpload,
+			MobileActionButton,
 			OptionGroup,
 			FileBrowser,
 			ContextMenu,
@@ -70,7 +85,7 @@
 				return this.item && this.item.type === 'folder'
 			},
 			isInFavourites() {
-				return this.favourites.find((el) => el.id === this.item.id)
+				return this.favourites.find(el => el.id === this.item.id)
 			},
 			hasFile() {
 				return this.clipboard.find(item => item.type !== 'folder')
@@ -78,6 +93,15 @@
 			favourites() {
 				return this.user.data.relationships.favourites.data.attributes.folders
 			},
+			filterLocationTitle() {
+				return {
+					'RecentUploads': this.$t('Recent'),
+					'MySharedItems': this.$t('Shared'),
+					'Trash': this.$t('Trash'),
+					'Public': this.$t('Files'),
+					'Files': this.$t('Files'),
+				}[this.$route.name]
+			},
 		},
 		data() {
 			return {
diff --git a/resources/js/views/FileView/NavigationPanel.vue b/resources/js/views/FileView/NavigationPanel.vue
index 2cc4548c..0602813a 100644
--- a/resources/js/views/FileView/NavigationPanel.vue
+++ b/resources/js/views/FileView/NavigationPanel.vue
@@ -1,7 +1,7 @@
 <template>
-	<div v-if="user">
+	<ContentSidebar>
 		<!--Empty storage warning-->
-		<ContentGroup v-if="config.storageLimit && storage.used > 95">
+		<ContentGroup v-if="user && config.storageLimit && storage.used > 95">
 			<UpgradeSidebarBanner/>
 		</ContentGroup>
 
@@ -66,7 +66,7 @@
 		</ContentGroup>
 
 		<!--Navigator-->
-		<ContentGroup :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
+		<ContentGroup v-if="user" :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
 			<span v-if="tree.length === 0" class="empty-note navigator">
 				{{ $t('sidebar.folders_empty') }}
 			</span>
@@ -74,7 +74,7 @@
 		</ContentGroup>
 
 		<!--Favourites-->
-		<ContentGroup :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
+		<ContentGroup v-if="user" :title="$t('sidebar.favourites')" slug="favourites" :can-collapse="true">
 
 			<div @dragover.prevent="dragEnter" @dragleave="dragLeave" @drop="dragFinish($event)" :class="{ 'is-dragenter': area }" class="menu-list-wrapper vertical favourites">
 				<transition-group tag="div" class="menu-list" name="folder-item">
@@ -92,13 +92,14 @@
 				</transition-group>
 			</div>
 		</ContentGroup>
-	</div>
+	</ContentSidebar>
 </template>
 
 <script>
 	import {FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon} from "vue-feather-icons";
 	import UpgradeSidebarBanner from '/resources/js/components/Others/UpgradeSidebarBanner'
 	import TreeMenuNavigator from '/resources/js/components/Others/TreeMenuNavigator'
+	import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
 	import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
 	import {events} from "../../bus";
 	import {mapGetters} from "vuex";
@@ -108,6 +109,7 @@ export default {
 	components: {
 		UpgradeSidebarBanner,
 		TreeMenuNavigator,
+		ContentSidebar,
 		ContentGroup,
 		UploadCloudIcon,
 		UserCheckIcon,
diff --git a/resources/js/views/FileView/Public.vue b/resources/js/views/FileView/Public.vue
new file mode 100644
index 00000000..c3a4937f
--- /dev/null
+++ b/resources/js/views/FileView/Public.vue
@@ -0,0 +1,178 @@
+<template>
+	<div>
+		<ContextMenu>
+			<template v-slot:empty-select>
+				<OptionGroup>
+					<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
+				</OptionGroup>
+			</template>
+
+			<template v-slot:single-select v-if="item">
+				<OptionGroup v-if="isFolder">
+					<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
+				</OptionGroup>
+				<OptionGroup>
+					<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+					<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+					<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+				</OptionGroup>
+				<OptionGroup>
+					<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+					<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
+				</OptionGroup>
+				<OptionGroup>
+					<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
+					<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+				</OptionGroup>
+			</template>
+
+			<template v-slot:multiple-select v-if="item">
+				<OptionGroup v-if="!hasFile">
+					<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
+				</OptionGroup>
+				<OptionGroup>
+					<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+					<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+				</OptionGroup>
+				<OptionGroup>
+					<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+				</OptionGroup>
+			</template>
+		</ContextMenu>
+
+		<!--Show files & folders-->
+		<FileBrowser>
+			<template v-if="$checkPermission('editor')" v-slot:file-actions-mobile>
+				<MobileActionButton @click.native="$openSpotlight" icon="search">
+					{{ $t('actions.search') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showLocations" icon="filter">
+					{{ filterLocationTitle }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$createItems" icon="cloud-plus">
+					{{ $t('mobile.create') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+					{{ $t('context_menu.select') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
+					{{ $t('preview_sorting.preview_sorting_button') }}
+				</MobileActionButton>
+			</template>
+
+			<template v-if="$checkPermission('visitor')" v-slot:file-actions-mobile>
+				<MobileActionButton @click.native="$openSpotlight" icon="search">
+					{{ $t('actions.search')}}
+				</MobileActionButton>
+				 <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+				   {{ $t('context_menu.select') }}
+				</MobileActionButton>
+				 <MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
+					{{ $t('preview_sorting.preview_sorting_button') }}
+				</MobileActionButton>
+			</template>
+
+			<template v-slot:empty-file-page>
+				<h1 class="title">
+					{{ $t('empty_page.title') }}
+				</h1>
+                <p v-if="$checkPermission('editor')" class="description">
+					{{ $t('empty_page.description') }}
+				</p>
+                <ButtonUpload v-if="$checkPermission('editor')" button-style="theme">
+                    {{ $t('empty_page.call_to_action') }}
+                </ButtonUpload>
+			</template>
+		</FileBrowser>
+	</div>
+</template>
+
+<script>
+    import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
+	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
+    import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
+	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
+	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
+	import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
+	import Option from '/resources/js/components/FilesView/Option'
+	import { mapGetters } from 'vuex'
+	import {events} from "../../bus";
+
+	export default {
+		name: 'Files',
+		components: {
+			MobileActionButtonUpload,
+			MobileActionButton,
+			ButtonUpload,
+			OptionGroup,
+			FileBrowser,
+			ContextMenu,
+			Option,
+		},
+		computed: {
+			...mapGetters([
+				'clipboard',
+				'user',
+			]),
+			isFolder() {
+				return this.item && this.item.type === 'folder'
+			},
+			isInFavourites() {
+				return this.favourites.find((el) => el.id === this.item.id)
+			},
+			hasFile() {
+				return this.clipboard.find(item => item.type !== 'folder')
+			},
+			favourites() {
+				return this.user.data.relationships.favourites.data.attributes.folders
+			},
+			filterLocationTitle() {
+				return {
+					'RecentUploads': this.$t('Recent'),
+					'MySharedItems': this.$t('Shared'),
+					'Trash': this.$t('Trash'),
+					'Public': this.$t('Files'),
+					'Files': this.$t('Files'),
+				}[this.$route.name]
+			}
+		},
+		data() {
+			return {
+				item: undefined,
+			}
+		},
+		methods: {
+			addToFavourites() {
+				// Check if folder is in favourites and then add/remove from favourites
+				if (
+					this.favourites &&
+					!this.favourites.find(el => el.id === this.item.id)
+				) {
+					// Add to favourite folder that is not selected
+					if (!this.clipboard.includes(this.item)) {
+						this.$store.dispatch('addToFavourites', this.item)
+					}
+
+					// Add to favourites all selected folders
+					if (this.clipboard.includes(this.item)) {
+						this.$store.dispatch('addToFavourites', null)
+					}
+				} else {
+					this.$store.dispatch('removeFromFavourites', this.item)
+				}
+			},
+			downloadItem() {
+				if (this.clipboard.length > 1 || (this.clipboard.length === 1 && this.clipboard[0].type === 'folder'))
+					this.$store.dispatch('downloadZip')
+				else {
+					this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
+				}
+			},
+		},
+		created() {
+			this.$store.dispatch('getFolder', this.$route.params.id)
+
+			events.$on('contextMenu:show', (event, item) => this.item = item)
+		}
+	}
+</script>
diff --git a/resources/js/views/FileView/RecentUploads.vue b/resources/js/views/FileView/RecentUploads.vue
index d54d440c..5f2e007d 100644
--- a/resources/js/views/FileView/RecentUploads.vue
+++ b/resources/js/views/FileView/RecentUploads.vue
@@ -30,13 +30,29 @@
 		<!--Show files & folders-->
 		<FileBrowser>
 			<template v-slot:file-actions-mobile>
-				<!-- todo: Implement mobile buttons-->
+				<MobileActionButton @click.native="$openSpotlight" icon="search">
+					{{ $t('actions.search')}}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showLocations" icon="filter">
+					{{ filterLocationTitle }}
+				</MobileActionButton>
+				<MobileActionButtonUpload>
+					{{ $t('context_menu.upload') }}
+				</MobileActionButtonUpload>
+				<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+					{{ $t('context_menu.select') }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
+					{{ $t('preview_sorting.preview_sorting_button') }}
+				</MobileActionButton>
 			</template>
 		</FileBrowser>
 	</div>
 </template>
 
 <script>
+    import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
+	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
 	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
 	import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -47,6 +63,8 @@
 	export default {
 		name: 'RecentUploads',
 		components: {
+			MobileActionButtonUpload,
+			MobileActionButton,
 			OptionGroup,
 			FileBrowser,
 			ContextMenu,
@@ -56,7 +74,16 @@
 			...mapGetters([
 				'clipboard',
 				'user',
-			])
+			]),
+			filterLocationTitle() {
+				return {
+					'RecentUploads': this.$t('Recent'),
+					'MySharedItems': this.$t('Shared'),
+					'Trash': this.$t('Trash'),
+					'Public': this.$t('Files'),
+					'Files': this.$t('Files'),
+				}[this.$route.name]
+			},
 		},
 		data() {
 			return {
diff --git a/resources/js/views/FileView/Trash.vue b/resources/js/views/FileView/Trash.vue
index bb8765ba..753faab5 100644
--- a/resources/js/views/FileView/Trash.vue
+++ b/resources/js/views/FileView/Trash.vue
@@ -34,7 +34,21 @@
 		<!--Show files & folders-->
 		<FileBrowser>
 			<template v-slot:file-actions-mobile>
-				<!-- todo: Implement mobile buttons-->
+				<MobileActionButton @click.native="$openSpotlight" icon="search">
+					{{ $t('actions.search')}}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$showLocations" icon="filter">
+					{{ filterLocationTitle }}
+				</MobileActionButton>
+				<MobileActionButton @click.native="$emptyTrash" icon="trash">
+					{{ $t('context_menu.empty_trash') }}
+				</MobileActionButton>
+				 <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+					{{ $t('context_menu.select') }}
+				</MobileActionButton>
+				 <MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
+					{{ $t('preview_sorting.preview_sorting_button') }}
+				</MobileActionButton>
 			</template>
 
 			<template v-slot:empty-file-page>
@@ -45,6 +59,8 @@
 </template>
 
 <script>
+    import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
+	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
 	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
 	import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -55,6 +71,8 @@
 	export default {
 		name: 'Trash',
 		components: {
+			MobileActionButtonUpload,
+			MobileActionButton,
 			OptionGroup,
 			FileBrowser,
 			ContextMenu,
@@ -64,6 +82,15 @@
 			...mapGetters([
 				'clipboard',
 			]),
+			filterLocationTitle() {
+				return {
+					'RecentUploads': this.$t('Recent'),
+					'MySharedItems': this.$t('Shared'),
+					'Trash': this.$t('Trash'),
+					'Public': this.$t('Files'),
+					'Files': this.$t('Files'),
+				}[this.$route.name]
+			},
 		},
 		data() {
 			return {
diff --git a/resources/js/views/Platform.vue b/resources/js/views/Platform.vue
index fbc86286..40c048ee 100644
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -36,9 +36,7 @@
         <DragUI />
 
 		<!--Sidebar-->
-		<ContentSidebar>
-			<NavigationPanel />
-		</ContentSidebar>
+		<NavigationPanel />
 
 		<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
 			<DesktopToolbar/>
@@ -62,7 +60,6 @@
 	import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup"
     import ConfirmPopup from '/resources/js/components/Others/Popup/ConfirmPopup'
     import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
-	import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
     import ShareEditPopup from '/resources/js/components/Others/ShareEditPopup'
     import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
     import FilePreview from '/resources/js/components/FilePreview/FilePreview'
@@ -70,7 +67,6 @@
     import DragUI from '/resources/js/components/FilesView/DragUI'
 	import NavigationPanel from "./FileView/NavigationPanel"
     import {events} from '/resources/js/bus'
-    import {mapGetters} from 'vuex'
 
     export default {
         name: 'Platform',
@@ -90,7 +86,6 @@
             ShareEditPopup,
 			DesktopToolbar,
             FileMenuMobile,
-			ContentSidebar,
             MoveItemPopup,
             ConfirmPopup,
             FilePreview,