From 99e9c0086ea5fd83d1de336286da6fed501bdc36 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Fri, 20 Aug 2021 09:54:00 +0200
Subject: [PATCH] contextmenu refactoring

---
 public/mix-manifest.json                      |  51 +-
 .../js/components/FilesView/ContextMenu.vue   | 484 +++++-------------
 resources/js/helpers/functionHelpers.js       |   8 +
 resources/js/helpers/itemHelpers.js           |  14 +
 resources/js/store/modules/fileBrowser.js     |   4 -
 resources/js/views/FileView/Home/Files.vue    |  96 +++-
 6 files changed, 300 insertions(+), 357 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index defeefe0..c5b4b79b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -36,12 +36,12 @@
     "/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=c0cd8f81f291ae02d6db",
+    "/chunks/files.js": "/chunks/files.js?id=f7699c61807c439c44ea",
     "/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",
     "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js?id=c5ec9502bcfad35c502e",
-    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=3890fdb4554e98928fc6",
+    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=e4167732f5c336b267ec",
     "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=405a76566fbfd86d809b",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=61fb98fd41324af9cfea",
     "/chunks/homepage.js": "/chunks/homepage.js?id=6f2aac612b4c6eaabf61",
@@ -212,5 +212,50 @@
     "/chunks/platform~chunks/shared/file-browser.9ed291703ca2e7c8dbcd.hot-update.js": "/chunks/platform~chunks/shared/file-browser.9ed291703ca2e7c8dbcd.hot-update.js",
     "/chunks/platform~chunks/shared/file-browser.5294fb48ebb3f6d12351.hot-update.js": "/chunks/platform~chunks/shared/file-browser.5294fb48ebb3f6d12351.hot-update.js",
     "/chunks/files.a1f5370b7519edd60005.hot-update.js": "/chunks/files.a1f5370b7519edd60005.hot-update.js",
-    "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js": "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js"
+    "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js": "/chunks/files.6f0a1f050877d1e2c39d.hot-update.js",
+    "/js/main.e1fdbe84d7b7073e6a4f.hot-update.js": "/js/main.e1fdbe84d7b7073e6a4f.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.2fdb8434333dd5b94bf9.hot-update.js": "/chunks/files~chunks/shared/file-browser.2fdb8434333dd5b94bf9.hot-update.js",
+    "/js/main.3d57f21a691beb2d4731.hot-update.js": "/js/main.3d57f21a691beb2d4731.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.52fe3c022f17b65feecc.hot-update.js": "/chunks/files~chunks/shared/file-browser.52fe3c022f17b65feecc.hot-update.js",
+    "/chunks/files.6298607239f7c5ba7516.hot-update.js": "/chunks/files.6298607239f7c5ba7516.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.6298607239f7c5ba7516.hot-update.js": "/chunks/files~chunks/shared/file-browser.6298607239f7c5ba7516.hot-update.js",
+    "/chunks/files.90b8a1d407312da18f24.hot-update.js": "/chunks/files.90b8a1d407312da18f24.hot-update.js",
+    "/chunks/files.d1c72dd53e2b8dc531e3.hot-update.js": "/chunks/files.d1c72dd53e2b8dc531e3.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.1da0d4befcd7f579df5a.hot-update.js": "/chunks/files~chunks/shared/file-browser.1da0d4befcd7f579df5a.hot-update.js",
+    "/chunks/files.3eef7ff965f2c2fcabb4.hot-update.js": "/chunks/files.3eef7ff965f2c2fcabb4.hot-update.js",
+    "/chunks/files.6f14a67c57774b38e32a.hot-update.js": "/chunks/files.6f14a67c57774b38e32a.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.15275c00dd8dcc32180e.hot-update.js": "/chunks/files~chunks/shared/file-browser.15275c00dd8dcc32180e.hot-update.js",
+    "/chunks/files.011b9d7f15a9fbf20fee.hot-update.js": "/chunks/files.011b9d7f15a9fbf20fee.hot-update.js",
+    "/chunks/files.c3f780b083d939354c28.hot-update.js": "/chunks/files.c3f780b083d939354c28.hot-update.js",
+    "/chunks/files.4d27e61b1c84c9da270b.hot-update.js": "/chunks/files.4d27e61b1c84c9da270b.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.a4074fbd5bf83227f392.hot-update.js": "/chunks/files~chunks/shared/file-browser.a4074fbd5bf83227f392.hot-update.js",
+    "/chunks/files.621f3b6fe3c09c6af4ce.hot-update.js": "/chunks/files.621f3b6fe3c09c6af4ce.hot-update.js",
+    "/chunks/files.507486947b28b2733f15.hot-update.js": "/chunks/files.507486947b28b2733f15.hot-update.js",
+    "/chunks/files.430d15cb83aff6c406c9.hot-update.js": "/chunks/files.430d15cb83aff6c406c9.hot-update.js",
+    "/chunks/files.dc5fa2c867d280d31625.hot-update.js": "/chunks/files.dc5fa2c867d280d31625.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.bba6d54b340ea48cf223.hot-update.js": "/chunks/files~chunks/shared/file-browser.bba6d54b340ea48cf223.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.33dca32cac96790d1688.hot-update.js": "/chunks/files~chunks/shared/file-browser.33dca32cac96790d1688.hot-update.js",
+    "/chunks/files.b0d755408c6da2bd870b.hot-update.js": "/chunks/files.b0d755408c6da2bd870b.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.b0d755408c6da2bd870b.hot-update.js": "/chunks/files~chunks/shared/file-browser.b0d755408c6da2bd870b.hot-update.js",
+    "/chunks/files.375827553e299b2a760b.hot-update.js": "/chunks/files.375827553e299b2a760b.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.9665ce0b7172baa97808.hot-update.js": "/chunks/files~chunks/shared/file-browser.9665ce0b7172baa97808.hot-update.js",
+    "/chunks/files.754cc42500515c47f5a0.hot-update.js": "/chunks/files.754cc42500515c47f5a0.hot-update.js",
+    "/chunks/files.21fbac2946fb286e30c8.hot-update.js": "/chunks/files.21fbac2946fb286e30c8.hot-update.js",
+    "/js/main.00016cfb2c445f675544.hot-update.js": "/js/main.00016cfb2c445f675544.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.00016cfb2c445f675544.hot-update.js": "/chunks/files~chunks/shared/file-browser.00016cfb2c445f675544.hot-update.js",
+    "/chunks/files.49423b0e1b2925c15352.hot-update.js": "/chunks/files.49423b0e1b2925c15352.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.a2e4a082d157c6d1ea74.hot-update.js": "/chunks/files~chunks/shared/file-browser.a2e4a082d157c6d1ea74.hot-update.js",
+    "/chunks/files.ee3f47a3c5116b5b401e.hot-update.js": "/chunks/files.ee3f47a3c5116b5b401e.hot-update.js",
+    "/chunks/files.32762bd122d09306703e.hot-update.js": "/chunks/files.32762bd122d09306703e.hot-update.js",
+    "/js/main.ad05ccbac44b2c624593.hot-update.js": "/js/main.ad05ccbac44b2c624593.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.ad05ccbac44b2c624593.hot-update.js": "/chunks/files~chunks/shared/file-browser.ad05ccbac44b2c624593.hot-update.js",
+    "/chunks/files.4c7fc31461457da5d19b.hot-update.js": "/chunks/files.4c7fc31461457da5d19b.hot-update.js",
+    "/chunks/files.f98a86d3e73c8cdc33f7.hot-update.js": "/chunks/files.f98a86d3e73c8cdc33f7.hot-update.js",
+    "/chunks/files.16f924f1699275468e90.hot-update.js": "/chunks/files.16f924f1699275468e90.hot-update.js",
+    "/chunks/files.495f7c821ef89e0a8787.hot-update.js": "/chunks/files.495f7c821ef89e0a8787.hot-update.js",
+    "/chunks/files.f5b883834d41084ede46.hot-update.js": "/chunks/files.f5b883834d41084ede46.hot-update.js",
+    "/chunks/files.2794cdc38c8ca54d123e.hot-update.js": "/chunks/files.2794cdc38c8ca54d123e.hot-update.js",
+    "/chunks/files.894abb6ec52da6cabd48.hot-update.js": "/chunks/files.894abb6ec52da6cabd48.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.f88511affbcacf404db3.hot-update.js": "/chunks/files~chunks/shared/file-browser.f88511affbcacf404db3.hot-update.js",
+    "/chunks/files.9322fd1e7e2da1962d6b.hot-update.js": "/chunks/files.9322fd1e7e2da1962d6b.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/ContextMenu.vue b/resources/js/components/FilesView/ContextMenu.vue
index 21c62c64..3b4fd3e4 100644
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -1,336 +1,125 @@
 <template>
-    <div v-show="isVisible" @click="closeAndResetContextMenu" :style="{top: positionY + 'px', left: positionX + 'px'}" class="contextmenu" ref="contextmenu">
+    <div
+		v-show="isVisible"
+		:style="{top: positionY + 'px', left: positionX + 'px'}"
+		@click="closeAndResetContextMenu"
+		class="contextmenu"
+		ref="contextmenu"
+	>
+        <div id="menu-list" class="menu-options">
 
-        <!-- Trash location-->
-        <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
+			<!--Show empty select contextmenu-->
+			<slot name="empty-select" v-if="! item"></slot>
 
-            <!-- Single options -->
-            <OptionGroup v-if="isMultiSelectContextMenu">
-                <Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
-                <Option @click.native="$deleteFileOrFolder(item)" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
-                <Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-
-            <!-- Multi options -->
-            <OptionGroup v-if="!isMultiSelectContextMenu">
-                <Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
-                <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-                <Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-        </div>
-
-        <!-- Shared location with MASTER permission-->
-        <div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
-
-            <!-- Single options -->
-            <OptionGroup class="menu-option-group" v-if="item && isFolder && isMultiSelectContextMenu">
-                <Option @click.native="addToFavourites" :title="isInFavourites
-                        ? $t('context_menu.remove_from_favourites')
-                        : $t('context_menu.add_to_favourites')" icon="favourites" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
-                <Option @click.native="$shareFileOrFolder(item)" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share" />
-                <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-
-            <!-- Multi options -->
-            <OptionGroup class="menu-option-group" v-if="item && !hasFile && !isMultiSelectContextMenu">
-                <Option @click.native="addToFavourites" :title="isInFavourites
-                                ? $t('context_menu.remove_from_favourites')
-                                : $t('context_menu.add_to_favourites')" icon="favourites" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && !isMultiSelectContextMenu">
-                <Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
-                <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-        </div>
-
-        <!-- Base location with MASTER permission-->
-        <div v-if="$isThisLocation(['base', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
-            
-            <!-- No Files options -->
-            <OptionGroup v-if="!$isThisLocation(['latest']) && isMultiSelectContextMenu && !item">
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
-            </OptionGroup>
-
-            <!-- Single options -->
-            <OptionGroup v-if="!$isThisLocation(['latest']) && item && isMultiSelectContextMenu && isFolder">
-                <Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
-                <Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
-                <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <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 v-if="item && isMultiSelectContextMenu ">
-                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-
-            <!-- Multi options -->
-            <OptionGroup v-if="!$isThisLocation(['latest']) && !isMultiSelectContextMenu && item && !hasFile">
-                <Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && !isMultiSelectContextMenu">
-                <Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
-                <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-            </OptionGroup>
-
-            <OptionGroup v-if="item && !isMultiSelectContextMenu">
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-        </div>
-
-        <!-- Base & Public location with EDITOR permission-->
-        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" id="menu-list" class="menu-options">
-
-            <!-- No Files options -->
-            <OptionGroup v-if="isMultiSelectContextMenu && !item">
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
-            </OptionGroup>
-
-            <!-- Single options -->
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <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 v-if="item && isMultiSelectContextMenu">
-                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-
-            <!-- Multi options -->
-            <OptionGroup v-if="item && !isMultiSelectContextMenu">
-                <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 v-if="item && !isMultiSelectContextMenu">
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-        </div>
-
-        <!-- Base & Public location with VISITOR permission-->
-        <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
-
-            <!-- Single options -->
-            <OptionGroup v-if="item && isMultiSelectContextMenu">
-                <Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
-                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-
-            <!-- Multi options -->
-            <OptionGroup v-if="!isMultiSelectContextMenu && item ">
-                <Option @click.native="downloadItem" v-if="!hasFolder" :title="$t('context_menu.download')" icon="download" />
-                <Option v-if="hasFolder" :title="$t('context_menu.no_options')" icon="no-options" class="no-options" />
-            </OptionGroup>
+			<!--Show single select contextmenu-->
+			<slot name="single-select" v-if="isMultiSelectContextMenu"></slot>
 
+			<!--Show multiple select contextmenu-->
+			<slot name="multiple-select" v-if="! isMultiSelectContextMenu"></slot>
         </div>
     </div>
 </template>
 
 <script>
-import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
-import Option from '/resources/js/components/FilesView/Option'
-import {mapGetters} from 'vuex'
 import {events} from '/resources/js/bus'
+import {mapGetters} from 'vuex'
 
 export default {
-    name: 'ContextMenu',
-    components: {
-        OptionGroup,
-        Option
-    },
-    computed: {
-        ...mapGetters(['user', 'clipboard']),
-        hasFolder() {
-            return this.clipboard.find(item => item.type === 'folder')
-        },
-        hasFile() {
-            return this.clipboard.find(item => item.type !== 'folder')
-        },
-        isMultiSelectContextMenu() {
+	name: 'ContextMenu',
+	computed: {
+		...mapGetters([
+			'clipboard',
+			'user',
+		]),
+		isMultiSelectContextMenu() {
+			// If is context Menu open on multi selected items open just options for the multi selected items
+			if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
+				return false
 
-            // If is context Menu open on multi selected items open just options for the multi selected items
-            if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
-                return false
+			// If is context Menu open for the non selected item open options for the single item
+			if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
+				return true
+		},
+	},
+	data() {
+		return {
+			item: undefined,
+			isVisible: false,
+			positionX: 0,
+			positionY: 0
+		}
+	},
+	methods: {
+		closeAndResetContextMenu() {
+			// Close context menu
+			this.isVisible = false
 
-            // If is context Menu open for the non selected item open options for the single item
-            if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
-                return true
-        },
-        favourites() {
-            return this.user.data.relationships.favourites.data.attributes.folders
-        },
-        isFolder() {
-            return this.item && this.item.type === 'folder'
-        },
-        isFile() {
-            return (
-                this.item &&
-                this.item.type !== 'folder' &&
-                this.item &&
-                this.item.type !== 'image'
-            )
-        },
-        isImage() {
-            return this.item && this.item.type === 'image'
-        },
-        isInFavourites() {
-            return this.favourites.find((el) => el.id === this.item.id)
-        }
-    },
-    data() {
-        return {
-            item: undefined,
-            isVisible: false,
-            positionX: 0,
-            positionY: 0
-        }
-    },
-    methods: {
-        emptyTrash() {
-            this.$store.dispatch('emptyTrash')
-        },
-        shareCancel() {
-            this.$store.dispatch('shareCancel')
-        },
-        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)
-                }
+			// Reset item container
+			this.item = undefined
+		},
+		showFolderActionsMenu() {
+			let container = document.getElementById('folder-actions')
 
-                // 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)
-            }
-        },
-        ItemDetail() {
-            // Dispatch load file info detail
-            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
+			this.positionX = container.offsetLeft + 16
+			this.positionY = container.offsetTop + 30
 
-            // Show panel if is not open
-            this.$store.dispatch('fileInfoToggle', true)
-        },
-        createFolder() {
-            this.$store.dispatch('createFolder', {
-                name: this.$t('popup_create_folder.folder_default_name')
-            })
-        },
-        closeAndResetContextMenu() {
-            // Close context menu
-            this.isVisible = false
+			// Show context menu
+			this.isVisible = true
+		},
+		showContextMenu(event) {
+			let parent = document.getElementById('menu-list')
+			let nodesSameClass = parent.getElementsByClassName('menu-option')
 
-            // Reset item container
-            this.item = undefined
-        },
-        showFolderActionsMenu() {
-            let container = document.getElementById('folder-actions')
+			let VerticalOffsetArea = nodesSameClass.length * 50
+			let HorizontalOffsetArea = 190
 
-            this.positionX = container.offsetLeft + 16
-            this.positionY = container.offsetTop + 30
+			let container = document.getElementById('files-view')
 
-            // Show context menu
-            this.isVisible = true
-        },
-        showContextMenu(event) {
-            let parent = document.getElementById('menu-list')
-            let nodesSameClass = parent.getElementsByClassName('menu-option')
+			var offset = container.getClientRects()[0]
 
-            let VerticalOffsetArea = nodesSameClass.length * 50
-            let HorizontalOffsetArea = 190
+			let x = event.clientX - offset.left
+			let y = event.clientY - offset.top
 
-            let container = document.getElementById('files-view')
+			// Set position Y
+			if (container.offsetHeight - y < VerticalOffsetArea) {
+				this.positionY = y - VerticalOffsetArea
+			} else {
+				this.positionY = y
+			}
 
-            var offset = container.getClientRects()[0]
+			// Set position X
+			if (container.offsetWidth - x < HorizontalOffsetArea) {
+				this.positionX = x - HorizontalOffsetArea
+			} else {
+				this.positionX = x
+			}
 
-            let x = event.clientX - offset.left
-            let y = event.clientY - offset.top
+			// Show context menu
+			this.isVisible = true
+		}
+	},
+	created() {
+		events.$on('contextMenu:show', (event, item) => {
+			// Store item
+			this.item = item
 
-            // Set position Y
-            if (container.offsetHeight - y < VerticalOffsetArea) {
-                this.positionY = y - VerticalOffsetArea
-            } else {
-                this.positionY = y
-            }
+			// Show context menu
+			setTimeout(() => this.showContextMenu(event, item), 10)
+		})
 
-            // Set position X
-            if (container.offsetWidth - x < HorizontalOffsetArea) {
-                this.positionX = x - HorizontalOffsetArea
-            } else {
-                this.positionX = x
-            }
+		events.$on('folder:actions', (folder) => {
+			// Store item
+			this.item = folder
 
-            // Show context menu
-            this.isVisible = true
-        }
-    },
-    created() {
-        events.$on('contextMenu:show', (event, item) => {
-            // Store item
-            this.item = item
+			if (this.isVisible) {
+				this.isVisible = false
+			} else {
+				this.showFolderActionsMenu()
+			}
+		})
 
-            // Show context menu
-            setTimeout(() => this.showContextMenu(event, item), 10)
-        })
-
-        events.$on('unClick', () => this.closeAndResetContextMenu())
-
-        events.$on('folder:actions', (folder) => {
-            // Store item
-            this.item = folder
-
-            if (this.isVisible) this.isVisible = false
-            else this.showFolderActionsMenu()
-        })
-    }
+		events.$on('unClick', () => this.closeAndResetContextMenu())
+	}
 }
 </script>
 
@@ -339,60 +128,61 @@ export default {
 @import "resources/sass/vuefilemanager/_mixins";
 
 .no-options {
-    /deep/ .text-label {
-        color: $text-muted !important;
-    }
+	/deep/ .text-label {
+		color: $text-muted !important;
+	}
 
-    /deep/ &:hover {
-        background: transparent;
-    }
+	/deep/ &:hover {
+		background: transparent;
+	}
 
-    /deep/ path,
-    /deep/ line,
-    /deep/ circle {
-        stroke: $text-muted !important;
-    }
+	/deep/ path,
+	/deep/ line,
+	/deep/ circle {
+		stroke: $text-muted !important;
+	}
 }
 
 .contextmenu {
-    min-width: 250px;
-    position: absolute;
-    z-index: 99;
-    box-shadow: $shadow;
-    background: white;
-    border-radius: 8px;
-    overflow: hidden;
+	min-width: 250px;
+	position: absolute;
+	z-index: 99;
+	box-shadow: $shadow;
+	background: white;
+	border-radius: 8px;
+	overflow: hidden;
 
-    &.showed {
-        display: block;
-    }
+	&.showed {
+		display: block;
+	}
 }
 
 .menu-options {
-    list-style: none;
-    width: 100%;
-    margin: 0;
-    padding: 0;
+	list-style: none;
+	width: 100%;
+	margin: 0;
+	padding: 0;
 }
 
 .dark-mode {
-    .contextmenu {
-        background: $dark_mode_foreground;
-    }
-    .no-options {
-        /deep/ .text-label {
-            color: $dark_mode_text_secondary !important;
-        }
+	.contextmenu {
+		background: $dark_mode_foreground;
+	}
 
-        /deep/ &:hover {
-            background: transparent;
-        }
+	.no-options {
+		/deep/ .text-label {
+			color: $dark_mode_text_secondary !important;
+		}
 
-        /deep/ path,
-        /deep/ line,
-        /deep/ circle {
-            stroke: $dark_mode_text_secondary !important;
-        }
-    }
+		/deep/ &:hover {
+			background: transparent;
+		}
+
+		/deep/ path,
+		/deep/ line,
+		/deep/ circle {
+			stroke: $dark_mode_text_secondary !important;
+		}
+	}
 }
 </style>
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 689627a9..932f87cd 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -331,6 +331,14 @@ const FunctionHelpers = {
         Vue.prototype.$closePopup = function () {
             events.$emit('popup:close')
         }
+
+        Vue.prototype.$openInDetailPanel = function (entry) {
+            // Dispatch load file info detail
+            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', entry)
+
+            // Show panel if is not open
+            this.$store.dispatch('fileInfoToggle', true)
+        }
     }
 }
 
diff --git a/resources/js/helpers/itemHelpers.js b/resources/js/helpers/itemHelpers.js
index 3279936a..a8b3f69f 100644
--- a/resources/js/helpers/itemHelpers.js
+++ b/resources/js/helpers/itemHelpers.js
@@ -6,6 +6,14 @@ import store from "../store";
 
 const itemHelpers = {
 	install(Vue) {
+		Vue.prototype.$emptyTrash = function () {
+			this.$store.dispatch('emptyTrash')
+		}
+
+		Vue.prototype.$shareCancel = function () {
+			this.$store.dispatch('shareCancel')
+		}
+
 		Vue.prototype.$renameFileOrFolder = function (entry) {
 			events.$emit('popup:open', {name: 'rename-item', item: entry})
 		}
@@ -14,6 +22,12 @@ const itemHelpers = {
 			events.$emit('popup:open', {name: 'move', item: [entry]})
 		}
 
+		Vue.prototype.$createFolder = function () {
+			this.$store.dispatch('createFolder', {
+				name: this.$t('popup_create_folder.folder_default_name')
+			})
+		}
+
 		Vue.prototype.$createTeamFolder = function (entry) {
 			events.$emit('popup:open', {name: 'create-team-folder'})
 		}
diff --git a/resources/js/store/modules/fileBrowser.js b/resources/js/store/modules/fileBrowser.js
index 97468cff..cac55fed 100644
--- a/resources/js/store/modules/fileBrowser.js
+++ b/resources/js/store/modules/fileBrowser.js
@@ -22,10 +22,6 @@ const actions = {
             .get(`${getters.api}/browse/folders/${id}/${getters.sorting.URI}`)
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
-                commit('STORE_CURRENT_FOLDER', payload.folder)
-
-                if (payload.back && !payload.sorting)
-                    commit('REMOVE_BROWSER_HISTORY')
 
                 events.$emit('scrollTop')
             })
diff --git a/resources/js/views/FileView/Home/Files.vue b/resources/js/views/FileView/Home/Files.vue
index 12edb9ae..b6ba3743 100644
--- a/resources/js/views/FileView/Home/Files.vue
+++ b/resources/js/views/FileView/Home/Files.vue
@@ -1,8 +1,51 @@
 <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)" v-if="!$isThisLocation(['latest'])" :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/>
 	</div>
 </template>
@@ -10,27 +53,74 @@
 <script>
 	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: 'FilesView',
 		components: {
+			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
+			},
 		},
 		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>