Create Folder - ContextMenu,add X icon for rename popup input, Dekstoptolbar icons,Recent uploads sorting,Windows scroller in nav sidebar,Change color of Delere in context menu

app/Http/Controllers/FileBrowser/BrowseController.php

@@ -96,7 +96,7 @@ class BrowseController extends Controller
 
         // Get User
         $user = User::with(['latest_uploads' => function($query) {
-            $query->sortable(); 
+            $query->sortable(['created_at' => 'desc']); 
         }])
             ->where('id', Auth::id())
             ->first();

app/Http/Helpers/helpers.php

@@ -792,8 +792,7 @@ function set_time_by_user_timezone($time)
 
         return Carbon::parse($time)->addMinutes($time_zone ?? null);
     }
-    if(! $user) {
 
-        return Carbon::parse($time);
+    return Carbon::parse($time);
-    }
+    
 }

public/mix-manifest.json

@@ -1,88 +1,79 @@
 {
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
-    "/chunks/admin.js": "/chunks/admin.js?id=d9ef79cabf24df304657",
+    "/chunks/admin.js": "/chunks/admin.js?id=03478fff46fc7903ecc4",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=63c04ed6eb66b99be097",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=d687d4a3e71881044040",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js?id=07b0ad73181498d46930",
     "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js?id=6cb8c3f7a9aed769ec61",
-    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=7480293537e480966ae0",
+    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=ff7684a6d7dbd9518d8b",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=b99a5c881b7f15a7e8c5",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=9e50edacd8630aa6fc22",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=b6dbd27dc777d0878f4b",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=2e6c6594ea5506c30ba4",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=d066e2c40f4c0ca68bf1",
     "/chunks/app-billings.js": "/chunks/app-billings.js?id=aac5bd51067578358164",
     "/chunks/app-email.js": "/chunks/app-email.js?id=9d1631b19f6492b8cae4",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=ec7605e0fcf922be3dbc",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=e06d6644ee1f846ae157",
     "/chunks/app-others.js": "/chunks/app-others.js?id=44efcfb317747ff3b508",
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=187ecc16f9f7fbc4ccac",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=033223b2f39c72c71a73",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=b6b0eba13665133c0a19",
     "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=52e8a931f975c4e03a3c",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=8038cc956f309a321a7c",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=65857e375e79bbaca9c8",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=bbfc290b50cebb202228",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=e84968ddf7a1a0e0381d",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=4dc0385ff5abe06d164e",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=cc28795de7e668d5919b",
     "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=a4b8a7017c82de28296b",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=108dcc4b5af4c973be56",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=0feeb46fa2549c8d4be4",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=993552e5f134268cfc44",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=cc1b4cbd4aa7f70151f7",
-    "/chunks/database.js": "/chunks/database.js?id=ce57f3e69798319aab7b",
+    "/chunks/database.js": "/chunks/database.js?id=1fc78cfeb3befbd92423",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=48efd0b887fbc804ac90",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
     "/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=e27d145b6f63719b336f",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=dc551bd28fabebbc4b9c",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=f037ea11689d01ea489e",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
     "/chunks/invoices.js": "/chunks/invoices.js?id=0dddc007dba47ac5785e",
-    "/chunks/landing-page.js": "/chunks/landing-page.js?id=963140915655ff33f611",
+    "/chunks/landing-page.js": "/chunks/landing-page.js?id=79ccc65e3b1795b8fb93",
     "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=8c8ee101f3445e086040",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=0952cc3fb3aa4797a679",
     "/chunks/pages.js": "/chunks/pages.js?id=313adabcad5dafb0f932",
     "/chunks/plan.js": "/chunks/plan.js?id=41d7a74e57ac07ce3619",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=8d1c89c91afa65224225",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=75b5346c75513e821097",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=4da54a76628aef67ea3e",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=e608674e1719be65fe6f",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=8655313c7b71b1019c8f",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=26fbcc2472b65a745366",
     "/chunks/plans.js": "/chunks/plans.js?id=d6d92de642403caa999b",
     "/chunks/profile.js": "/chunks/profile.js?id=015a2fcbaf2946f7eb11",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=f9e2ea1515204b5c63b6",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=91a470e84a34587f3944",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=9c4a9daae2237285f35b",
-    "/chunks/settings.js": "/chunks/settings.js?id=87d29c7fd4e0e6f1a3bd",
+    "/chunks/settings.js": "/chunks/settings.js?id=2638798e697164161f7c",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=8bc4707d554ffca037a1",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=4b2742e154eba9a7022a",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f5c1b720a5b12060b83b",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=ed9e52bea6e3a1f892ad",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=0229d51aca95ffc75902",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=6645f6fa891ede787f43",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2841bc16a6028d8d315c",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=0ec77e47b2622ee5e253",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=00c6bca64820c4fd3a89",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=3fde45b386de89651a24",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=b671f4f3198119b48449",
     "/chunks/shared-files.js": "/chunks/shared-files.js?id=b13068f12911fbf79f74",
     "/chunks/shared-page.js": "/chunks/shared-page.js?id=09252cb95089d52ee56a",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=0212907c9bf1cdbd99ed",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=91001c0d2c2522eb0d03",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=39de7293c26fb3cef1a3",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0e90002c41282e286785",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=57235ac99a66b55fbf7c",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=6ceb34852ec8a0280aef",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=51a2856dd0631053b42e",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=7176521fbf0047110ae1",
-    "/chunks/upgrade.js": "/chunks/upgrade.js?id=84fa2517046334070313",
+    "/chunks/upgrade.js": "/chunks/upgrade.js?id=ee2f061bc040513f1d0d",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=816be29562b9052cabb1",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=ce929dd655322c11151c",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=a589c99d29f03bc71487",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=8bf12e8b93c7eaee4171",
     "/chunks/user.js": "/chunks/user.js?id=bdb8a51693952859f5e1",
     "/chunks/user-create.js": "/chunks/user-create.js?id=d0056a5db2089bc05508",
     "/chunks/user-delete.js": "/chunks/user-delete.js?id=91d17d44835dd32ec36f",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=b5b474dd8fea7b99c766",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=68ea653f6d345e469307",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=04b8c39ed83dc89f739a",
     "/chunks/user-password.js": "/chunks/user-password.js?id=ac51d17a4aa7ae50bc88",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=34603496ceacb8bd2da3",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
     "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
-    "/js/main.753b6ba10ed9d4d97a80.hot-update.js": "/js/main.753b6ba10ed9d4d97a80.hot-update.js",
+    "/js/main.5d42c67e03ee7e56f6cc.hot-update.js": "/js/main.5d42c67e03ee7e56f6cc.hot-update.js"
-    "/js/main.af16f587f3c0df536787.hot-update.js": "/js/main.af16f587f3c0df536787.hot-update.js",
-    "/js/main.eaac5054084827fa9a6a.hot-update.js": "/js/main.eaac5054084827fa9a6a.hot-update.js",
-    "/js/main.a7987ebedc0bbe5feafe.hot-update.js": "/js/main.a7987ebedc0bbe5feafe.hot-update.js",
-    "/js/main.5a900c62703e5f640aba.hot-update.js": "/js/main.5a900c62703e5f640aba.hot-update.js",
-    "/js/main.ae1b4ff2f4ac363a8099.hot-update.js": "/js/main.ae1b4ff2f4ac363a8099.hot-update.js",
-    "/js/main.512897f81d528ca7db75.hot-update.js": "/js/main.512897f81d528ca7db75.hot-update.js",
-    "/js/main.dbfa2b0045d344f64eab.hot-update.js": "/js/main.dbfa2b0045d344f64eab.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.bb61eebd161e37562dc1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.bb61eebd161e37562dc1.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.59ceede1786e8fe3fdfb.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.59ceede1786e8fe3fdfb.hot-update.js"
 }

resources/js/components/FilesView/ContextMenu.vue

@@ -86,13 +86,17 @@
 
         <!-- Base location with MASTER permission-->
         <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
+            
+            <!-- No Files options -->
+            <OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && multiSelectContextMenu && noItems">
+                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
+            </OptionGroup>
 
             <!-- Single options -->
             <OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && multiSelectContextMenu">
                 <Option @click.native="addToFavourites" v-if="item && isFolder " :title="isInFavourites
                                                                                 ? $t('context_menu.remove_from_favourites')
                                                                                 : $t('context_menu.add_to_favourites')" icon="favourites"/>
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
             </OptionGroup>
 
 
@@ -117,7 +121,6 @@
                 <Option @click.native="addToFavourites" v-if="item && !hasFile" :title=" isInFavourites
                                                                                     ? $t('context_menu.remove_from_favourites')
                                                                                     : $t('context_menu.add_to_favourites')" icon="favourites"/>
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
             </OptionGroup>
 
             <OptionGroup v-if="item && !multiSelectContextMenu">
@@ -133,11 +136,13 @@
         <!-- Base & Public location with EDITOR permission-->
         <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview " id="menu-list" class="menu-options">
 
-            <!-- Single options -->
+            <!-- No Files options -->
-            <OptionGroup v-if="multiSelectContextMenu">
+            <OptionGroup v-if="multiSelectContextMenu && noItems">
                 <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
             </OptionGroup>
 
+            <!-- Single options -->
+
             <OptionGroup v-if="item && multiSelectContextMenu">
                 <Option @click.native="renameItem" :title=" $t('context_menu.rename')" icon="rename"/>
                 <Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
@@ -151,9 +156,6 @@
             </OptionGroup>
 
             <!-- Multi options -->
-            <OptionGroup v-if="!multiSelectContextMenu">
-                <Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
-            </OptionGroup>
 
             <OptionGroup v-if="item && !multiSelectContextMenu">
                 <Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
@@ -199,6 +201,10 @@ export default {
     },
     computed: {
         ...mapGetters(['user', 'fileInfoDetail']),
+        noItems(){
+            if(!this.item)
+                return true
+        },
         hasFolder() {
 
             // Check if selected items includes some folder

resources/js/components/FilesView/DesktopToolbar.vue

@@ -103,7 +103,7 @@ export default {
             return !this.$isThisLocation(['base', 'public'])
         },
         canDeleteInView() {
-            return !this.$isThisLocation([
+            let locations = [
                 'trash',
                 'trash-root',
                 'base',
@@ -111,19 +111,22 @@ export default {
                 'latest',
                 'shared',
                 'public'
-            ])
+            ]
+            return !this.$isThisLocation(locations) || this.fileInfoDetail.length === 0 
         },
         canUploadInView() {
             return !this.$isThisLocation(['base', 'public'])
         },
         canMoveInView() {
-            return !this.$isThisLocation([
+            let locations = [
                 'base',
                 'participant_uploads',
                 'latest',
                 'shared',
                 'public'
-            ])
+            ]
+            return !this.$isThisLocation(locations) || this.fileInfoDetail.length === 0 
+
         },
         canShareInView() {
             let locations = [
@@ -134,7 +137,7 @@ export default {
                 'public'
             ]
 
-            return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
+            return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1 || this.fileInfoDetail.length === 0 
         }
     },
     data() {

resources/js/components/FilesView/Option.vue

@@ -1,7 +1,7 @@
 <template>
     <li class="menu-option">
         <div class="icon">
-            <trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
+            <trash-2-icon v-if="icon === 'trash'" :class="{'danger' : icon === 'trash'}" size="17"></trash-2-icon>
             <life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
             <trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
             <eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
@@ -14,7 +14,7 @@
             <smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
             <paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon> 
         </div>
-        <div class="text-label">
+        <div class="text-label" :class="{'danger' : icon === 'trash'}">
             {{ title }}
         </div>
     </li>
@@ -71,6 +71,20 @@ import {
     display: flex;
     align-items: center;
 
+    .danger {
+        color: $danger !important;
+        
+        path,
+        line,
+        polyline,
+        rect,
+        circle,
+        polygon {
+            stroke: $danger !important;
+        }
+    
+    }
+
     .icon {
         margin-right: 20px;
         line-height: 0;

resources/js/components/Others/RenameItem.vue

@@ -15,7 +15,12 @@
                 <!--Set password-->
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_rename.label') }}:</label>
-                    <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                    <div class="input">
+                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                        <div @click="pickedItem.name = ''" class="close-icon-wrapper">
+                            <x-icon class="close-icon" size="14"/>
+                        </div>
+                    </div>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -57,6 +62,7 @@
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {XIcon} from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
     import {events} from '@/bus'
     import axios from 'axios'
@@ -75,6 +81,7 @@
             PopupHeader,
             ButtonBase,
             required,
+            XIcon,
         },
         computed: {
             itemTypeTitle() {
@@ -147,7 +154,60 @@
     @import "@assets/vue-file-manager/_inapp-forms.scss";
     @import '@assets/vue-file-manager/_forms';
 
+    .input {
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .close-icon-wrapper {
+            width: 22px;
+            height: 22px;
+            position: absolute;
+            cursor: pointer;
+            right: 21px;
+            border-radius: 6px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:hover {
+                background: $light_background;
+                .close-icon {
+                    line {
+                    stroke: $theme;
+                    }
+                }
+            }            
+
+            .close-icon {
+                line {
+                stroke: rgba($text-muted, 0.3);
+                }
+            }
+        }
+
+        
+    }
+
     .item-thumbnail {
         margin-bottom: 20px;
     }
+
+    @media (prefers-color-scheme: dark) {
+       .close-icon-wrapper {
+            &:hover {
+                background: rgba($theme, 0.1) !important;
+                .close-icon {
+                    line {
+                        stroke: $theme !important;
+                    }
+                }
+            }
+            .close-icon {
+                line {
+                    stroke: rgba($dark_mode_text_primary, 0.3) !important;
+                }
+            }            
+       }
+    }
 </style>

resources/js/components/Others/SetFolderIcon.vue

@@ -60,13 +60,21 @@
 
 <script>
     import {SmileIcon, FolderIcon, ChevronDownIcon   } from 'vue-feather-icons'
+    import TableWrapper from '@/components/Others/TableWrapper'
+    import TableOption from '@/components/Others/TableOption'
     import emojis from '../../emoji.json'
     import {events} from '@/bus'
 
     export default {
         name: "SetFolderIcon",
         props: ['folderData', 'unique_id'],
-        components: {SmileIcon, FolderIcon, ChevronDownIcon },
+        components: {
+            ChevronDownIcon ,
+            TableWrapper,
+            TableOption,
+            FolderIcon,
+            SmileIcon,
+        },
         computed: {
             allEmoji() {
                 let emojisList = this.emojis

resources/js/components/Others/ShareCreate.vue

@@ -25,6 +25,11 @@
                 <div class="successfully-send"> {{$t('shared_form.email_successfully_send_message')}} </div>
             </div>
 
+            <div class="info-box">
+                <InfoBox >
+                    {{$t('shared_form.email_successfully_send_message')}}
+                </InfoBox>
+            </div>
 
 
             <!--Form to set sharing-->
@@ -111,7 +116,10 @@
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
     import CopyInput from '@/components/Others/Forms/CopyInput'
+    import TableWrapper from '@/components/Others/TableWrapper'
+    import TableOption from '@/components/Others/TableOption'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import {LinkIcon, MailIcon } from 'vue-feather-icons'
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
@@ -128,6 +136,8 @@
             ActionButton,
             PopupWrapper,
             PopupActions,
+            TableWrapper,
+            TableOption,
             PopupContent,
             PopupHeader,
             EmailsInput,
@@ -137,7 +147,8 @@
             CopyInput,
             MailIcon, 
             required,
-            LinkIcon
+            LinkIcon,
+            InfoBox
         },
         computed: {
             ...mapGetters([
@@ -265,6 +276,15 @@
     @import "@assets/vue-file-manager/_inapp-forms.scss";
     @import '@assets/vue-file-manager/_forms';
 
+    .info-box {
+        padding: 0px 20px;
+        /deep/.info-box {
+            height: 40px;
+            display: flex;
+            align-items: center;
+        }
+    }
+
     .successfully-send-wrapper {
         padding: 0px 20px;
         margin-bottom: 20px;

resources/js/components/Others/TableOption.vue

@@ -0,0 +1,68 @@
+<template>
+    <div :class="{'active' : active}"> 
+        <div class="wrapper">
+            <mail-icon v-if="icon === 'email'" class="icon" size="17"/> 
+            <link-icon v-if="icon === 'link'" class="icon" size="17"/>
+            <smile-icon v-if="icon === 'emoji'" class="icon" size="17"/>
+            <folder-icon v-if="icon === 'folder'" class="icon" size="17"/>
+            <b>{{title}}</b>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        LinkIcon,
+        MailIcon,
+        SmileIcon,
+        FolderIcon } from 'vue-feather-icons'
+
+    export default {
+        name: "TableOption",
+        props: ['title', 'icon', 'active'],
+        components: {
+            LinkIcon,
+            MailIcon,
+            SmileIcon,
+            FolderIcon
+        }
+        
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon {
+            margin-right: 10px;
+            path,
+            polyline {
+                color: $theme !important;
+            }
+        }
+     .active {
+            background: $text;
+                b {
+                    color: $light_background !important;
+                }
+        }
+
+    @media (prefers-color-scheme: dark) {
+        
+        .active {
+            background: $dark_mode_text_primary;
+                h1 {
+                    color: $dark_mode_foreground !important;
+                }
+        }
+    }
+
+</style>

resources/js/components/Others/TableWrapper.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="table-wrapper">
+        <slot>
+            <child @click="setTab"></child>
+        </slot>
+    </div>
+</template>
+
+<script>
+    import TableOption from '@/components/Others/TableOption'
+    export default {
+        name: "TableWrapper",
+        components: {TableOption},
+        data () {
+            return {
+                tabList: []
+            }
+        },
+        methods: {
+            setTab(tab){
+                console.log('setTab')
+                this.$children.find(child => child._props.title === tab)
+            }
+        },
+        mounted () {
+            this.$children.map(child => {
+                this.tabList.push(child._props.title)
+            })
+            console.log(this.$children)
+        }
+        
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .table-wrapper {
+        display: flex;
+        justify-content: center;
+        padding: 0px 20px;
+        margin-bottom: 20px;
+        cursor: pointer;
+        
+        & > * {
+            width: 100%;
+            height: 42px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $light_background;
+            color: $text;
+        }
+        & > :first-child {
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+        }
+        & > :last-child {
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+        
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .table-wrapper {   
+            & > * {
+                background: $dark_mode_foreground;
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>

resources/js/components/Sidebar/ContentSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="content-sidebar">
+    <section class="content-sidebar" id="content-sidebar">
         <slot></slot>
     </section>
 </template>

resources/js/store/modules/fileBrowser.js

@@ -80,7 +80,7 @@ const actions = {
         })
 
         axios
-            .get(getters.api + '/latest' + getters.sorting.URI)
+            .get(getters.api + '/latest' )
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
                 events.$emit('scrollTop')
@@ -209,6 +209,7 @@ const mutations = {
         state.navigation = tree
     },
     LOADING_STATE(state, payload) {
+        state.fileInfoDetail= []
         state.data = payload.data
         state.isLoading = payload.loading
     },

resources/sass/app.scss

@@ -443,6 +443,14 @@
 }
 
 .windows {
+  
+  #content-sidebar {
+    scrollbar-width: none; 
+    &::-webkit-scrollbar {
+      width: 0px;
+    }
+  }
+
   ::-webkit-scrollbar {
     width: 18px;
     height: 18px;