From bf6cd34cf68bdd534fb1d0a662c32285add6af02 Mon Sep 17 00:00:00 2001
From: Milos Holba <milosholba78@gmail.com>
Date: Tue, 23 Feb 2021 16:15:29 +0100
Subject: [PATCH] make separated EmojiPicker component, add Spinner to search
 emojis

---
 public/mix-manifest.json                      | 143 ++---
 .../js/components/Others/EmojiPicker.vue      | 491 ++++++++++++++++++
 resources/js/components/Others/RenameItem.vue |   2 +-
 .../js/components/Others/SetFolderIcon.vue    | 472 +----------------
 resources/sass/app.scss                       |   7 +-
 5 files changed, 602 insertions(+), 513 deletions(-)
 create mode 100644 resources/js/components/Others/EmojiPicker.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 8655be7c..7f41bc76 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,65 +1,82 @@
 {
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=3063523dc4a3aee7ac59",
-    "/js/main.js": "/js/main.js?id=0229401b7e8985e5572a",
-    "/css/app.css": "/css/app.css?id=dfd52fc997b919cd3686",
-    "/chunks/admin.js": "/chunks/admin.js?id=7672646537b5813becf0",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=3f5a34aa8341af8d2b4c",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=9ec9a42482cb302a05f6",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=92903bd1d316b3db1dfa",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=9d646578982ba61813b6",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=4623bd961647897a5b81",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=b19a701cdfa06e4817ff",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=11c86d822269f1a1577e",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=6784314933372fb1adf0",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=d304bcf7d4157e81f3e2",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=b73a5b6f7d2a448cc5ab",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=81906d205ba0107c5105",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=004908727045abd0852e",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=cdfd468f0d0f98b9f081",
-    "/chunks/database.js": "/chunks/database.js?id=b8d8269f77c52f78c784",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2e3af103d13536c50757",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=106f81cefe76c62d476e",
-    "/chunks/files.js": "/chunks/files.js?id=b213d4fe15c2a9933f32",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=95ce5e5685dc9315f515",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=6db12008aa646ad5fb6f",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=83389adf0760820af6f5",
-    "/chunks/landing-page.js": "/chunks/landing-page.js?id=546ed735edf0d80c8a7e",
-    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=848666d6c49c613f7f99",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=bd41ae13951c2a5025c3",
-    "/chunks/pages.js": "/chunks/pages.js?id=df7245abef9e3b77a218",
-    "/chunks/plan.js": "/chunks/plan.js?id=cfd7b4ee7e21639a837d",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=9bb62af36193ee9648d3",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=7b7601f044e0ef47720b",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=8d3e75ff9adb22a25d57",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=3b4a29497fc878f503db",
-    "/chunks/plans.js": "/chunks/plans.js?id=feb924949bffcdf3d9fb",
-    "/chunks/profile.js": "/chunks/profile.js?id=f990697f8d4ff45df434",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=5d7406ecd84c676db8fb",
-    "/chunks/settings.js": "/chunks/settings.js?id=d16d9e2cda6aa3a3f6dc",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=b05e24dd8be60f62ee27",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=72d317b39264987e6ed0",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=014597c63c94d3ac9f60",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2a0ea9cf661deba6fc13",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=b3f25de02dd4ef072df0",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=aa3d963f578d7bc5ff88",
-    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=ba10fd3f52a7b62d3092",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=4489cb4cfa33fb249bea",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=c52ce81c3dad56d7a7d8",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=2f12850d320b2413cf54",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6622381f1d96e8319999",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=f1b093a3bcfebd5bc8a5",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=e0e2f821aac16b32da34",
-    "/chunks/upgrade.js": "/chunks/upgrade.js?id=0c8d40bed72e86359529",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=a8db2246f9326e5c5957",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=f050f10627424b730dc2",
-    "/chunks/user.js": "/chunks/user.js?id=6f2ab796211a3ac8670f",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=0d630acda4552c315417",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=db041eae3aef3e45197a",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=8cf2fe554e8d67ac8677",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a0613909cb0c21817804",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=653bba3eb8d117c3a043",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=630b0ff649e16d3627af",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=0b4226ba77f10b83de4a",
-    "/chunks/users.js": "/chunks/users.js?id=04ca09662595fae56488"
+    "/js/main.js": "/js/main.js",
+    "/css/app.css": "/css/app.css",
+    "/chunks/admin.js": "/chunks/admin.js?id=03478fff46fc7903ecc4",
+    "/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=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=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=2dcbe307133d780b6472",
+    "/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=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=65857e375e79bbaca9c8",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=e84968ddf7a1a0e0381d",
+    "/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=ee57c44ceca0e7202363",
+    "/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=1fc78cfeb3befbd92423",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
+    "/chunks/files.js": "/chunks/files.js?id=b738eb9054e663cc32b7",
+    "/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=f61085447efd33a6ebbb",
+    "/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=be9304e6ba2c61b6cab3",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=0dddc007dba47ac5785e",
+    "/chunks/landing-page.js": "/chunks/landing-page.js?id=6c1137fd4f4d6e03b685",
+    "/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=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=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=9c4a9daae2237285f35b",
+    "/chunks/settings.js": "/chunks/settings.js?id=2638798e697164161f7c",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=4b2742e154eba9a7022a",
+    "/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=2841bc16a6028d8d315c",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=0ec77e47b2622ee5e253",
+    "/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=67672752eb26f92e2973",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=7b6565f5df2060b45bc0",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=39de7293c26fb3cef1a3",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=57235ac99a66b55fbf7c",
+    "/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=ee2f061bc040513f1d0d",
+    "/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=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=c001bef2d6d5171cb359",
+    "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
+    "/js/main.fec7012ae1f34893589d.hot-update.js": "/js/main.fec7012ae1f34893589d.hot-update.js",
+    "/js/main.2ee91a6dae14a1cadc9b.hot-update.js": "/js/main.2ee91a6dae14a1cadc9b.hot-update.js",
+    "/js/main.9eae7983f12897789247.hot-update.js": "/js/main.9eae7983f12897789247.hot-update.js",
+    "/js/main.2d64c86de0df943928b2.hot-update.js": "/js/main.2d64c86de0df943928b2.hot-update.js"
 }
diff --git a/resources/js/components/Others/EmojiPicker.vue b/resources/js/components/Others/EmojiPicker.vue
new file mode 100644
index 00000000..7d53eb88
--- /dev/null
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -0,0 +1,491 @@
+<template>
+    <div class="select-emoji-wrapper">
+        <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
+
+        <!-- Selected Emoji input -->
+        <div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
+
+            <!-- If is emoji selected -->
+            <div class="select-input" v-if="selectedEmoji">
+                <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
+                    <x-icon size="14" class="select-input-icon"/>
+                </div>
+                <Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
+                <span>{{ selectedEmoji.name }}</span>
+            </div>
+
+            <!-- If is emoji not selected -->
+            <div class="not-selected" v-if="! selectedEmoji">
+                <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
+            </div>
+
+            <chevron-down-icon class="row-icon" size="19"/>
+        </div>
+
+        <!-- Emojis List -->
+        <transition name="slide-in">
+            <div v-if="selectOpen">
+                <!-- Spinner -->
+                <div v-if="!loadedList" class="emoji-wrapper">
+                    <Spinner/>
+                </div>
+
+                <!-- List -->
+                <div v-if="loadedList && emojis" class="emoji-wrapper">
+
+                    <!-- Search input -->
+                    <input @click.stop @input="searchEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
+
+                    <!-- Navigation of Emojis Groups -->
+                    <ul v-show="searchInput.length < 1" class="groups-list">
+                        <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
+                            <Emoji :emoji="group.emoji" location="emoji-picker" />
+                        </li>
+                    </ul>
+
+                    <!-- All Emojis -->
+                    <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
+                        <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
+                            <label class="group-name-label">{{ name }}</label>
+                            <ul class="options-list">
+                                <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
+                                    <Emoji :emoji="emoji" location="emoji-picker" />
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- Searched emojis -->
+                    <div v-if="searchInput.length > 0" class="group-wrapper">
+                        <div class="options-wrapper">
+                            <ul class="options-list">
+                                <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
+                                    <Emoji :emoji="emoji" location="emoji-picker" />
+                                </li>
+                            </ul>
+                            <span class="not-found" v-if="filteredEmojis.length === 0 && filteredEmojisLoaded"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
+                            <Spinner v-if=" ! filteredEmojisLoaded "/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { ChevronDownIcon, XIcon } from 'vue-feather-icons'
+import Spinner from '@/components/FilesView/Spinner'
+import Emoji from '@/components/Others/Emoji'
+import { mapGetters } from 'vuex'
+import { groupBy } from 'lodash'
+import { events } from '@/bus'
+
+
+export default {
+    name: 'EmojiPicker',
+    props: [ 'pickedEmoji' ],
+    components: {
+        ChevronDownIcon,
+        Spinner,
+        Emoji,
+        XIcon,
+    },
+    computed: {
+        ...mapGetters([ 'emojis' ]),
+        allEmoji() {
+            return groupBy(this.emojis.emojisList, 'group')
+        }
+    },
+    data () {
+        return {
+            selectedEmoji: this.pickedEmoji,
+            searchInput: '',
+            filteredEmojis: [],
+            selectOpen: false,
+            loadedList: false,
+            filteredEmojisLoaded: true,
+            groupInView: 'Smileys & Emotion',
+        }
+    },
+    methods: {
+        checkGroupInView: _.debounce( function() {
+
+            this.emojis.emojisGroups.forEach(group => {
+
+                let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
+                let groupBox = document.getElementById('group-box').getBoundingClientRect()
+
+                // Check if the group is in the viewport of group-box
+                if (element.top < groupBox.top && element.bottom > groupBox.top) {
+                    this.groupInView = group.name
+                }
+            })
+
+        }, 200),
+        scrollToGroup(name) {
+
+            let group = document.getElementById(`group-${name}`)
+
+            group.scrollIntoView({ behavior: 'smooth' })
+
+            this.groupInView = name
+        },
+        searchEmojis() {
+
+            // Turn on spinner until filteredEmojis will loaded
+
+            this.filteredEmojisLoaded = false
+
+            this.filteredEmojis = [],
+
+            this.filterEmojis()
+
+        },
+        filterEmojis: _.debounce(function() {
+
+            this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes( this.searchInput.toLowerCase() ))
+
+            this.filteredEmojisLoaded = true
+
+        }, 800),
+        openMenu() {
+
+            this.selectOpen = !this.selectOpen
+
+            //Load emojis
+            if (this.selectOpen) {
+                this.$store.dispatch('getEmojisList').then((loaded) => {
+                    this.loadedList = loaded
+                })
+            }
+
+            if ( ! this.selectOpen ) 
+                this.loadedList = false
+
+            this.searchInput = ''
+
+            this.groupInView = 'Smileys & Emotion'
+        },
+        setIcon(value) {
+
+            // Set emoji
+            this.selectedEmoji = value.emoji
+
+            events.$emit('setFolderIcon', { 'value': value })
+
+            this.selectOpen = false
+        },
+        resetEmoji() {
+
+            this.selectedEmoji = undefined
+
+            events.$emit('setFolderIcon', { 'value': 'default' })
+        }
+    },
+     mounted() {
+
+        this.selectOpen = false
+
+        events.$on('unClick', () => {
+
+            this.selectOpen = false
+
+            this.loadedList = false
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/vue-file-manager/_inapp-forms.scss";
+@import '@assets/vue-file-manager/_forms';
+
+.select-emoji-wrapper {
+    margin-bottom: 20px;
+}
+
+.main-label {
+    @include font-size(14);
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.emoji-wrapper {
+    height: 400px;
+    width: 100%;
+    position: absolute;
+    border: 1px solid transparent;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    z-index: 10;
+    top: 152px;
+
+
+    .groups-list {
+        display: grid;
+        grid-template-columns: repeat(9, auto);
+        justify-content: space-between;
+        overflow-x: auto;
+        overflow-y: hidden;
+        height: 90px;
+
+        .active {
+            background: $light_background;
+            border-radius: 8px;
+        }
+
+        .group-option {
+            width: 45px;
+            height: 45px;
+            list-style: none;
+            padding: 6px;
+            cursor: pointer;
+
+            &:hover {
+                background: $light_background;
+                border-radius: 8px;
+            }
+        }
+    }
+
+    .emoji-input {
+        width: 100%;
+        border-radius: 8px;
+        padding: 4px;
+        margin-bottom: 20px;
+        background: $light_background;
+        border: none;
+        padding: 13px 20px;
+        font-weight: 700;
+
+        &::placeholder {
+            font-weight: 700;
+            color: $light_text;
+        }
+    }
+
+    .group-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        overflow-y: scroll;
+        padding: 0px;
+
+        .options-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
+
+            &:last-child {
+                margin-bottom: 0px;
+            }
+
+            .options-list {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, 45px);
+                justify-content: space-between;
+                width: 100%;
+            }
+
+            .group-name-label {
+                width: 100%;
+                @include font-size(14);
+                font-weight: 700;
+                margin-bottom: 10px;
+            }
+
+            .option {
+                list-style: none;
+                width: 45px;
+                height: 45px;
+                padding: 6px;
+                cursor: pointer;
+
+                &:hover {
+                    background: $light_background;
+                    border-radius: 8px;
+                }
+            }
+
+            .not-found {
+                align-self: center;
+                margin: auto;
+                font-weight: 700;
+                padding: 10px;
+                border-radius: 8px;
+                background: $light_background;
+                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+            }
+        }
+    }
+}
+
+.select-input-wrapper {
+    height: 50px;
+    padding: 13px 20px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid transparent;
+    @include transition(150ms);
+
+    .row-icon {
+        @include transition(150ms);
+    }
+
+    &.active-menu {
+        border-color: $theme;
+        box-shadow: 0 0 7px rgba($theme, 0.3);
+
+        .row-icon {
+            transform: rotate(180deg);
+        }
+    }
+
+    .select-input {
+        @include font-size(16);
+        font-weight: 700;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .emoji-preview {
+            margin-left: 5px;
+            margin-right: 10px;
+            width: 22px;
+            height: 22px;
+        }
+
+        .select-input-icon-wrapper {
+            width: 22px;
+            height: 22px;
+            border-radius: 6px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: -7px;
+
+            &:hover {
+
+                .select-input-icon {
+                    line {
+                        stroke: $theme;
+                    }
+                }
+            }
+
+            .select-input-icon {
+                line {
+                    stroke: $text;
+                }
+            }
+        }
+    }
+
+    .not-selected {
+        span {
+            color: rgba($text, 0.5);
+            @include font-size(15);
+            font-weight: 700
+        }
+    }
+}
+
+.slide-in-enter-active {
+    transition: all 150ms ease;
+}
+
+.slide-in-enter {
+    opacity: 0;
+    transform: translateY(-210px);
+}
+
+.slide-in-enter-to {
+    transform: translateY(-134px);
+}
+
+@media (max-width: 690px) {
+    .emoji-wrapper {
+        height: 300px;
+    }
+}
+
+@media (max-width: 336px) {
+    .emoji-wrapper {
+        top: 173px;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .emoji-wrapper {
+        background: $dark_mode_background;
+
+        .emoji-input {
+            background: $dark_mode_foreground;
+        }
+
+        .groups-list {
+            .active {
+                background: $dark_mode_foreground !important;
+            }
+
+            .group-option {
+                &:hover {
+                    background: $dark_mode_foreground !important;
+                }
+            }
+        }
+
+        .options-wrapper {
+            .option {
+                &:hover {
+                    background: $dark_mode_foreground !important;
+                }
+            }
+
+            .not-found {
+                background: $dark_mode_foreground !important;
+            }
+        }
+    }
+
+    .select-input-wrapper {
+        background: $dark_mode_foreground;
+
+        .not-selected {
+            span {
+                color: $dark_mode_text_secondary;
+            }
+        }
+
+        .select-input-icon-wrapper {
+            &:hover {
+                .select-input-icon {
+                    line {
+                        stroke: $theme !important;
+                    }
+                }
+            }
+
+            .select-input-icon {
+                line {
+                    stroke: $dark_mode_text_primary !important;
+                }
+            }
+        }
+    }
+}
+
+</style>
diff --git a/resources/js/components/Others/RenameItem.vue b/resources/js/components/Others/RenameItem.vue
index 88d83097..0973c552 100644
--- a/resources/js/components/Others/RenameItem.vue
+++ b/resources/js/components/Others/RenameItem.vue
@@ -24,7 +24,7 @@
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" :unique_id="pickedItem.unique_id" />
+                <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem"/>
 
                 <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
 
diff --git a/resources/js/components/Others/SetFolderIcon.vue b/resources/js/components/Others/SetFolderIcon.vue
index 9afef742..f5581568 100644
--- a/resources/js/components/Others/SetFolderIcon.vue
+++ b/resources/js/components/Others/SetFolderIcon.vue
@@ -1,82 +1,12 @@
 <template>
     <TabWrapper class="set-folder-icon">
 
-        <!-- Emojis -->
-        <TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
-            <div class="select-emoji-wrapper">
-                <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
-
-                <!-- Selected Emoji input -->
-                <div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
-
-                    <!-- If is emoji selected -->
-                    <div class="select-input" v-if="selectedEmoji">
-                        <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
-                            <x-icon size="14" class="select-input-icon"/>
-                        </div>
-                        <Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
-                        <span>{{ selectedEmoji.name }}</span>
-                    </div>
-
-                    <!-- If is emoji not selected -->
-                    <div class="not-selected" v-if="! selectedEmoji">
-                        <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
-                    </div>
-
-                    <chevron-down-icon class="row-icon" size="19"/>
-                </div>
-
-                <!-- Emojis List -->
-                <transition name="slide-in">
-                    <div v-if="selectOpen">
-                        <!-- Spinner -->
-                        <div v-if="!loadedList" class="emoji-wrapper">
-                            <Spinner/>
-                        </div>
-
-                        <!-- List -->
-                        <div v-if="loadedList && emojis" class="emoji-wrapper">
-
-                            <!-- Search input -->
-                            <input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
-
-                            <!-- Navigation of Emojis Groups -->
-                            <ul v-show="searchInput.length < 1" class="groups-list">
-                                <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
-                                    <Emoji :emoji="group.emoji" location="emoji-picker" />
-                                </li>
-                            </ul>
-
-                            <!-- All Emojis -->
-                            <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
-                                <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
-                                    <label class="group-name-label">{{ name }}</label>
-                                    <ul class="options-list">
-                                        <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
-                                            <Emoji :emoji="emoji" location="emoji-picker" />
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-
-                            <!-- Searched emojis -->
-                            <div v-if="searchInput.length > 0" class="group-wrapper">
-                                <div class="options-wrapper">
-                                    <ul class="options-list">
-                                        <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
-                                            <Emoji :emoji="emoji" location="emoji-picker" />
-                                        </li>
-                                    </ul>
-                                    <span class="not-found" v-if="filteredEmojis.length === 0"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </transition>
-            </div>
+        <!-- Emojis Picker -->
+        <TabOption :selected="true" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
+            <EmojiPicker :picked-emoji="pickedEmoji"/>
         </TabOption>
 
-        <!-- Colors -->
+        <!-- Colors Picker-->
         <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
             <div class="color-pick-wrapper">
                 <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
@@ -92,44 +22,31 @@
 </template>
 
 <script>
-import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon, CheckIcon } from 'vue-feather-icons'
+import { CheckIcon } from 'vue-feather-icons'
+import EmojiPicker from '@/components/Others/EmojiPicker'
 import TabWrapper from '@/components/Others/TabWrapper'
 import TabOption from '@/components/Others/TabOption'
-import Spinner from '@/components/FilesView/Spinner'
-import Emoji from '@/components/Others/Emoji'
-import { groupBy } from 'lodash'
-import { mapGetters } from 'vuex'
 import { events } from '@/bus'
 
 export default {
     name: 'SetFolderIcon',
-    props: ['folderData', 'unique_id'],
+    props: [ 'folderData' ],
     components: {
-        ChevronDownIcon,
+        EmojiPicker,
         TabWrapper,
-        FolderIcon,
-        SmileIcon,
         CheckIcon,
         TabOption,
-        Spinner,
-        XIcon,
-        Emoji
     },
     computed: {
-        ...mapGetters(['emojis']),
-        allEmoji() {
-            return groupBy(this.emojis.emojisList, 'group')
+        pickedEmoji () {
+            // If is color not seted send picked emoji via props to EmojiPicker for the EmojiSelected input
+            return !this.selectedColor ? this.selectedEmoji : ''
         }
     },
     data() {
         return {
-            selectedEmoji: undefined,
             selectedColor: undefined,
-            searchInput: '',
-            filteredEmojis: [],
-            selectOpen: false,
-            loadedList: false,
-            groupInView: 'Smileys & Emotion',
+            selectedEmoji: undefined,
             colors: [
                 '#41B883',
                 '#FE6F6F',
@@ -157,97 +74,38 @@ export default {
         }
     },
     methods: {
-        checkGroupInView: _.debounce(function() {
-
-            this.emojis.emojisGroups.forEach(group => {
-
-                let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
-                let groupBox = document.getElementById('group-box').getBoundingClientRect()
-
-                // Check if the group is in the viewport of group-box
-                if (element.top < groupBox.top && element.bottom > groupBox.top) {
-                    this.groupInView = group.name
-                }
-            })
-
-        }, 200),
-        scrollToGroup(name) {
-
-            let group = document.getElementById(`group-${name}`)
-
-            group.scrollIntoView({ behavior: 'smooth' })
-
-            this.groupInView = name
-        },
-        filterEmojis: _.debounce(function(emoji) {
-
-            this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput))
-
-        }, 800),
-        openMenu() {
-
-            this.selectOpen = !this.selectOpen
-
-            //Load emojis
-            if (this.selectOpen) {
-                this.$store.dispatch('getEmojisList').then((loaded) => {
-                    this.loadedList = loaded
-                })
-            }
-
-            if (!this.selectOpen)
-                this.loadedList = false
-
-            this.searchInput = ''
-
-            this.groupInView = 'Smileys & Emotion'
-        },
         setIcon(value) {
 
             // Set emoji
-            if (value.emoji) {
-                this.selectedEmoji = value.emoji
-                this.selectedColor = undefined
-            }
-
-            // Set color
-            if (value.color) {
-                this.selectedColor = value.color
-                this.selectedEmoji = undefined
-            }
-
-            events.$emit('setFolderIcon', { 'value': value })
-
-            this.selectOpen = false
-        },
-        resetEmoji() {
+            this.selectedColor = value.color
 
             this.selectedEmoji = undefined
+            
+            events.$emit('setFolderIcon', { 'value': value })
 
-            events.$emit('setFolderIcon', { 'value': 'default' })
         }
     },
     mounted() {
 
-        this.selectOpen = false
-
-        // If folder have already set some emoji set this emoji to selected emoji
-        this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
+        // Reset color after set emoji
+        events.$on('setFolderIcon', (icon) => {
+            
+            if(icon.value.emoji) {
+                this.selectedEmoji = icon.value.emoji
+                this.selectedColor = undefined
+            }
+        })
 
         // If folder have already set some color set this color to selected color
         this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
 
-        events.$on('unClick', () => {
-
-            this.selectOpen = false
-
-            this.loadedList = false
-        })
+        // If folder have already set some emojit set this emoji to selected emoji
+        this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
     }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
@@ -288,10 +146,6 @@ export default {
     }
 }
 
-.select-emoji-wrapper {
-    margin-bottom: 20px;
-}
-
 .main-label {
     @include font-size(14);
     font-weight: 700;
@@ -299,225 +153,10 @@ export default {
     display: block;
 }
 
-.emoji-wrapper {
-    height: 400px;
-    width: 100%;
-    position: absolute;
-    border: 1px solid transparent;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-    border-radius: 8px;
-    background: white;
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    z-index: 10;
-    top: 152px;
-
-
-    .groups-list {
-        display: grid;
-        grid-template-columns: repeat(9, auto);
-        justify-content: space-between;
-        overflow-x: auto;
-        overflow-y: hidden;
-        height: 90px;
-
-        .active {
-            background: $light_background;
-            border-radius: 8px;
-        }
-
-        .group-option {
-            width: 45px;
-            height: 45px;
-            list-style: none;
-            padding: 6px;
-            cursor: pointer;
-
-            &:hover {
-                background: $light_background;
-                border-radius: 8px;
-            }
-        }
-    }
-
-    .emoji-input {
-        width: 100%;
-        border-radius: 8px;
-        padding: 4px;
-        margin-bottom: 20px;
-        background: $light_background;
-        border: none;
-        padding: 13px 20px;
-        font-weight: 700;
-
-        &::placeholder {
-            font-weight: 700;
-            color: $light_text;
-        }
-    }
-
-    .group-wrapper {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        overflow-y: scroll;
-        padding: 0px;
-
-        .options-wrapper {
-            display: flex;
-            flex-wrap: wrap;
-            margin-bottom: 10px;
-
-            &:last-child {
-                margin-bottom: 0px;
-            }
-
-            .options-list {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, 45px);
-                justify-content: space-between;
-                width: 100%;
-            }
-
-            .group-name-label {
-                width: 100%;
-                @include font-size(14);
-                font-weight: 700;
-                margin-bottom: 10px;
-            }
-
-            .option {
-                list-style: none;
-                width: 45px;
-                height: 45px;
-                padding: 6px;
-                cursor: pointer;
-
-                &:hover {
-                    background: $light_background;
-                    border-radius: 8px;
-                }
-            }
-
-            .not-found {
-                align-self: center;
-                margin: auto;
-                font-weight: 700;
-                padding: 10px;
-                border-radius: 8px;
-                background: $light_background;
-                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-            }
-        }
-    }
-}
-
-.select-input-wrapper {
-    height: 50px;
-    padding: 13px 20px;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid transparent;
-    @include transition(150ms);
-
-    .row-icon {
-        @include transition(150ms);
-    }
-
-    &.active-menu {
-        border-color: $theme;
-        box-shadow: 0 0 7px rgba($theme, 0.3);
-
-        .row-icon {
-            transform: rotate(180deg);
-        }
-    }
-
-    .select-input {
-        @include font-size(16);
-        font-weight: 700;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .emoji-preview {
-            margin-left: 5px;
-            margin-right: 10px;
-            width: 22px;
-            height: 22px;
-        }
-
-        .select-input-icon-wrapper {
-            width: 22px;
-            height: 22px;
-            border-radius: 6px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: -7px;
-
-            &:hover {
-
-                .select-input-icon {
-                    line {
-                        stroke: $theme;
-                    }
-                }
-            }
-
-            .select-input-icon {
-                line {
-                    stroke: $text;
-                }
-            }
-        }
-    }
-
-    .not-selected {
-        span {
-            color: rgba($text, 0.5);
-            @include font-size(15);
-            font-weight: 700
-        }
-    }
-}
-
 .set-folder-icon {
     position: relative;
 }
 
-.slide-in-enter-active {
-    transition: all 150ms ease;
-}
-
-.slide-in-enter {
-    opacity: 0;
-    transform: translateY(-210px);
-}
-
-.slide-in-enter-to {
-    transform: translateY(-134px);
-}
-
-@media (max-width: 690px) {
-    .emoji-wrapper {
-        height: 300px;
-    }
-}
-
-@media (max-width: 336px) {
-    .emoji-wrapper {
-        top: 173px;
-    }
-}
-
 @media (prefers-color-scheme: dark) {
     .color-pick-wrapper {
         .color-wrapper {
@@ -532,64 +171,5 @@ export default {
             }
         }
     }
-
-    .emoji-wrapper {
-        background: $dark_mode_background;
-
-        .emoji-input {
-            background: $dark_mode_foreground;
-        }
-
-        .groups-list {
-            .active {
-                background: $dark_mode_foreground !important;
-            }
-
-            .group-option {
-                &:hover {
-                    background: $dark_mode_foreground !important;
-                }
-            }
-        }
-
-        .options-wrapper {
-            .option {
-                &:hover {
-                    background: $dark_mode_foreground !important;
-                }
-            }
-
-            .not-found {
-                background: $dark_mode_foreground !important;
-            }
-        }
-    }
-
-    .select-input-wrapper {
-        background: $dark_mode_foreground;
-
-        .not-selected {
-            span {
-                color: $dark_mode_text_secondary;
-            }
-        }
-
-        .select-input-icon-wrapper {
-            &:hover {
-                .select-input-icon {
-                    line {
-                        stroke: $theme !important;
-                    }
-                }
-            }
-
-            .select-input-icon {
-                line {
-                    stroke: $dark_mode_text_primary !important;
-                }
-            }
-        }
-    }
 }
-
 </style>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 1186fdb6..43ff842a 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -459,21 +459,22 @@
     width: 18px;
     height: 18px;
     cursor: pointer;
-
   }
 
   ::-webkit-scrollbar-thumb {
-      border: 6px solid white;
+      border: 6px solid transparent;
       background: #7f7f7f;
       border-radius: 25px;
+      background-clip: padding-box ;
   }
 }
 
 @media (prefers-color-scheme: dark) { 
   .windows {
     ::-webkit-scrollbar-thumb {
-      border: 6px solid $dark_mode_background;
+      border: 6px solid transparent;
       background: $dark_mode_foreground !important;
+      background-clip: padding-box !important ;
     }
   }
 }
\ No newline at end of file