vue components refactoring

resources/js/App.vue

@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import ToasterWrapper from './components/Others/Notifications/ToasterNotifications'
+import ToasterWrapper from './components/Toaster/ToasterNotifications'
 import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
 import SidebarNavigation from "./components/Sidebar/SidebarNavigation"
-import CookieDisclaimer from './components/Others/CookieDisclaimer'
-import Spinner from './components/FilesView/Spinner'
-import Vignette from './components/Others/Vignette'
-import Alert from './components/FilesView/Alert'
+import CookieDisclaimer from './components/UI/Others/CookieDisclaimer'
+import Spinner from './components/UI/Others/Spinner'
+import Vignette from './components/UI/Others/Vignette'
+import Alert from './components/Popups/Alert'
 import { mapGetters } from 'vuex'
 import { events } from './bus'
 

resources/js/components/Admin/WidgetWrapper.vue

@@ -1,30 +0,0 @@
-<template>
-    <div class="widget-card w-full">
-        <div class="widget-content bg-white dark:bg-dark-foreground">
-            <div class="flex items-center">
-                <users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3" />
-                <star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3" />
-                <hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3" />
-                <b class="text-base font-bold">
-                    {{ title }}
-                </b>
-            </div>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-import { UsersIcon, StarIcon, HardDriveIcon, ChevronRightIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'WidgetWrapper',
-    props: ['icon', 'title'],
-    components: {
-        ChevronRightIcon,
-        HardDriveIcon,
-        StarIcon,
-        UsersIcon,
-    },
-}
-</script>

resources/js/components/Dashboard/AppSpecification.vue

@@ -56,7 +56,7 @@
 </template>
 <script>
 import {ThumbsUpIcon} from 'vue-feather-icons'
-import ColorLabel from '../Others/ColorLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 import {mapGetters} from "vuex";
 
 export default {

resources/js/components/Dashboard/Widgets/WidgetLatestRegistrations.vue

@@ -236,11 +236,11 @@
 </template>
 
 <script>
-import DatatableCellImage from '../Others/Tables/DatatableCellImage'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
-import ColorLabel from '../Others/ColorLabel'
+import DatatableCellImage from '../../UI/Table/DatatableCellImage'
+import DatatableWrapper from '../../UI/Table/DatatableWrapper'
+import ColorLabel from '../../UI/Labels/ColorLabel'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/Dashboard/Widgets/WidgetLatestTransactions.vue

@@ -72,12 +72,12 @@
 </template>
 
 <script>
-import DatatableCellImage from '../Others/Tables/DatatableCellImage'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
-import ColorLabel from '../Others/ColorLabel'
+import DatatableCellImage from '../../UI/Table/DatatableCellImage'
+import DatatableWrapper from '../../UI/Table/DatatableWrapper'
+import ColorLabel from '../../UI/Labels/ColorLabel'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import InfoBox from '../Others/Forms/InfoBox'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
+import InfoBox from '../../UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/Desktop/PopoverWrapper.vue

@@ -1,17 +0,0 @@
-<template>
-    <div class="popover-wrapper">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'PopoverWrapper',
-}
-</script>
-
-<style scoped lang="scss">
-.popover-wrapper {
-    position: relative;
-}
-</style>

resources/js/components/Desktop/ToolbarGroup.vue

@@ -1,25 +0,0 @@
-<template>
-    <div class="toolbar-button-wrapper">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToolbarWrapper',
-}
-</script>
-
-<style scoped lang="scss">
-.toolbar-button-wrapper {
-    margin-left: 28px;
-    display: flex;
-    align-items: center;
-}
-
-@media only screen and (max-width: 1024px) {
-    .toolbar-button-wrapper {
-        margin-left: 25px;
-    }
-}
-</style>

resources/js/components/Desktop/ToolbarWrapper.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="toolbar-tools">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToolbarWrapper',
-}
-</script>
-
-<style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
-
-.toolbar-tools {
-    text-align: right;
-    display: flex;
-}
-</style>

resources/js/components/Emoji/EmojiPicker.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script>
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import Emoji from './Emoji'
 import { debounce, groupBy } from 'lodash'
 import { XIcon } from 'vue-feather-icons'

resources/js/components/EntriesView/EmptyFilePage.vue

@@ -2,7 +2,7 @@
     <div class="flex items-center justify-center fixed top-20 bottom-0 left-0 right-0 md:px-0 px-4" v-if="isLoading || isEmpty">
         <!--Show message for user-->
         <div v-if="!isLoading" class="text-content text-center">
-            <slot></slot>
+            <slot />
         </div>
 
         <!--Show spinner when loading content-->
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Spinner from './Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/EntriesView/ItemHandler.vue

@@ -31,8 +31,8 @@
 
 <script>
 import { events } from '../../bus'
-import ItemList from './ItemList'
-import ItemGrid from './ItemGrid'
+import ItemList from '../UI/Entries/ItemList'
+import ItemGrid from '../UI/Entries/ItemGrid'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/EntriesView/NavigationSharePanel.vue

@@ -79,10 +79,10 @@ import {
     UsersIcon,
     XIcon,
 } from 'vue-feather-icons'
-import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
-import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
-import ContentGroup from '../../../components/Sidebar/ContentGroup'
-import { events } from '../../../bus'
+import TreeMenuNavigator from '../UI/Trees/TreeMenuNavigator'
+import ContentSidebar from '../Sidebar/ContentSidebar'
+import ContentGroup from '../Sidebar/ContentGroup'
+import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/EntriesView/PanelNavigationFiles.vue

@@ -107,10 +107,10 @@ import {
     UsersIcon,
     XIcon,
 } from 'vue-feather-icons'
-import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
-import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
-import ContentGroup from '../../../components/Sidebar/ContentGroup'
-import { events } from '../../../bus'
+import TreeMenuNavigator from '../UI/Trees/TreeMenuNavigator'
+import ContentSidebar from '../Sidebar/ContentSidebar'
+import ContentGroup from '../Sidebar/ContentGroup'
+import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -55,12 +55,12 @@
 
 <script>
 import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
-import ToolbarButton from '../FilesView/ToolbarButton'
-import ItemGrid from "../FilesView/ItemGrid"
+import ToolbarButton from '../UI/Buttons/ToolbarButton'
+import ItemGrid from "../UI/Entries/ItemGrid"
 import ImageFile from './Media/ImageFile'
 import Audio from './Media/Audio'
 import Video from './Media/Video'
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 

resources/js/components/FilePreview/FilePreviewToolbar.vue

@@ -103,12 +103,12 @@
 </template>
 
 <script>
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import PopoverItem from '../Desktop/PopoverItem'
-import OptionGroup from '../FilesView/OptionGroup'
-import Option from '../FilesView/Option'
+import PopoverWrapper from '../UI/Popover/PopoverWrapper'
+import PopoverItem from '../UI/Popover/PopoverItem'
+import OptionGroup from '../Menus/Components/OptionGroup'
+import Option from '../Menus/Components/Option'
 
-import ToolbarButton from '../FilesView/ToolbarButton'
+import ToolbarButton from '../UI/Buttons/ToolbarButton'
 import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'

resources/js/components/Forms/MailSetup.vue

@@ -241,9 +241,9 @@
 
 <script>
 	import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
-	import SelectInput from '../Others/Forms/SelectInput'
-	import AppInputText from '../Admin/AppInputText'
-	import FormLabel from '../Others/Forms/FormLabel'
+	import SelectInput from '../Inputs/SelectInput'
+	import AppInputText from './Layouts/AppInputText'
+	import FormLabel from '../UI/Labels/FormLabel'
 
 	export default {
 		name: 'MailSetup',

resources/js/components/Forms/StorageSetup.vue

@@ -157,9 +157,9 @@
 
 <script>
 	import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
-	import SelectInput from '../Others/Forms/SelectInput'
-	import AppInputText from '../Admin/AppInputText'
-	import FormLabel from '../Others/Forms/FormLabel'
+	import SelectInput from '../Inputs/SelectInput'
+	import AppInputText from './Layouts/AppInputText'
+	import FormLabel from '../UI/Labels/FormLabel'
 
 	export default {
 		name: 'StorageSetup',

resources/js/components/Icons/FolderIcon.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script>
-import VueFolderTeamIcon from '../Icons/VueFolderTeamIcon'
-import VueFolderIcon from '../Icons/VueFolderIcon'
+import VueFolderTeamIcon from './VueFolderTeamIcon'
+import VueFolderIcon from './VueFolderIcon'
 
 export default {
     name: 'FolderIcon',

resources/js/components/IndexPage/IndexPageHeader.vue

@@ -34,7 +34,7 @@
 <script>
 import HardDriveIcon from 'vue-feather-icons/icons/HardDriveIcon'
 import PageTitle from './Components/PageTitle'
-import AuthButton from '../Auth/AuthButton'
+import AuthButton from '../UI/Buttons/AuthButton'
 import { CreditCardIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 

resources/js/components/IndexPage/IndexPricingTables.vue

@@ -25,7 +25,7 @@
 
 <script>
 import PricingTables from './Components/PricingTables'
-import AuthButton from '../Auth/AuthButton'
+import AuthButton from '../UI/Buttons/AuthButton'
 import { CloudIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 

resources/js/components/Inputs/CopyShareLink.vue

@@ -88,7 +88,7 @@
 
 <script>
 import { DownloadIcon, CameraIcon, CopyIcon, CheckIcon, SendIcon, MoreHorizontalIcon, CodeIcon } from 'vue-feather-icons'
-import { events } from '../../../bus'
+import { events } from '../../bus'
 
 export default {
     name: 'CopyShareLink',

resources/js/components/Inputs/MultiEmailInput.vue

@@ -32,7 +32,7 @@
 
 <script>
 import { XIcon } from 'vue-feather-icons'
-import { events } from '../../../bus'
+import { events } from '../../bus'
 
 export default {
     name: 'MultiEmailInput',

resources/js/components/Inputs/SearchInput.vue

@@ -41,9 +41,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-@import '../../../../sass/vuefilemanager/forms';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/forms';
 
 .search-bar {
     position: relative;

resources/js/components/Inputs/SelectBoxInput.vue

@@ -36,10 +36,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-@import '../../../../sass/vuefilemanager/inapp-forms';
-@import '../../../../sass/vuefilemanager/forms';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/inapp-forms';
+@import '../../../sass/vuefilemanager/forms';
 
 .select-box {
     display: flex;

resources/js/components/Inputs/SelectInput.vue

@@ -115,8 +115,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
 
 /* TODO: refactor to the tailwind */
 

resources/js/components/Inputs/SwitchInput.vue

@@ -39,8 +39,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
 
 .input-wrapper {
     display: flex;

resources/js/components/Layout/AuthPages/AuthContent.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="isVisible" class="w-full max-w-xl text-center">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 

resources/js/components/Layout/AuthPages/AuthContentWrapper.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center justify-center px-2.5 md:px-6">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 

resources/js/components/Layout/PageTab.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="page-tab">
+        <div id="loader" v-show="isLoading">
+            <Spinner />
+        </div>
+        <slot v-show="!isLoading" />
+    </div>
+</template>
+
+<script>
+import Spinner from '../UI/Others/Spinner'
+
+export default {
+    name: 'PageTab',
+    props: ['isLoading'],
+    components: {
+        Spinner,
+    },
+}
+</script>

resources/js/components/Layout/PageTabGroup.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page-tab-group">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
@@ -11,8 +11,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
 
 .page-tab-group {
     margin-bottom: 65px;

resources/js/components/Layout/Sidebars/InfoSidebar.vue

@@ -103,14 +103,14 @@
 </template>
 
 <script>
-import FilePreviewDetail from '../Others/FilePreviewDetail'
-import CopyShareLink from '../Others/Forms/CopyShareLink'
+import FilePreviewDetail from '../../Others/FilePreviewDetail'
+import CopyShareLink from '../../Inputs/CopyShareLink'
 import {Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon} from 'vue-feather-icons'
-import ImageMetaData from './ImageMetaData'
-import TitlePreview from './TitlePreview'
-import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
-import ListInfoItem from '../Others/ListInfoItem'
-import MemberAvatar from './MemberAvatar'
+import ImageMetaData from '../../UI/Others/ImageMetaData'
+import TitlePreview from '../../UI/Labels/TitlePreview'
+import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
+import ListInfoItem from '../../UI/List/ListInfoItem'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
 import {mapGetters} from 'vuex'
 
 export default {

resources/js/components/Layout/Sidebars/InfoSidebarUploadRequest.vue

@@ -94,10 +94,10 @@
 
 <script>
 import { Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon } from 'vue-feather-icons'
-import FilePreviewDetail from '../Others/FilePreviewDetail'
-import ListInfoItem from '../Others/ListInfoItem'
-import ImageMetaData from './ImageMetaData'
-import TitlePreview from './TitlePreview'
+import FilePreviewDetail from '../../Others/FilePreviewDetail'
+import ListInfoItem from '../../UI/List/ListInfoItem'
+import ImageMetaData from '../../UI/Others/ImageMetaData'
+import TitlePreview from '../../UI/Labels/TitlePreview'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/Layout/Toolbars/DesktopSharepageToolbar.vue

@@ -27,7 +27,7 @@
                 </PopoverWrapper>
 
                 <!--Search bar-->
-                <SearchBar class="ml-5 hidden lg:block xl:ml-8" />
+                <SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
 
                 <!--File Controls-->
                 <div class="ml-5 flex items-center xl:ml-8">
@@ -78,23 +78,24 @@
 </template>
 
 <script>
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import FileSortingOptions from './FileSortingOptions'
-import PopoverItem from '../Desktop/PopoverItem'
-import UploadProgress from './UploadProgress'
+import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
+import FileSortingOptions from '../../Menus/FileSortingOptions'
+import PopoverItem from '../../UI/Popover/PopoverItem'
+import UploadProgress from '../../UI/Others/UploadProgress'
 import NavigationBar from './NavigationBar'
-import ToolbarButton from './ToolbarButton'
-import OptionUpload from './OptionUpload'
-import OptionGroup from './OptionGroup'
-import SearchBar from './SearchBar'
-import { events } from '../../bus'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
+import OptionUpload from '../../Menus/Components/OptionUpload'
+import OptionGroup from '../../Menus/Components/OptionGroup'
+import SearchBarButton from '../../UI/Buttons/SearchBarButton'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
-import Option from './Option'
+import Option from '../../Menus/Components/Option'
 
 export default {
     name: 'DesktopSharepageToolbar',
     components: {
         FileSortingOptions,
+		SearchBarButton,
         UploadProgress,
         PopoverWrapper,
         NavigationBar,
@@ -102,7 +103,6 @@ export default {
         OptionUpload,
         OptionGroup,
         PopoverItem,
-        SearchBar,
         Option,
     },
     computed: {

resources/js/components/Layout/Toolbars/DesktopToolbar.vue

@@ -55,7 +55,7 @@
                 </PopoverWrapper>
 
                 <!--Search bar-->
-                <SearchBar class="ml-5 hidden lg:block xl:ml-8" />
+                <SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
 
                 <!--File Controls-->
                 <div class="ml-5 flex items-center xl:ml-8">
@@ -158,20 +158,20 @@
 </template>
 
 <script>
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
-import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import FileSortingOptions from './FileSortingOptions'
-import PopoverItem from '../Desktop/PopoverItem'
-import UploadProgress from './UploadProgress'
+import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
+import TeamFolderPreview from '../../Teams/Components/TeamFolderPreview'
+import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
+import FileSortingOptions from '../../Menus/FileSortingOptions'
+import PopoverItem from '../../UI/Popover/PopoverItem'
+import UploadProgress from '../../UI/Others/UploadProgress'
 import NavigationBar from './NavigationBar'
-import ToolbarButton from './ToolbarButton'
-import OptionUpload from './OptionUpload'
-import OptionGroup from './OptionGroup'
-import SearchBar from './SearchBar'
-import { events } from '../../bus'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
+import OptionUpload from '../../Menus/Components/OptionUpload'
+import OptionGroup from '../../Menus/Components/OptionGroup'
+import SearchBarButton from '../../UI/Buttons/SearchBarButton'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
-import Option from './Option'
+import Option from '../../Menus/Components/Option'
 
 export default {
     name: 'DesktopToolbar',
@@ -179,6 +179,7 @@ export default {
         FileSortingOptions,
         TeamMembersButton,
         TeamFolderPreview,
+		SearchBarButton,
         UploadProgress,
         PopoverWrapper,
         NavigationBar,
@@ -186,7 +187,6 @@ export default {
         OptionUpload,
         OptionGroup,
         PopoverItem,
-        SearchBar,
         Option,
     },
     computed: {

resources/js/components/Layout/Toolbars/DesktopUploadRequestToolbar.vue

@@ -84,19 +84,18 @@
 </template>
 
 <script>
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import FileSortingOptions from './FileSortingOptions'
-import PopoverItem from '../Desktop/PopoverItem'
-import UploadProgress from './UploadProgress'
+import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
+import FileSortingOptions from '../../Menus/FileSortingOptions'
+import PopoverItem from '../../UI/Popover/PopoverItem'
+import UploadProgress from '../../UI/Others/UploadProgress'
 import NavigationBar from './NavigationBar'
-import ToolbarButton from './ToolbarButton'
-import MemberAvatar from "./MemberAvatar"
-import OptionUpload from './OptionUpload'
-import OptionGroup from './OptionGroup'
-import SearchBar from './SearchBar'
-import { events } from '../../bus'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
+import MemberAvatar from "../../UI/Others/MemberAvatar"
+import OptionUpload from '../../Menus/Components/OptionUpload'
+import OptionGroup from '../../Menus/Components/OptionGroup'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
-import Option from './Option'
+import Option from '../../Menus/Components/Option'
 
 export default {
     name: 'DesktopUploadRequestToolbar',
@@ -110,7 +109,6 @@ export default {
         OptionUpload,
         OptionGroup,
         PopoverItem,
-        SearchBar,
         Option,
     },
     computed: {

resources/js/components/Layout/Toolbars/MobileMultiSelectToolbar.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ToolbarButton from './ToolbarButton'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -36,8 +36,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .multiselect-actions {
     display: flex;

resources/js/components/Layout/Toolbars/MobileToolbar.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
+import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
+import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
 import { MenuIcon } from 'vue-feather-icons'
 import NavigationBar from './NavigationBar'
 

resources/js/components/Layout/Toolbars/MobileUploadRequestToolbar.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
+import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
+import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
 import { MenuIcon } from 'vue-feather-icons'
 import NavigationBar from './NavigationBar'
 

resources/js/components/Layout/Toolbars/NavigationBar.vue

@@ -41,7 +41,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 
 export default {

resources/js/components/Menus/Components/Option.vue

@@ -244,7 +244,7 @@
 </template>
 
 <script>
-import AlphabetIcon from '../Icons/AlphabetIcon'
+import AlphabetIcon from '../../Icons/AlphabetIcon'
 import {
     UserMinusIcon,
     UserCheckIcon,

resources/js/components/Menus/Components/OptionGroup.vue

@@ -4,7 +4,7 @@
             {{ title }}
         </b>
         <ul class="option-group py-1">
-            <slot></slot>
+            <slot />
         </ul>
     </div>
 </template>

resources/js/components/Menus/Components/OptionUpload.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import FolderUploadIcon from '../Icons/FolderUploadIcon'
+import FolderUploadIcon from '../../Icons/FolderUploadIcon'
 import { UploadCloudIcon } from 'vue-feather-icons'
 
 export default {

resources/js/components/Menus/FileFilterMobile.vue

@@ -53,9 +53,9 @@
 
 <script>
 import MenuMobileGroup from '../Mobile/MenuMobileGroup'
-import OptionGroup from '../FilesView/OptionGroup'
+import OptionGroup from './Components/OptionGroup'
 import MenuMobile from '../Mobile/MenuMobile'
-import Option from '../FilesView/Option'
+import Option from './Components/Option'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/Menus/FileSortingMobile.vue

@@ -12,7 +12,7 @@ import MenuMobileGroup from '../Mobile/MenuMobileGroup'
 import MenuMobile from '../Mobile/MenuMobile'
 
 export default {
-    name: 'FilterSortingMobile',
+    name: 'FileSortingMobile',
     components: {
         FileSortingOptions,
         MenuMobileGroup,

resources/js/components/Menus/FileSortingOptions.vue

@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import OptionGroup from './OptionGroup'
-import Option from './Option'
+import OptionGroup from './Components/OptionGroup'
+import Option from './Components/Option'
 import { ArrowUpIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 

resources/js/components/Menus/MobileContextMenu.vue

@@ -3,22 +3,22 @@
         <ThumbnailItem class="m-5" :item="clipboard[0]" />
 
         <MenuMobileGroup v-if="$slots.default">
-            <slot></slot>
+            <slot />
         </MenuMobileGroup>
 
         <MenuMobileGroup v-if="$slots.editor && $checkPermission('editor')">
-            <slot name="editor"></slot>
+            <slot name="editor" />
         </MenuMobileGroup>
 
         <MenuMobileGroup v-if="$slots.visitor && $checkPermission('visitor')">
-            <slot name="visitor"></slot>
+            <slot name="visitor" />
         </MenuMobileGroup>
     </MenuMobile>
 </template>
 
 <script>
 import MenuMobileGroup from '../Mobile/MenuMobileGroup'
-import ThumbnailItem from '../Others/ThumbnailItem'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
 import MenuMobile from '../Mobile/MenuMobile'
 import { mapGetters } from 'vuex'
 

resources/js/components/Menus/MobileTeamContextMenu.vue

@@ -3,7 +3,7 @@
         <TeamFolderPreview />
 
         <MenuMobileGroup v-if="$slots.default">
-            <slot></slot>
+            <slot />
         </MenuMobileGroup>
     </MenuMobile>
 </template>

resources/js/components/Mobile/FileActionsMobile.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script>
-import MobileActionButton from './MobileActionButton'
-import UploadProgress from './UploadProgress'
+import MobileActionButton from '../UI/Buttons/MobileActionButton'
+import UploadProgress from '../UI/Others/UploadProgress'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/Mobile/MenuMobileGroup.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="menu-options">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 

resources/js/components/Mobile/MobileNavigation.vue

@@ -156,11 +156,11 @@
 </template>
 
 <script>
-import MenuMobileGroup from '../Mobile/MenuMobileGroup'
-import OptionGroup from '../FilesView/OptionGroup'
-import UserHeadline from '../Sidebar/UserHeadline'
-import MenuMobile from '../Mobile/MenuMobile'
-import Option from '../FilesView/Option'
+import MenuMobileGroup from './MenuMobileGroup'
+import OptionGroup from '../Menus/Components/OptionGroup'
+import UserHeadline from '../UI/Others/UserHeadline'
+import MenuMobile from './MenuMobile'
+import Option from '../Menus/Components/Option'
 import { ChevronLeftIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 

resources/js/components/Notifications/Components/Notification.vue

@@ -87,8 +87,8 @@
 </template>
 <script>
 import { RefreshCwIcon, TrendingUpIcon, GiftIcon, CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon, AlertTriangleIcon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import {events} from "../../bus";
+import MemberAvatar from '../../UI/Others/MemberAvatar'
+import {events} from "../../../bus";
 
 export default {
     name: 'Notification',

resources/js/components/Notifications/NotificationCenter.vue

@@ -41,8 +41,8 @@
 </template>
 
 <script>
-import MobileActionButton from "../FilesView/MobileActionButton"
-import Notification from "./Notification"
+import MobileActionButton from "../UI/Buttons/MobileActionButton"
+import Notification from "./Components/Notification"
 import vClickOutside from 'v-click-outside'
 import {mapGetters} from "vuex";
 

resources/js/components/Notifications/NotificationsPopup.vue

@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import MobileActionButton from '../FilesView/MobileActionButton'
-import Notification from '../Notifications/Notification'
-import ButtonBase from '../FilesView/ButtonBase'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
+import MobileActionButton from '../UI/Buttons/MobileActionButton'
+import Notification from './Components/Notification'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
 import vClickOutside from 'v-click-outside'
 import { mapGetters } from 'vuex'
 

resources/js/components/Others/ColorPicker.vue

@@ -1,132 +0,0 @@
-<template>
-    <div class="color-pick-wrapper">
-        <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
-        <ul class="color-wrapper">
-            <li v-for="(color, i) in colors" :key="i" @click="setColor(color)" class="single-color">
-                <check-icon v-if="color === selectedColor" class="color-icon" size="22" />
-                <span :style="{ background: color }" class="color-box"></span>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-import { CheckIcon } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
-
-export default {
-    name: 'ColorPicker',
-    props: ['pickedColor'],
-    components: { CheckIcon },
-    computed: {
-        ...mapGetters(['config']),
-    },
-    data() {
-        return {
-            selectedColor: this.pickedColor,
-            colors: [
-                '#FE6F6F',
-                '#FE6F91',
-                '#FE6FC0',
-                '#FE6FF0',
-                '#DD6FFE',
-                '#AD6FFE',
-                '#7D6FFE',
-                '#6F90FE',
-                '#6FC0FE',
-                '#6FF0FE',
-                '#6FFEDD',
-                '#6FFEAD',
-                '#6FFE7D',
-                '#90FE6F',
-                '#C0FE6F',
-                '#F0FE6F',
-                '#FEDD6F',
-                '#FEAD6F',
-                '#FE7D6F',
-                '#4c4c4c',
-                '#06070B',
-            ],
-        }
-    },
-    methods: {
-        setColor(value) {
-            this.selectedColor = value
-
-            this.$emit('input', value)
-        },
-    },
-    created() {
-        this.colors.push(this.config.app_color)
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/inapp-forms';
-@import '../../../sass/vuefilemanager/forms';
-
-.color-pick-wrapper {
-    .color-wrapper {
-        margin-bottom: 20px;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 32px);
-        justify-content: space-between;
-        gap: 7px;
-
-        .single-color {
-            height: 31px;
-            list-style: none;
-            border-radius: 8px;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .color-icon {
-                z-index: 2;
-
-                polyline {
-                    stroke: white;
-                }
-            }
-
-            .color-box {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                display: block;
-            }
-        }
-    }
-}
-
-.main-label {
-    @include font-size(14);
-    font-weight: 700;
-    margin-bottom: 8px;
-    display: block;
-}
-
-.set-folder-icon {
-    position: relative;
-}
-
-.dark {
-    .color-pick-wrapper {
-        .color-wrapper {
-            .single-color {
-                &.active-color {
-                    border: 2px solid;
-                }
-
-                &:hover {
-                    border: 2px solid $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-}
-</style>

resources/js/components/Others/EmptyPageContent.vue

@@ -10,7 +10,7 @@
                 <h1 class="title">{{ title }}</h1>
                 <h2 class="description">{{ description }}</h2>
             </div>
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>

resources/js/components/Others/Forms/SetupBox.vue

@@ -1,142 +0,0 @@
-<template>
-    <div class="setup-box" :class="theme">
-        <b class="title">{{ title }}</b>
-        <p class="description">{{ description }}</p>
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'SetupBox',
-    props: ['title', 'description', 'theme'],
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-
-.setup-box {
-    padding: 20px;
-    border-radius: 8px;
-    margin-bottom: 30px;
-
-    .title {
-        @include font-size(21);
-        margin-bottom: 5px;
-        display: block;
-        font-weight: 700;
-    }
-
-    .description {
-        @include font-size(15);
-        line-height: 1.5;
-        margin-bottom: 20px;
-    }
-
-    &.base {
-        background: $light_background;
-    }
-
-    &.danger {
-        background: $light_background;
-
-        .title {
-            color: $danger;
-        }
-    }
-
-    /deep/ input {
-        &[type='text'],
-        &[type='number'],
-        .input-area {
-            background: white;
-        }
-    }
-
-    /deep/ .input-area {
-        background: white;
-    }
-
-    /deep/ .form {
-        margin-top: 20px;
-
-        &.block-form {
-            max-width: 450px;
-
-            .single-line-form {
-                display: flex;
-
-                .submit-button {
-                    margin-left: 20px;
-                }
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 960px) {
-    .setup-box {
-        /deep/ .form {
-            &.block-form {
-                max-width: 100%;
-            }
-
-            input {
-                min-width: initial;
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .setup-box {
-        padding: 15px;
-
-        .title {
-            @include font-size(17);
-            margin-bottom: 10px;
-        }
-
-        .description {
-            @include font-size(14);
-        }
-
-        /deep/ .form.block-form {
-            .single-line-form {
-                display: block;
-
-                .submit-button {
-                    margin-left: 0;
-                    margin-top: 10px;
-                }
-            }
-        }
-    }
-}
-
-.dark {
-    .setup-box {
-        &.base {
-            background: $dark_mode_foreground;
-        }
-
-        &.danger {
-            background: $dark_mode_foreground;
-        }
-
-        /deep/ input {
-            &[type='text'],
-            &[type='number'],
-            .input-area {
-                background: $dark_mode_background;
-            }
-        }
-
-        /deep/ .input-area {
-            background: $dark_mode_background;
-        }
-    }
-}
-</style>

resources/js/components/Others/Layout/PageTab.vue

@@ -1,25 +0,0 @@
-<template>
-    <div class="page-tab">
-        <div id="loader" v-show="isLoading">
-            <Spinner></Spinner>
-        </div>
-        <slot v-show="!isLoading"></slot>
-    </div>
-</template>
-
-<script>
-import Spinner from '../../FilesView/Spinner'
-
-export default {
-    name: 'PageTab',
-    props: ['isLoading'],
-    components: {
-        Spinner,
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-</style>

resources/js/components/Others/PageHeader.vue

@@ -1,83 +0,0 @@
-<template>
-    <div class="page-header">
-        <div class="go-back" v-if="canBack" @click="$router.back()">
-            <chevron-left-icon size="17" />
-        </div>
-        <div class="content">
-            <h1 class="title">{{ title }}</h1>
-        </div>
-    </div>
-</template>
-
-<script>
-import { ChevronLeftIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'PageHeader',
-    props: ['title', 'canBack'],
-    components: {
-        ChevronLeftIcon,
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.page-header {
-    display: flex;
-    align-items: center;
-    background: white;
-    z-index: 9;
-    width: 100%;
-    position: sticky;
-    top: 0;
-    padding-top: 20px;
-    padding-bottom: 20px;
-
-    .title {
-        @include font-size(18);
-        font-weight: 700;
-        color: $text;
-    }
-
-    .go-back {
-        margin-right: 10px;
-        cursor: pointer;
-
-        svg {
-            vertical-align: middle;
-            margin-top: -4px;
-        }
-    }
-}
-
-@media only screen and (max-width: 960px) {
-    .page-header {
-        .title {
-            @include font-size(18);
-        }
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .page-header {
-        display: none;
-    }
-}
-
-.dark {
-    .page-header {
-        background: $dark_mode_background;
-
-        .title {
-            color: $dark_mode_text_primary;
-        }
-
-        .icon path {
-            fill: $theme;
-        }
-    }
-}
-</style>

resources/js/components/Others/PlanPricingTables.vue

@@ -1,220 +0,0 @@
-<template>
-    <div class="plans-wrapper" v-if="plans">
-        <article class="plan" v-for="(plan, i) in plans" :key="i">
-            <div class="plan-wrapper">
-                <header class="plan-header">
-                    <div class="icon">
-                        <hard-drive-icon class="text-theme" size="26" />
-                    </div>
-                    <h1 class="title">{{ plan.data.attributes.name }}</h1>
-                    <h2 class="description">
-                        {{ plan.data.attributes.description }}
-                    </h2>
-                </header>
-                <section class="plan-features">
-                    <b class="storage-size">{{ plan.data.attributes.capacity_formatted }}</b>
-                    <span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
-                </section>
-                <footer class="plan-footer">
-                    <b class="price text-theme">
-                        {{ plan.data.attributes.price }}/{{ $t('mo.') }}
-                        <small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{
-                            $t('page_pricing_tables.vat_excluded')
-                        }}</small>
-                    </b>
-                    <ButtonBase
-                        @click.native="selectPlan(plan)"
-                        type="submit"
-                        button-style="secondary"
-                        class="sign-in-button"
-                    >
-                        {{ $t('get_it') }}
-                    </ButtonBase>
-                </footer>
-            </div>
-        </article>
-    </div>
-</template>
-
-<script>
-import ButtonBase from '../FilesView/ButtonBase'
-import { HardDriveIcon } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
-import axios from 'axios'
-
-export default {
-    name: 'PlanPricingTables',
-    components: {
-        HardDriveIcon,
-        ButtonBase,
-    },
-    props: ['customRoute'],
-    data() {
-        return {
-            plans: undefined,
-        }
-    },
-    computed: {
-        ...mapGetters(['user']),
-    },
-    methods: {
-        selectPlan(plan) {
-            this.$emit('selected-plan', plan)
-
-            let route = this.customRoute ? this.customRoute : 'UpgradeBilling'
-
-            this.$router.push({ name: route })
-        },
-    },
-    created() {
-        axios.get('/api/pricing').then((response) => {
-            this.plans = response.data.filter((plan) => {
-                return plan.data.attributes.capacity > this.user.data.attributes.max_storage_amount
-            })
-            this.$emit('load', false)
-        })
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.plan {
-    text-align: center;
-    flex: 0 0 33%;
-    padding: 0 25px;
-    margin-bottom: 45px;
-
-    .plan-wrapper {
-        box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.03);
-        padding: 25px;
-        border-radius: 8px;
-        @include transition;
-
-        &:hover {
-            @include transform(translateY(-20px) scale(1.05));
-            box-shadow: 0 15px 25px 5px hsla(220, 36%, 16%, 0.08);
-        }
-    }
-
-    .plan-header {
-        .icon {
-            path,
-            line,
-            polyline,
-            rect,
-            circle {
-                color: inherit;
-            }
-        }
-
-        .title {
-            @include font-size(22);
-            font-weight: 800;
-        }
-
-        .description {
-            @include font-size(14);
-            font-weight: 600;
-        }
-    }
-
-    .plan-features {
-        margin: 65px 0;
-
-        .storage-size {
-            @include font-size(48);
-            font-weight: 900;
-            line-height: 1.1;
-        }
-
-        .storage-description {
-            display: block;
-            @include font-size(15);
-            font-weight: 800;
-        }
-    }
-
-    .plan-footer {
-        .sign-in-button {
-            width: 100%;
-            text-align: center;
-        }
-
-        .price {
-            @include font-size(18);
-            display: block;
-            margin-bottom: 20px;
-
-            .vat-disclaimer {
-                @include font-size(11);
-                color: $text;
-                display: block;
-                font-weight: 300;
-                opacity: 0.45;
-                margin-top: 5px;
-            }
-        }
-    }
-}
-
-.plans-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -25px;
-    justify-content: center;
-}
-
-@media only screen and (max-width: 960px) {
-    .plans-wrapper {
-        display: block;
-        margin: 0;
-    }
-}
-
-.dark {
-    .plan {
-        .plan-wrapper {
-            background: $dark_mode_foreground;
-        }
-
-        .plan-header {
-            .title {
-                color: $dark_mode_text_primary;
-            }
-
-            .description {
-                color: $dark_mode_text_secondary;
-            }
-        }
-
-        .plan-features {
-            .storage-size {
-                color: $dark_mode_text_primary;
-            }
-
-            .storage-description {
-                color: $dark_mode_text_primary;
-            }
-        }
-
-        .plan-footer {
-            .sign-in-button {
-                background: rgba($theme, 0.1);
-
-                /deep/ .content {
-                    color: $theme;
-                }
-            }
-
-            .price {
-                .vat-disclaimer {
-                    color: $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-}
-</style>

resources/js/components/Others/TabOption.vue

@@ -1,20 +0,0 @@
-<template>
-    <div v-if="isActive">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'TabOption',
-    props: ['title', 'icon', 'selected'],
-    data() {
-        return {
-            isActive: false,
-        }
-    },
-    mounted() {
-        this.isActive = this.selected
-    },
-}
-</script>

resources/js/components/Others/TabWrapper.vue

@@ -1,124 +0,0 @@
-<template>
-    <div>
-        <div class="tab-wrapper">
-            <div
-                class="tab"
-                :class="{ active: tab.isActive }"
-                @click="selectTab(tab)"
-                v-for="(tab, i) in tabs"
-                :key="i"
-            >
-                <!--Icon-->
-                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme dark-text-theme" size="17" />
-                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme dark-text-theme" size="17" />
-                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme dark-text-theme" size="17" />
-                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme dark-text-theme" size="17" />
-
-                <!--Title-->
-                <b class="tab-title">
-                    {{ tab.title }}
-                </b>
-            </div>
-        </div>
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-import { LinkIcon, MailIcon, SmileIcon, FolderIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'TabWrapper',
-    components: {
-        LinkIcon,
-        MailIcon,
-        SmileIcon,
-        FolderIcon,
-    },
-    data() {
-        return {
-            tabs: [],
-        }
-    },
-    methods: {
-        selectTab(selectedTab) {
-            this.tabs.forEach((tab) => {
-                tab.isActive = tab.title == selectedTab.title
-            })
-        },
-    },
-    mounted() {
-        this.tabs = this.$children
-    },
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../../sass/vuefilemanager/inapp-forms';
-@import '../../../sass/vuefilemanager/forms';
-
-.tab-wrapper {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-    cursor: pointer;
-    align-items: center;
-    background: white;
-    color: $text;
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px solid #e8e9eb;
-
-    .tab-title {
-        @include font-size(14);
-    }
-
-    .tab {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 8px;
-
-        &.active {
-            background: $light_background;
-
-            .tab-title {
-                color: $text;
-            }
-        }
-    }
-
-    .tab-icon {
-        margin-right: 10px;
-
-        path,
-        circle,
-        line,
-        polyline {
-            color: inherit !important;
-        }
-    }
-}
-
-.dark {
-    .tab-wrapper {
-        background: $dark_mode_foreground;
-        border-color: transparent;
-
-        .tab.active {
-            background: lighten($dark_mode_foreground, 7%);
-
-            .tab-title {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
-    .popup-wrapper {
-        .tab-wrapper {
-            background: lighten($dark_mode_foreground, 2%);
-        }
-    }
-}
-</style>

resources/js/components/Others/ThemeLabel.vue

@@ -1,24 +0,0 @@
-<template>
-    <b class="theme-label">
-        <slot></slot>
-    </b>
-</template>
-
-<script>
-export default {
-    name: 'TextLabel',
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.theme-label {
-    @include font-size(14);
-    color: $theme;
-    font-weight: 600;
-    display: block;
-    margin-bottom: 20px;
-}
-</style>

resources/js/components/Popups/Alert.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import ButtonBase from './ButtonBase'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import { events } from '../../bus'
-import PopupActions from "../Others/Popup/PopupActions";
+import PopupActions from "./Components/PopupActions";
 
 export default {
     name: 'AlertPopup',

resources/js/components/Popups/ConfirmPopup.vue

@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import PopupWrapper from './PopupWrapper'
-import PopupActions from './PopupActions'
-import ButtonBase from '../../FilesView/ButtonBase'
-import { events } from '../../../bus'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import { events } from '../../bus'
 
 export default {
     name: 'ConfirmPopup',

resources/js/components/Popups/CreateFolderPopup.vue

@@ -48,18 +48,18 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ThumbnailItem from './ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import AppInputText from '../Admin/AppInputText'
-import SwitchInput from './Forms/SwitchInput'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import SwitchInput from '../Inputs/SwitchInput'
 import { events } from '../../bus'
-import EmojiPicker from './EmojiPicker'
+import EmojiPicker from '../Emoji/EmojiPicker'
 
 export default {
     name: 'CreateFolderPopup',

resources/js/components/Popups/CreateLanguagePopup.vue

@@ -57,20 +57,20 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import SelectInput from './Forms/SelectInput'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import SelectInput from '../Inputs/SelectInput'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../bus'
 import axios from 'axios'
 
 export default {
-    name: 'CreateLanguage',
+    name: 'CreateLanguagePopup',
     components: {
         ValidationProvider,
         ValidationObserver,

resources/js/components/Popups/CreatePersonalTokenPopup.vue

@@ -57,15 +57,15 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import CopyInput from './Forms/CopyInput'
-import ButtonBase from '../FilesView/ButtonBase'
-import InfoBox from './Forms/InfoBox'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import CopyInput from '../Inputs/CopyInput'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../bus'
 import axios from 'axios'

resources/js/components/Popups/MoveItemPopup.vue

@@ -44,15 +44,15 @@
 </template>
 
 <script>
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import TitlePreview from '../FilesView/TitlePreview'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ThumbnailItem from './ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
-import Spinner from '../FilesView/Spinner'
-import TreeMenu from './TreeMenu'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import TitlePreview from '../UI/Labels/TitlePreview'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import Spinner from '../UI/Others/Spinner'
+import TreeMenu from '../UI/Trees/TreeMenu'
 import { isArray } from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'

resources/js/components/Popups/ProcessingPopup.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import Spinner from './Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/Popups/RenameItemPopup.vue

@@ -66,17 +66,17 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ThumbnailItem from './ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import AppInputText from '../Admin/AppInputText'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
-import SwitchInput from './Forms/SwitchInput'
-import EmojiPicker from './EmojiPicker'
+import SwitchInput from '../Inputs/SwitchInput'
+import EmojiPicker from '../Emoji/EmojiPicker'
 import { XIcon } from 'vue-feather-icons'
 import { events } from '../../bus'
 

resources/js/components/Popups/ShareCreatePopup.vue

@@ -142,22 +142,22 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
-import AppInputSwitch from '../Admin/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SelectBoxInput from './Forms/SelectBoxInput'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import MultiEmailInput from './Forms/MultiEmailInput'
-import SwitchInput from './Forms/SwitchInput'
-import SelectInput from './Forms/SelectInput'
-import ThumbnailItem from './ThumbnailItem'
-import ActionButton from './ActionButton'
-import CopyShareLink from './Forms/CopyShareLink'
-import ButtonBase from '../FilesView/ButtonBase'
-import InfoBox from './Forms/InfoBox'
+import SelectBoxInput from '../Inputs/SelectBoxInput'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import MultiEmailInput from '../Inputs/MultiEmailInput'
+import SwitchInput from '../Inputs/SwitchInput'
+import SelectInput from '../Inputs/SelectInput'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ActionButton from '../UI/Buttons/ActionButton'
+import CopyShareLink from '../Inputs/CopyShareLink'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
 import { LinkIcon, MailIcon } from 'vue-feather-icons'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'

resources/js/components/Popups/ShareEditPopup.vue

@@ -189,22 +189,22 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import MultiEmailInput from './Forms/MultiEmailInput'
-import SelectBoxInput from './Forms/SelectBoxInput'
-import CopyShareLink from './Forms/CopyShareLink'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import SwitchInput from './Forms/SwitchInput'
-import SelectInput from './Forms/SelectInput'
-import ThumbnailItem from './ThumbnailItem'
-import ActionButton from './ActionButton'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import AppInputText from '../Admin/AppInputText'
+import MultiEmailInput from '../Inputs/MultiEmailInput'
+import SelectBoxInput from '../Inputs/SelectBoxInput'
+import CopyShareLink from '../Inputs/CopyShareLink'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import SwitchInput from '../Inputs/SwitchInput'
+import SelectInput from '../Inputs/SelectInput'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ActionButton from '../UI/Buttons/ActionButton'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 import axios from 'axios'

resources/js/components/Sidebar/ContentGroup.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import TextLabel from '../Others/TextLabel'
+import TextLabel from '../UI/Labels/TextLabel'
 import { ChevronUpIcon } from 'vue-feather-icons'
 
 export default {

resources/js/components/Sidebar/ContentSidebar.vue

@@ -3,7 +3,7 @@
         class="content-sidebar z-[9] hidden w-52 flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block xl:w-56"
         id="content-sidebar"
     >
-        <slot></slot>
+        <slot />
     </section>
 </template>
 

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -72,11 +72,11 @@
 </template>
 
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../UI/Others/MemberAvatar'
 import {mapGetters} from 'vuex'
 import {HardDriveIcon, MoonIcon, PowerIcon, SettingsIcon, SunIcon, UserIcon,} from 'vue-feather-icons'
 import NotificationCenter from "../Notifications/NotificationCenter"
-import NotificationBell from "./NotificationBell";
+import NotificationBell from "../Notifications/Components/NotificationBell";
 
 export default {
     name: 'SidebarNavigation',

resources/js/components/Spotlight/Components/CategoryName.vue

@@ -1,6 +1,6 @@
 <template>
     <b class="mb-1.5 block text-xs text-gray-500">
-        <slot></slot>
+        <slot />
     </b>
 </template>
 <script>