From 0ff1cc97d4d36a573db33b4db2f2c501dcb91383 Mon Sep 17 00:00:00 2001
From: Romaric Mourgues <rmourgues@linagora.com>
Date: Tue, 18 Apr 2023 11:22:14 +0200
Subject: [PATCH] Clean frontend files

---
 tdrive/frontend/src/app/app.tsx               |   6 +-
 .../src/app/atoms/link/link.stories.tsx       |  10 +-
 .../add-user-button/add-user-button.scss      |  18 -
 .../add-user-button/add-user-button.tsx       |  40 -
 .../attachment-picker/attachment-picker.jsx   | 199 ----
 .../attachment-picker/attachment-picker.scss  |  39 -
 .../calendar-selector/calendar-selector.jsx   | 159 ----
 .../calendar-selector/calendar-selector.scss  |  61 --
 .../app/components/calendar/date-picker.jsx   | 423 ---------
 .../app/components/calendar/date-picker.scss  |  18 -
 .../calendar/day-picker/day-picker.jsx        | 164 ----
 .../calendar/day-picker/day-picker.scss       |  97 --
 .../app/components/calendar/event/event.jsx   | 123 ---
 .../app/components/calendar/event/event.scss  | 144 ---
 .../app/components/calendar/time-selector.jsx | 121 ---
 .../channel-attachement-list.tsx              |  44 -
 .../parts/channel-attachment.tsx              | 176 ----
 .../parts/channel-files.tsx                   |  36 -
 .../parts/channel-medias.tsx                  |  44 -
 .../channel-attachement-list/parts/commun.tsx |  22 -
 .../channel-members-modal.tsx                 | 178 ----
 .../channel-members-list/email-item.tsx       | 106 ---
 .../channel-members-list/member-item.tsx      |  81 --
 .../channel-members-list/user-item.tsx        | 100 --
 .../users-search-modal.tsx                    |  19 -
 .../components/channels-selector/index.tsx    | 164 ----
 .../company-messages-counter.scss             |  11 -
 .../company-messages-counter.tsx              |  71 --
 .../components-tester/component-doc.jsx       |  59 --
 .../components-tester/component-doc.scss      |  50 -
 .../components-tester/components-tester.jsx   | 370 --------
 .../components-tester/components-tester.scss  |  19 -
 .../components-tester/group/inputs.jsx        | 124 ---
 .../connection-indicator.tsx                  |   6 +-
 .../connectors-list-manager.jsx               |   6 +-
 .../app/components/desktop-redirect/index.tsx |  16 +-
 .../download-app-banner.tsx                   |   2 +-
 .../draggable/draggable-body-layer.jsx        |  23 -
 .../components/draggable/draggable-manager.js | 238 -----
 .../app/components/draggable/draggable.scss   |  87 --
 .../app/components/draggable/draggable.tsx    |  44 -
 .../components/draggable/droppable-zone.jsx   |  74 --
 .../src/app/components/drive/directory.jsx    |  87 --
 .../app/components/drive/drive-element.jsx    | 645 -------------
 .../components/drive/drive-multi-selector.jsx | 278 ------
 .../drive/drive-multi-selector.scss           |  28 -
 .../src/app/components/drive/drive.scss       | 522 -----------
 .../drive/file-picker/file-picker.jsx         | 213 -----
 .../drive/file-picker/file-picker.scss        |  84 --
 .../src/app/components/drive/file.tsx         |  91 --
 .../app/components/drive/icons/archive.jsx    |  19 -
 .../app/components/drive/icons/archive.svg    |  15 -
 .../src/app/components/drive/icons/code.jsx   |  19 -
 .../src/app/components/drive/icons/code.svg   |  17 -
 .../app/components/drive/icons/document.jsx   |  20 -
 .../app/components/drive/icons/document.svg   |  16 -
 .../src/app/components/drive/icons/file.jsx   |  19 -
 .../src/app/components/drive/icons/file.svg   |   9 -
 .../src/app/components/drive/icons/image.jsx  |  24 -
 .../src/app/components/drive/icons/image.svg  |  16 -
 .../src/app/components/drive/icons/link.jsx   |  24 -
 .../src/app/components/drive/icons/link.svg   |  16 -
 .../src/app/components/drive/icons/pdf.jsx    |  19 -
 .../src/app/components/drive/icons/pdf.svg    |  30 -
 .../src/app/components/drive/icons/slides.jsx |  25 -
 .../src/app/components/drive/icons/slides.svg |  17 -
 .../src/app/components/drive/icons/sound.jsx  |  19 -
 .../src/app/components/drive/icons/sound.svg  |  11 -
 .../components/drive/icons/spreadsheet.jsx    |  28 -
 .../components/drive/icons/spreadsheet.svg    |  16 -
 .../src/app/components/drive/icons/svg.jsx    |  33 -
 .../src/app/components/drive/icons/svg.svg    |  37 -
 .../src/app/components/drive/icons/video.jsx  |  19 -
 .../src/app/components/drive/icons/video.svg  |   7 -
 .../src/app/components/drive/ui/directory.jsx |  56 --
 .../src/app/components/drive/ui/file-type.jsx |  63 --
 .../src/app/components/drive/ui/file.jsx      | 118 ---
 .../app/components/drive/version-details.jsx  | 128 ---
 .../edit-channel/channel-access.tsx           | 101 --
 .../edit-channel/channel-information.tsx      | 248 -----
 .../edit-channel/channel-notifications.tsx    |  89 --
 .../edit-channel/channel-settings-menu.tsx    | 368 --------
 .../src/app/components/edit-channel/index.tsx | 261 ------
 .../editable-text/editable-text.jsx           |  26 -
 .../editable-text/editable-text.scss          |  19 -
 .../components/emoji-picker/emoji-picker.jsx  | 142 ---
 .../components/emoji-picker/emoji-picker.scss |  19 -
 .../pending-file-row.tsx                      |   8 +-
 .../pending-files-list.tsx                    |   6 +-
 .../file-uploads/uploads-viewer.tsx           |   2 +-
 .../app/components/file/file-component.tsx    | 166 ----
 .../src/app/components/file/file.scss         | 160 ----
 .../src/app/components/file/parts/actions.tsx | 152 ---
 .../src/app/components/file/parts/details.tsx |  37 -
 .../src/app/components/file/parts/index.ts    |   4 -
 .../components/file/parts/large-preview.tsx   |  33 -
 .../app/components/file/parts/progress.tsx    |  61 --
 .../app/components/file/parts/thumbnail.tsx   |  42 -
 .../frontend/src/app/components/file/types.ts |   9 -
 .../app/components/forward-message/index.tsx  | 103 ---
 .../highlighted-code/highlighted-code.tsx     |  52 --
 .../input-with-clip-board.jsx                 |   2 +-
 .../src/app/components/inputs/input-enter.jsx |   2 +-
 .../src/app/components/inputs/input-icon.jsx  |   2 +-
 .../components/inputs/input-with-button.jsx   |   4 +-
 .../components/inputs/input-with-color.jsx    |   2 +-
 .../app/components/inputs/input-with-icon.tsx | 203 ----
 .../components/inputs/input-with-select.scss  |  47 -
 .../components/inputs/input-with-select.tsx   | 105 ---
 .../app/components/invitation/invitation.tsx  | 116 ---
 .../parts/allow-anyone-by-email.tsx           |  62 --
 .../invitation/parts/bulk-invitation.tsx      |  10 -
 .../parts/custom-role-invitation.tsx          |  10 -
 .../invitation/parts/invitation-channels.tsx  |  44 -
 .../parts/invitation-input-bulk.tsx           |  85 --
 .../parts/invitation-input-list.tsx           | 147 ---
 .../invitation/parts/invitation-sent.tsx      |  53 --
 .../invitation/parts/invitation-target.tsx    |  53 --
 .../invitation/parts/reached-limit.tsx        |  15 -
 .../invitation/parts/workspace-link.tsx       |  57 --
 .../components/loader/application-loader.tsx  |   2 +-
 .../feature-toggles-hooks.tsx                 |   4 +-
 .../locked-drive-popup/locked-drive-popup.tsx | 128 ++-
 .../locked-guests-popup.tsx                   |   8 +-
 .../locked-history-banner.tsx                 |  16 +-
 .../locked-invite-alert/index.tsx             |  11 +-
 .../locked-only-office-popup.tsx              | 130 ++-
 .../locked-workspace-popup.tsx                | 128 ++-
 .../app/components/main-plus/main-plus.jsx    |  24 -
 .../app/components/main-plus/main-plus.scss   |   0
 .../src/app/components/member/user-parts.tsx  |  12 +-
 .../app/components/menus/menu-component.jsx   |   4 +-
 .../src/app/components/menus/menu.jsx         |   2 +-
 .../app/components/menus/menus-body-layer.jsx |   2 +-
 .../app/components/menus/menus-manager.jsx    |   6 +-
 .../message-seen-by/message-seen-by.tsx       |  68 --
 .../app/components/mobile-redirect/index.tsx  |   2 +-
 .../app/components/modal/modal-component.tsx  |   2 +-
 .../src/app/components/modal/modal-manager.ts |   4 +-
 .../new-version/new-version-component.tsx     |  14 +-
 .../new-version/new-version-modal.tsx         |   2 +-
 .../object-modal/deprecated-object-modal.jsx  |   2 +-
 .../components/object-modal/object-modal.tsx  |   4 +-
 .../on-boarding/account-status-component.tsx  |  78 --
 .../on-boarding/company-billing-banner.tsx    |  46 -
 .../on-boarding/company-status-component.tsx  |  76 --
 .../popups/add-mails-in-workspace.tsx         |  81 --
 .../on-boarding/popups/blocked-account.tsx    |  94 --
 .../on-boarding/popups/blocked-company.tsx    | 138 ---
 .../on-boarding/popups/unverified-account.tsx |  86 --
 .../on-boarding/popups/welcome-on-tdrive.tsx  | 119 ---
 .../online-user-status/online-user-status.tsx |   6 +-
 .../open-desktop-popup/open-desktop-popup.tsx |  10 +-
 .../app/components/parameters/attribute.jsx   |   4 +-
 .../parameters/attributes-manager.js          |   2 +-
 .../src/app/components/picker/picker.jsx      |   4 +-
 .../popup-component/popup-component.jsx       |   2 +-
 .../reminder-selector/reminder-selector.jsx   |   4 +-
 .../rich-text-editor/editor-data-parser.ts    |  84 --
 .../rich-text-editor/editor-state-service.ts  |  67 --
 .../rich-text-editor/editor-toolbar-config.ts |  69 --
 .../rich-text-editor/editor-toolbar.scss      |  30 -
 .../rich-text-editor/editor-toolbar.tsx       | 158 ----
 .../rich-text-editor/editor-utils.ts          | 280 ------
 .../components/rich-text-editor/editor.scss   |  59 --
 .../components/rich-text-editor/editor.tsx    | 703 --------------
 .../rich-text-editor/emojis-service.js        | 139 ---
 .../app/components/rich-text-editor/index.ts  |   3 -
 .../rich-text-editor/markdown/README.md       |   1 -
 .../markdown/draft-to-markdown.js             | 510 ----------
 .../rich-text-editor/markdown/types.ts        |   8 -
 .../plugins/channel/channel-suggestion.tsx    |  14 -
 .../plugins/channel/channel.tsx               |   9 -
 .../rich-text-editor/plugins/channel/index.ts | 110 ---
 .../plugins/commands/command-suggestion.tsx   |  11 -
 .../plugins/commands/command.tsx              |   8 -
 .../plugins/commands/index.ts                 |  90 --
 .../plugins/emoji/emoji-suggestion.tsx        |  17 -
 .../rich-text-editor/plugins/emoji/emoji.tsx  |   8 -
 .../rich-text-editor/plugins/emoji/index.ts   | 103 ---
 .../rich-text-editor/plugins/index.ts         |  63 --
 .../plugins/mentions/index.ts                 | 203 ----
 .../plugins/mentions/mention-suggestion.tsx   |  15 -
 .../plugins/mentions/mention.tsx              |   9 -
 .../plugins/mentions/style.scss               |  10 -
 .../plugins/suggestion/suggestion-list.scss   |  22 -
 .../plugins/suggestion/suggestion-list.tsx    | 199 ----
 .../plugins/suggestion/utils.ts               |  15 -
 .../rich-text-editor/text-count/index.ts      |   4 -
 .../text-count/text-count-service.ts          |  33 -
 .../text-count/text-count.scss                |  11 -
 .../text-count/text-count.tsx                 |  41 -
 .../hidden-notification-service.ts            |   2 +-
 .../hidden-notifications-button.tsx           |   2 +-
 .../app/components/search-popup/common.tsx    |  58 +-
 .../parts/channel-avatar/channel-avatar.scss  |  83 --
 .../parts/channel-avatar/channel-avatar.tsx   | 108 ---
 .../parts/channel-line-result.tsx             |  90 --
 .../search-popup/parts/channel-result.tsx     |  45 -
 .../search-popup/parts/drive-item-result.tsx  |  49 +-
 .../search-popup/parts/file-result.tsx        | 139 ---
 .../search-popup/parts/media-result.tsx       |  29 -
 .../parts/message-result-file.tsx             |  79 --
 .../search-popup/parts/message-result.tsx     |  90 --
 .../search-popup/parts/nothing-found.tsx      |   6 +-
 .../search-popup/parts/nothing-searched.tsx   |   4 +-
 .../search-popup/parts/result-context.tsx     |  55 +-
 .../components/search-popup/search-input.tsx  |  26 +-
 .../components/search-popup/search-popup.tsx  |   4 +-
 .../app/components/search-popup/tabs/all.tsx  | 117 ---
 .../components/search-popup/tabs/channels.tsx |  87 --
 .../components/search-popup/tabs/drive.tsx    |   6 +-
 .../components/search-popup/tabs/files.tsx    |  43 -
 .../components/search-popup/tabs/medias.tsx   |  51 -
 .../components/search-popup/tabs/messages.tsx |  41 -
 .../src/app/components/select/select.jsx      |   4 +-
 .../src/app/components/table/table.tsx        |   2 +-
 .../frontend/src/app/components/tabs/tabs.jsx |   2 +-
 .../app/components/tag-picker/tag-picker.jsx  |  10 +-
 .../components/tag-picker/tag-selector.jsx    |  14 +-
 .../components/task-picker/task-picker.jsx    |   8 +-
 .../app/components/twacode/blocks/chan.tsx    |  45 -
 .../app/components/twacode/blocks/user.tsx    |  96 --
 .../app/components/twacode/blocksCompiler.ts  | 262 ------
 .../src/app/components/twacode/compile.tsx    | 118 ---
 .../twacode/pseudo-markdown-dictionary.tsx    | 383 --------
 .../src/app/components/twacode/twacode.scss   | 348 -------
 .../src/app/components/twacode/twacode.tsx    |  86 --
 .../src/app/components/twacode/types.ts       | 231 -----
 .../src/app/components/ui/user-or-mail.tsx    |   4 +-
 .../frontend/src/app/components/ui/user.jsx   |   2 +-
 .../app/components/uploads/upload-manager.js  | 273 +-----
 .../app/components/uploads/upload-viewer.jsx  |  10 +-
 .../app/components/uploads/upload-zone.tsx    |  58 +-
 .../app/components/user-card/user-card.tsx    |   8 +-
 .../user-list-manager.tsx                     |  18 +-
 .../user-list-manager/user-list-manager.tsx   |  16 +-
 .../components/user-picker/user-picker.jsx    |   6 +-
 .../frontend/src/app/components/user/user.jsx |   6 +-
 .../writing-loader/writing-loader.scss        |  44 -
 .../writing-loader/writing-loader.tsx         |  14 -
 .../app/deprecated/Apps/Calendar/Calendar.js  | 193 ----
 .../src/app/deprecated/Apps/Drive/Drive.js    | 637 -------------
 .../Apps/Drive/utils/ace_modelist.js          | 211 -----
 .../app/deprecated/Apps/Feed/FeedLoader.ts    | 120 ---
 .../src/app/deprecated/Apps/Tasks/Tasks.js    | 154 ----
 .../CollectionsV1/Collections/Collection.js   |   8 +-
 .../Collections/SecuredConnection.js          |   6 +-
 .../Configurators/ConfiguratorsManager.js     |   4 +-
 .../SelectionsManager/SelectionsManager.js    |   4 +-
 .../src/app/deprecated/login/account.js       |   6 +-
 .../deprecated/popupManager/popupManager.js   |   8 +-
 .../src/app/deprecated/search/search.js       | 254 -----
 .../uploadManager/upload-manager.js           |   4 +-
 .../src/app/deprecated/user/CurrentUser.ts    |  24 +-
 .../user/NotificationPreferences.ts           |   8 +-
 .../user/notification_parameters.js           |  16 +-
 .../src/app/deprecated/websocket/websocket.js |  10 +-
 .../src/app/deprecated/workspaces/groups.js   |  16 +-
 .../deprecated/workspaces/listen_groups.js    |   4 +-
 .../deprecated/workspaces/listen_workspace.js |   4 +-
 .../app/deprecated/workspaces/workspaces.jsx  |  32 +-
 .../deprecated/workspaces/workspaces_apps.jsx |  20 +-
 .../src/app/features/auth/auth-service.ts     |  18 +-
 .../app/features/auth/jwt-storage-service.ts  |   8 +-
 .../src/app/features/auth/login-service.ts    |  14 +-
 .../features/auth/provider/auth-provider.ts   |   2 +-
 .../internal-auth-provider-service.ts         |   8 +-
 .../oidc/oidc-auth-provider-service.ts        |  12 +-
 .../api/members-api-client.ts                 |  51 -
 .../api/pending-emails-api-client.ts          |  49 -
 .../hooks/member-hook.ts                      | 111 ---
 .../hooks/members-hook.ts                     |  59 --
 .../hooks/search-channel-member.ts            |  78 --
 .../hooks/search-pending-email.ts             |  22 -
 .../hooks/search-users.ts                     |  21 -
 .../hooks/use-pending-email-hook.ts           |  71 --
 .../hooks/use-pending-emails.ts               |  48 -
 .../hooks/use-search-all.ts                   |  60 --
 .../state/search-channel-member.ts            |  19 -
 .../channel-members-search/state/store.ts     |  55 --
 .../types/channel-members.ts                  |  62 --
 .../api/channel-members-api-client.ts         | 111 ---
 .../use-channel-members-read-sections.ts      |  54 --
 .../channel-members/state/channel-guests.ts   |  12 -
 .../state/channel-members-read-sections.ts    |  39 -
 .../channel-members/state/channel-members.ts  |  12 -
 .../types/channel-member-read-section-type.ts |   8 -
 .../types/channel-member-types.ts             |  19 -
 .../channel-members/types/guest-types.ts      |  11 -
 .../utils/channel-members-roles.ts            |   5 -
 .../channels/api/channel-api-client.ts        | 107 ---
 .../channels/api/channels-mine-api-client.ts  |  98 --
 .../api/channels-reachable-api-client.ts      |  52 --
 .../channels/hooks/use-autoselect-channel.ts  |  46 -
 .../channels/hooks/use-channel-media-files.ts | 111 ---
 .../hooks/use-channel-writing-activity.ts     | 150 ---
 .../features/channels/hooks/use-channel.ts    |  89 --
 .../channels/hooks/use-channels-bar-loader.ts |  18 -
 .../channels/hooks/use-direct-channels.ts     | 107 ---
 .../channels/hooks/use-favorite-channels.ts   |  37 -
 .../hooks/use-public-or-private-channels.ts   | 103 ---
 .../channels/hooks/use-reachable-channels.ts  |  42 -
 .../channels/services/channels-bar-service.ts |  44 -
 .../channels/state/channel-attachment-list.ts |  28 -
 .../state/channel-writing-activity.ts         |  12 -
 .../app/features/channels/state/channels.ts   |  36 -
 .../app/features/channels/types/channel.ts    |  61 --
 .../types/channels-reachable-types.ts         |  15 -
 .../src/app/features/channels/utils/utils.ts  |  12 -
 .../companies/api/company-api-client.ts       |   4 +-
 .../features/companies/hooks/use-companies.ts |  22 +-
 .../app/features/companies/state/companies.ts |   6 +-
 .../app/features/companies/types/company.ts   |   4 +-
 .../console/api/console-api-client.ts         |   6 +-
 .../console/services/console-service.ts       |  14 +-
 .../drive-tdrive/api-client/api-client.ts     |  29 -
 .../hooks/use-drive-tdrive-tab.tsx            |  29 -
 .../app/features/drive-tdrive/state/store.ts  |   7 -
 .../src/app/features/drive-tdrive/types.ts    |   7 -
 .../features/drive/api-client/api-client.ts   |   6 +-
 .../drive/hooks/use-drive-actions.tsx         |   4 +-
 .../features/drive/hooks/use-drive-item.tsx   |   6 +-
 .../features/drive/hooks/use-drive-preview.ts |   8 +-
 .../drive/hooks/use-drive-realtime.tsx        |   2 +-
 .../features/drive/hooks/use-drive-upload.tsx |   6 +-
 .../files/api/file-upload-api-client.ts       |   8 +-
 .../features/files/hooks/use-upload-zones.ts  |  10 +-
 .../app/features/files/hooks/use-upload.ts    |  10 +-
 .../files/services/file-upload-service.ts     |  17 +-
 .../files/state/atoms/pending-files-list.ts   |   2 +-
 .../state/atoms/pending-upload-zones-list.ts  |   4 +-
 .../files/state/selectors/current-task.ts     |   2 +-
 .../src/app/features/files/types/file.ts      |  36 +-
 .../app/features/files/utils/pending-files.ts |   2 +-
 .../features/global/framework/api-service.ts  |   4 +-
 .../framework/registry-decorator-service.ts   |   2 +-
 .../global/framework/requests-api-service.ts  |   2 +-
 .../src/app/features/global/hooks/use-http.ts |   2 +-
 .../app/features/global/hooks/use-interval.ts |   2 +-
 .../app/features/global/hooks/use-realtime.ts |   6 +-
 .../app/features/global/hooks/use-usetiful.ts |   6 +-
 .../features/global/hooks/use-websocket.ts    |   4 +-
 .../global/services/alert-manager-service.ts  |   2 +-
 .../services/globals-tdrive-app-service.ts    |   2 +-
 .../features/global/services/init-service.ts  |  10 +-
 .../global/services/languages-service.ts      |   6 +-
 .../pseudo-markdown-compiler-service.ts       | 869 ------------------
 .../services/search-list-manager-service.ts   | 194 ----
 .../global/services/websocket-service.ts      |   4 +-
 .../app/features/global/utils/Autocomplete.js |   2 +-
 .../src/app/features/global/utils/URLUtils.ts |   4 +-
 .../src/app/features/global/utils/datetime.js |   6 +-
 .../src/app/features/global/utils/window.ts   |   2 +-
 .../features/global/utils/workspacePicker.js  |   4 +-
 .../invitation/api/invitation-api-client.ts   | 108 ---
 .../hooks/use-invitation-channels.ts          |  30 -
 .../invitation/hooks/use-invitation-users.ts  |  71 --
 .../invitation/hooks/use-invitation.ts        |  54 --
 .../features/invitation/state/invitation.ts   |  47 -
 .../messages/api/message-api-client.ts        | 262 ------
 .../messages/api/message-thread-api-client.ts |  63 --
 .../messages/api/message-view-api-client.ts   |  47 -
 .../hooks/use-add-to-windowed-list.ts         | 147 ---
 .../messages/hooks/use-channel-messages.ts    | 234 -----
 .../messages/hooks/use-ephemeral-messages.ts  |  58 --
 .../messages/hooks/use-highlight-message.ts   |  45 -
 .../messages/hooks/use-message-editor.ts      | 210 -----
 .../messages/hooks/use-message-quote-reply.ts |  27 -
 .../messages/hooks/use-message-seen-by.ts     |  34 -
 .../features/messages/hooks/use-message.ts    | 229 -----
 .../messages/hooks/use-thread-messages.ts     | 189 ----
 .../hooks/with-non-messages-components.tsx    |  50 -
 .../message-editor-service-factory.ts         |  23 -
 .../services/message-editor-service.ts        | 214 -----
 .../services/message-history-service.ts       |  71 --
 .../services/message-reaction-service.ts      |  90 --
 .../messages/state/atoms/message-highlight.ts |  13 -
 .../state/atoms/message-quote-reply.ts        |  41 -
 .../messages/state/atoms/message-seen-by.ts   |  18 -
 .../messages/state/atoms/messages-editor.ts   |  81 --
 .../features/messages/state/atoms/messages.ts |  34 -
 .../selectors/thread-writing-activity.ts      |  19 -
 .../app/features/messages/types/message.ts    | 273 ------
 .../messages/utils/message-with-replies.ts    |  13 -
 .../notifications-preferences-api-client.ts   |  24 -
 .../use-notifications-preference-hook.ts      |  48 -
 .../state/notifications-preferences.ts        |   8 -
 .../types/notifications-preferences.ts        |  20 -
 .../api/pending-emails-api-client.ts          |  51 -
 .../hooks/use-pending-emails.ts               |  47 -
 .../pending-emails/state/pending-emails.ts    |  12 -
 .../pending-emails/types/pending-email.ts     |  19 -
 .../hooks/use-router-channel-selected.ts      |   2 +-
 .../router/hooks/use-router-channel.ts        |   6 +-
 .../router/hooks/use-router-company.ts        |   6 +-
 .../features/router/hooks/use-router-tab.ts   |   6 +-
 .../hooks/use-router-workspace-selected.ts    |   2 +-
 .../router/hooks/use-router-workspace.ts      |   6 +-
 .../router/services/app-view-service.ts       |   4 +-
 .../router/services/router-service.ts         |  14 +-
 .../app/features/router/state/atoms/router.ts |   2 +-
 .../search/hooks/use-search-channels.ts       | 138 ---
 .../search/hooks/use-search-drive-items.tsx   |  10 +-
 .../hooks/use-search-files-or-medias.ts       | 116 ---
 .../search/hooks/use-search-messages.ts       |  80 --
 .../features/search/state/recent-channels.ts  |  12 -
 .../search/state/recent-drive-items.ts        |   4 +-
 .../app/features/search/state/recent-files.ts |  12 -
 .../features/search/state/recent-medias.ts    |  12 -
 .../search/state/search-channels-result.ts    |  27 -
 .../state/search-drive-items-result.tsx       |   2 +-
 .../search/state/search-files-result.ts       |  22 -
 .../search/state/search-medias-result.ts      |  22 -
 .../search/state/search-messages-result.ts    |  22 -
 .../app/features/tabs/api/tabs-api-client.ts  |  47 -
 .../src/app/features/tabs/hooks/use-tabs.ts   |  54 --
 .../src/app/features/tabs/state/tabs.ts       |  13 -
 .../src/app/features/tabs/types/tab.ts        |   9 -
 .../api/online-user-realtime-api-client.ts    |   2 +-
 .../app/features/users/api/user-api-client.ts |   4 +-
 .../users/api/user-notification-api-client.ts |  22 +-
 .../features/users/hooks/use-current-user.ts  |  12 +-
 .../features/users/hooks/use-notifications.ts |  14 +-
 .../features/users/hooks/use-online-users.ts  |   6 +-
 .../users/hooks/use-search-user-list.ts       |  10 +-
 .../use-set-last-workspace-preferences.ts     |   6 +-
 .../app/features/users/hooks/use-user-list.ts |  18 +-
 .../src/app/features/users/hooks/use-user.ts  |   8 +-
 .../users/hooks/use-users-listener.ts         |   8 +-
 .../users/services/current-user-service.ts    |  16 +-
 .../users/services/listen-users-service.ts    |   8 +-
 .../services/push-desktop-notification.tsx    |   2 +-
 .../users/state/atoms/current-user.ts         |   4 +-
 .../users/state/atoms/online-users.ts         |   2 +-
 .../features/users/state/atoms/user-list.ts   |   2 +-
 .../users/state/context/user-context-state.ts |   8 +-
 .../users/state/integration/user-context.tsx  |   2 +-
 .../users/state/selectors/search-user.ts      |   4 +-
 .../users/state/selectors/user-selector.ts    |   4 +-
 .../app/features/users/types/user-context.ts  |   2 +-
 .../src/app/features/users/types/user.ts      |   8 +-
 .../src/app/features/users/utils/async-get.ts |   4 +-
 .../features/viewer/api/viewer-api-client.ts  |   9 +-
 .../app/features/viewer/hooks/use-viewer.ts   |  12 +-
 .../api/workspace-members-api-client.ts       |   5 +-
 .../services/workspace-members-service.ts     |  24 +-
 .../workspaces/api/workspace-api-client.ts    |  27 +-
 .../workspaces/hooks/use-workspaces.ts        |  24 +-
 .../services/magic-links-service.tsx          |   4 +-
 .../services/workspace-user-rights-service.ts |   4 +-
 .../services/workspaces-listener-service.ts   |  10 +-
 .../workspaces/state/workspace-list.ts        |   8 +-
 .../features/workspaces/types/workspace.ts    |   4 +-
 .../app/molecules/download-banner/index.tsx   |   6 +-
 .../src/app/molecules/message-quote/index.tsx |  61 --
 .../message-quote/message-quote.stories.tsx   |  49 -
 .../app/molecules/message-status/index.tsx    |  18 -
 .../message-status/message-status.stories.tsx |  42 -
 .../src/app/molecules/tabs/index.stories.tsx  |  46 -
 .../frontend/src/app/molecules/tabs/index.tsx |  41 -
 tdrive/frontend/src/app/views/client/app.tsx  |   4 +-
 .../app/views/client/body/drive/browser.tsx   |  24 +-
 .../body/drive/components/select-users.tsx    |  12 +-
 .../views/client/body/drive/context-menu.tsx  |  16 +-
 .../client/body/drive/documents/common.tsx    |   4 +-
 .../body/drive/documents/document-row.tsx     |  14 +-
 .../body/drive/documents/folder-row.tsx       |   8 +-
 .../views/client/body/drive/drive-item.tsx    |   2 +-
 .../views/client/body/drive/header-path.tsx   |   6 +-
 .../drive/modals/confirm-delete/index.tsx     |  14 +-
 .../body/drive/modals/confirm-trash/index.tsx |  16 +-
 .../drive/modals/create/create-folder.tsx     |  10 +-
 .../body/drive/modals/create/create-link.tsx  |   8 +-
 .../client/body/drive/modals/create/index.tsx |  12 +-
 .../body/drive/modals/properties/index.tsx    |  12 +-
 .../body/drive/modals/selector/index.tsx      |  10 +-
 .../drive/modals/update-access/common.tsx     |   4 +-
 .../body/drive/modals/update-access/index.tsx |   4 +-
 .../modals/update-access/internal-access.tsx  |  20 +-
 .../update-access/public-link-access.tsx      |  10 +-
 .../body/drive/modals/versions/index.tsx      |  16 +-
 .../app/views/client/body/drive/shared.tsx    |  12 +-
 .../src/app/views/client/body/index.tsx       |  10 +-
 .../src/app/views/client/common/account.tsx   |  16 +-
 .../src/app/views/client/common/app-grid.tsx  |   4 +-
 .../src/app/views/client/common/search.tsx    |  10 +-
 .../frontend/src/app/views/client/index.tsx   |  34 +-
 .../client/popup/AddUser/AddUserByEmail.tsx   |  22 +-
 .../views/client/popup/AddUser/MagicLinks.tsx |  12 +-
 .../CreateCompanyView/CreateCompanyView.jsx   |  14 +-
 .../CreateWorkspacePage.jsx                   |  10 +-
 .../client/popup/SecondMail/SecondMail.jsx    |  14 +-
 .../popup/UserParameter/Pages/Assistant.tsx   |   8 +-
 .../UserParameter/Pages/Notifications.tsx     | 319 -------
 .../popup/UserParameter/UserParameter.jsx     |  33 +-
 .../Pages/Applications/ApplicationsTable.tsx  |  14 +-
 .../Applications/CompanyApplicationPopup.tsx  |  12 +-
 .../Applications/CompanyApplicationsTable.tsx |  18 +-
 .../Pages/CompanyIdendity.jsx                 |  10 +-
 .../Pages/CompanyIntegrations.tsx             |   8 +-
 .../Pages/CreateCompanyAccount.jsx            |  10 +-
 .../Pages/Workspace/DeleteWorkspacePopup.tsx  |  16 +-
 .../Pages/Workspace/WorkspaceIdentity.tsx     |  16 +-
 .../Pages/WorkspacePartner.tsx                |  38 +-
 .../WorkspacePartnerTabs/MemberGrade.tsx      |   2 +-
 .../Pages/WorkspacePartnerTabs/Members.tsx    |  32 +-
 .../Pages/WorkspacePartnerTabs/Pending.tsx    |  10 +-
 .../WorkspaceParameter/WorkspaceParameter.jsx |  20 +-
 .../application-parameters/AppsParameters.jsx |  12 +-
 .../pages/TwacodeTester.jsx                   |   2 +-
 .../pages/WorkspaceAppsEditor.jsx             |  10 +-
 .../pages/WorkspaceAppsInformations.jsx       |   6 +-
 .../pages/application-creator.tsx             |  16 +-
 .../components/application-access.tsx         |   4 +-
 .../components/application-api.tsx            |   4 +-
 .../components/application-display.tsx        |   2 +-
 .../components/application-help.tsx           |   4 +-
 .../components/application-identity.tsx       |   4 +-
 .../components/application-publication.tsx    |  12 +-
 .../components/tag-picker.tsx                 |   2 +-
 .../application-editor/default-scopes.ts      |   2 +-
 .../pages/application-editor/index.tsx        |  16 +-
 .../src/app/views/client/side-bar/actions.tsx |   2 +-
 .../views/client/viewer/archive/display.tsx   |   4 +-
 .../src/app/views/client/viewer/display.tsx   |   4 +-
 .../app/views/client/viewer/drive-display.tsx |   2 +-
 .../app/views/client/viewer/drive-preview.tsx |  24 +-
 .../views/client/viewer/images/controls.tsx   |   4 +-
 .../app/views/client/viewer/link/display.tsx  |   4 +-
 .../views/client/viewer/other/controls.tsx    |  12 +-
 .../client/viewer/other/editors-service.ts    |  10 +-
 .../src/app/views/client/viewer/viewer.tsx    |  88 +-
 .../src/app/views/error/error-boundary.tsx    |   8 +-
 tdrive/frontend/src/app/views/error/index.tsx |   6 +-
 tdrive/frontend/src/app/views/join/index.tsx  |  14 +-
 .../app/views/login/console/console-login.tsx |   4 +-
 .../app/views/login/internal/error/index.tsx  |  10 +-
 .../login/internal/forgot-password/index.jsx  |   6 +-
 .../views/login/internal/internal-login.tsx   |  10 +-
 .../login/internal/login-view/login-view.jsx  |   6 +-
 .../views/login/internal/signin/signin.jsx    |   4 +-
 .../internal/verify-mail/verify-mail.jsx      |   8 +-
 tdrive/frontend/src/app/views/login/login.tsx |   6 +-
 .../frontend/src/app/views/login/logout.tsx   |   2 +-
 .../src/utils/browser-detect/index.ts         |   4 +-
 tdrive/frontend/src/utils/messages/index.ts   |  21 -
 547 files changed, 1271 insertions(+), 27036 deletions(-)
 delete mode 100644 tdrive/frontend/src/app/components/add-user-button/add-user-button.scss
 delete mode 100644 tdrive/frontend/src/app/components/add-user-button/add-user-button.tsx
 delete mode 100755 tdrive/frontend/src/app/components/attachment-picker/attachment-picker.jsx
 delete mode 100755 tdrive/frontend/src/app/components/attachment-picker/attachment-picker.scss
 delete mode 100755 tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.jsx
 delete mode 100755 tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.scss
 delete mode 100755 tdrive/frontend/src/app/components/calendar/date-picker.jsx
 delete mode 100755 tdrive/frontend/src/app/components/calendar/date-picker.scss
 delete mode 100755 tdrive/frontend/src/app/components/calendar/day-picker/day-picker.jsx
 delete mode 100755 tdrive/frontend/src/app/components/calendar/day-picker/day-picker.scss
 delete mode 100755 tdrive/frontend/src/app/components/calendar/event/event.jsx
 delete mode 100755 tdrive/frontend/src/app/components/calendar/event/event.scss
 delete mode 100755 tdrive/frontend/src/app/components/calendar/time-selector.jsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-attachement-list/channel-attachement-list.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-attachment.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-files.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-medias.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-attachement-list/parts/commun.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-members-list/channel-members-modal.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-members-list/email-item.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-members-list/member-item.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-members-list/user-item.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channel-members-list/users-search-modal.tsx
 delete mode 100644 tdrive/frontend/src/app/components/channels-selector/index.tsx
 delete mode 100644 tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.scss
 delete mode 100644 tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.tsx
 delete mode 100755 tdrive/frontend/src/app/components/components-tester/component-doc.jsx
 delete mode 100755 tdrive/frontend/src/app/components/components-tester/component-doc.scss
 delete mode 100755 tdrive/frontend/src/app/components/components-tester/components-tester.jsx
 delete mode 100755 tdrive/frontend/src/app/components/components-tester/components-tester.scss
 delete mode 100755 tdrive/frontend/src/app/components/components-tester/group/inputs.jsx
 delete mode 100755 tdrive/frontend/src/app/components/draggable/draggable-body-layer.jsx
 delete mode 100755 tdrive/frontend/src/app/components/draggable/draggable-manager.js
 delete mode 100755 tdrive/frontend/src/app/components/draggable/draggable.scss
 delete mode 100755 tdrive/frontend/src/app/components/draggable/draggable.tsx
 delete mode 100755 tdrive/frontend/src/app/components/draggable/droppable-zone.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/directory.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/drive-element.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/drive-multi-selector.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/drive-multi-selector.scss
 delete mode 100755 tdrive/frontend/src/app/components/drive/drive.scss
 delete mode 100755 tdrive/frontend/src/app/components/drive/file-picker/file-picker.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/file-picker/file-picker.scss
 delete mode 100755 tdrive/frontend/src/app/components/drive/file.tsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/archive.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/archive.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/code.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/code.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/document.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/document.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/file.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/file.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/image.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/image.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/link.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/link.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/pdf.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/pdf.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/slides.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/slides.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/sound.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/sound.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/spreadsheet.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/spreadsheet.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/svg.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/svg.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/video.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/icons/video.svg
 delete mode 100755 tdrive/frontend/src/app/components/drive/ui/directory.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/ui/file-type.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/ui/file.jsx
 delete mode 100755 tdrive/frontend/src/app/components/drive/version-details.jsx
 delete mode 100644 tdrive/frontend/src/app/components/edit-channel/channel-access.tsx
 delete mode 100644 tdrive/frontend/src/app/components/edit-channel/channel-information.tsx
 delete mode 100644 tdrive/frontend/src/app/components/edit-channel/channel-notifications.tsx
 delete mode 100644 tdrive/frontend/src/app/components/edit-channel/channel-settings-menu.tsx
 delete mode 100644 tdrive/frontend/src/app/components/edit-channel/index.tsx
 delete mode 100755 tdrive/frontend/src/app/components/editable-text/editable-text.jsx
 delete mode 100755 tdrive/frontend/src/app/components/editable-text/editable-text.scss
 delete mode 100755 tdrive/frontend/src/app/components/emoji-picker/emoji-picker.jsx
 delete mode 100755 tdrive/frontend/src/app/components/emoji-picker/emoji-picker.scss
 delete mode 100644 tdrive/frontend/src/app/components/file/file-component.tsx
 delete mode 100644 tdrive/frontend/src/app/components/file/file.scss
 delete mode 100644 tdrive/frontend/src/app/components/file/parts/actions.tsx
 delete mode 100644 tdrive/frontend/src/app/components/file/parts/details.tsx
 delete mode 100644 tdrive/frontend/src/app/components/file/parts/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/file/parts/large-preview.tsx
 delete mode 100644 tdrive/frontend/src/app/components/file/parts/progress.tsx
 delete mode 100644 tdrive/frontend/src/app/components/file/parts/thumbnail.tsx
 delete mode 100644 tdrive/frontend/src/app/components/file/types.ts
 delete mode 100644 tdrive/frontend/src/app/components/forward-message/index.tsx
 delete mode 100755 tdrive/frontend/src/app/components/highlighted-code/highlighted-code.tsx
 delete mode 100755 tdrive/frontend/src/app/components/inputs/input-with-icon.tsx
 delete mode 100644 tdrive/frontend/src/app/components/inputs/input-with-select.scss
 delete mode 100644 tdrive/frontend/src/app/components/inputs/input-with-select.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/invitation.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/allow-anyone-by-email.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/bulk-invitation.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/custom-role-invitation.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/invitation-channels.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/invitation-input-bulk.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/invitation-input-list.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/invitation-sent.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/invitation-target.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/reached-limit.tsx
 delete mode 100644 tdrive/frontend/src/app/components/invitation/parts/workspace-link.tsx
 delete mode 100755 tdrive/frontend/src/app/components/main-plus/main-plus.jsx
 delete mode 100755 tdrive/frontend/src/app/components/main-plus/main-plus.scss
 delete mode 100644 tdrive/frontend/src/app/components/message-seen-by/message-seen-by.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/account-status-component.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/company-billing-banner.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/company-status-component.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/popups/add-mails-in-workspace.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/popups/blocked-account.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/popups/blocked-company.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/popups/unverified-account.tsx
 delete mode 100644 tdrive/frontend/src/app/components/on-boarding/popups/welcome-on-tdrive.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor-data-parser.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor-state-service.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar-config.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.scss
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor-utils.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor.scss
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/editor.tsx
 delete mode 100755 tdrive/frontend/src/app/components/rich-text-editor/emojis-service.js
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/markdown/README.md
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/markdown/draft-to-markdown.js
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/markdown/types.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel-suggestion.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command-suggestion.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji-suggestion.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention-suggestion.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/style.scss
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.scss
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.tsx
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/utils.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/text-count/index.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count-service.ts
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.scss
 delete mode 100644 tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.scss
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.tsx
 delete mode 100755 tdrive/frontend/src/app/components/search-popup/parts/channel-line-result.tsx
 delete mode 100755 tdrive/frontend/src/app/components/search-popup/parts/channel-result.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/parts/file-result.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/parts/media-result.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/parts/message-result-file.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/parts/message-result.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/tabs/all.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/tabs/channels.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/tabs/files.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/tabs/medias.tsx
 delete mode 100644 tdrive/frontend/src/app/components/search-popup/tabs/messages.tsx
 delete mode 100755 tdrive/frontend/src/app/components/twacode/blocks/chan.tsx
 delete mode 100644 tdrive/frontend/src/app/components/twacode/blocks/user.tsx
 delete mode 100644 tdrive/frontend/src/app/components/twacode/blocksCompiler.ts
 delete mode 100644 tdrive/frontend/src/app/components/twacode/compile.tsx
 delete mode 100644 tdrive/frontend/src/app/components/twacode/pseudo-markdown-dictionary.tsx
 delete mode 100755 tdrive/frontend/src/app/components/twacode/twacode.scss
 delete mode 100755 tdrive/frontend/src/app/components/twacode/twacode.tsx
 delete mode 100644 tdrive/frontend/src/app/components/twacode/types.ts
 delete mode 100644 tdrive/frontend/src/app/components/writing-loader/writing-loader.scss
 delete mode 100644 tdrive/frontend/src/app/components/writing-loader/writing-loader.tsx
 delete mode 100755 tdrive/frontend/src/app/deprecated/Apps/Calendar/Calendar.js
 delete mode 100755 tdrive/frontend/src/app/deprecated/Apps/Drive/Drive.js
 delete mode 100755 tdrive/frontend/src/app/deprecated/Apps/Drive/utils/ace_modelist.js
 delete mode 100644 tdrive/frontend/src/app/deprecated/Apps/Feed/FeedLoader.ts
 delete mode 100755 tdrive/frontend/src/app/deprecated/Apps/Tasks/Tasks.js
 delete mode 100755 tdrive/frontend/src/app/deprecated/search/search.js
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/api/members-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/api/pending-emails-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/member-hook.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/members-hook.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/search-channel-member.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/search-pending-email.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/search-users.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-email-hook.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-emails.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/hooks/use-search-all.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/state/search-channel-member.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/state/store.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members-search/types/channel-members.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/api/channel-members-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/hooks/use-channel-members-read-sections.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/state/channel-guests.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/state/channel-members-read-sections.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/state/channel-members.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/types/channel-member-read-section-type.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/types/channel-member-types.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/types/guest-types.ts
 delete mode 100644 tdrive/frontend/src/app/features/channel-members/utils/channel-members-roles.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/api/channel-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/api/channels-mine-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/api/channels-reachable-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-autoselect-channel.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-channel-media-files.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-channel-writing-activity.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-channel.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-channels-bar-loader.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-direct-channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-favorite-channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-public-or-private-channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/hooks/use-reachable-channels.ts
 delete mode 100755 tdrive/frontend/src/app/features/channels/services/channels-bar-service.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/state/channel-attachment-list.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/state/channel-writing-activity.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/state/channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/types/channel.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/types/channels-reachable-types.ts
 delete mode 100644 tdrive/frontend/src/app/features/channels/utils/utils.ts
 delete mode 100644 tdrive/frontend/src/app/features/drive-tdrive/api-client/api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/drive-tdrive/hooks/use-drive-tdrive-tab.tsx
 delete mode 100644 tdrive/frontend/src/app/features/drive-tdrive/state/store.ts
 delete mode 100644 tdrive/frontend/src/app/features/drive-tdrive/types.ts
 delete mode 100644 tdrive/frontend/src/app/features/global/services/pseudo-markdown-compiler-service.ts
 delete mode 100644 tdrive/frontend/src/app/features/global/services/search-list-manager-service.ts
 delete mode 100644 tdrive/frontend/src/app/features/invitation/api/invitation-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/invitation/hooks/use-invitation-channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/invitation/hooks/use-invitation-users.ts
 delete mode 100644 tdrive/frontend/src/app/features/invitation/hooks/use-invitation.ts
 delete mode 100644 tdrive/frontend/src/app/features/invitation/state/invitation.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/api/message-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/api/message-thread-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/api/message-view-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-add-to-windowed-list.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-channel-messages.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-ephemeral-messages.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-highlight-message.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-message-editor.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-message-quote-reply.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-message-seen-by.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-message.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/use-thread-messages.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/hooks/with-non-messages-components.tsx
 delete mode 100644 tdrive/frontend/src/app/features/messages/services/message-editor-service-factory.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/services/message-editor-service.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/services/message-history-service.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/services/message-reaction-service.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/state/atoms/message-highlight.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/state/atoms/message-quote-reply.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/state/atoms/message-seen-by.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/state/atoms/messages-editor.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/state/atoms/messages.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/state/selectors/thread-writing-activity.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/types/message.ts
 delete mode 100644 tdrive/frontend/src/app/features/messages/utils/message-with-replies.ts
 delete mode 100644 tdrive/frontend/src/app/features/notifications-preferences/api/notifications-preferences-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/notifications-preferences/hooks/use-notifications-preference-hook.ts
 delete mode 100644 tdrive/frontend/src/app/features/notifications-preferences/state/notifications-preferences.ts
 delete mode 100644 tdrive/frontend/src/app/features/notifications-preferences/types/notifications-preferences.ts
 delete mode 100644 tdrive/frontend/src/app/features/pending-emails/api/pending-emails-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/pending-emails/hooks/use-pending-emails.ts
 delete mode 100644 tdrive/frontend/src/app/features/pending-emails/state/pending-emails.ts
 delete mode 100644 tdrive/frontend/src/app/features/pending-emails/types/pending-email.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/hooks/use-search-channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/hooks/use-search-files-or-medias.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/hooks/use-search-messages.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/recent-channels.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/recent-files.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/recent-medias.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/search-channels-result.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/search-files-result.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/search-medias-result.ts
 delete mode 100644 tdrive/frontend/src/app/features/search/state/search-messages-result.ts
 delete mode 100644 tdrive/frontend/src/app/features/tabs/api/tabs-api-client.ts
 delete mode 100644 tdrive/frontend/src/app/features/tabs/hooks/use-tabs.ts
 delete mode 100644 tdrive/frontend/src/app/features/tabs/state/tabs.ts
 delete mode 100644 tdrive/frontend/src/app/features/tabs/types/tab.ts
 delete mode 100644 tdrive/frontend/src/app/molecules/message-quote/index.tsx
 delete mode 100644 tdrive/frontend/src/app/molecules/message-quote/message-quote.stories.tsx
 delete mode 100644 tdrive/frontend/src/app/molecules/message-status/index.tsx
 delete mode 100644 tdrive/frontend/src/app/molecules/message-status/message-status.stories.tsx
 delete mode 100644 tdrive/frontend/src/app/molecules/tabs/index.stories.tsx
 delete mode 100644 tdrive/frontend/src/app/molecules/tabs/index.tsx
 delete mode 100755 tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Notifications.tsx
 delete mode 100644 tdrive/frontend/src/utils/messages/index.ts

diff --git a/tdrive/frontend/src/app/app.tsx b/tdrive/frontend/src/app/app.tsx
index 1f3b34ec..ed14586e 100755
--- a/tdrive/frontend/src/app/app.tsx
+++ b/tdrive/frontend/src/app/app.tsx
@@ -6,13 +6,13 @@ import { RecoilRoot } from 'recoil';
 
 import MobileRedirect from './components/mobile-redirect';
 import RouterServices, { RouteType } from './features/router/services/router-service';
-import ErrorBoundary from 'app/views/error/error-boundary';
+import ErrorBoundary from '@views/error/error-boundary';
 import InitService from './features/global/services/init-service';
-import useTimeout from 'app/features/global/hooks/use-timeout';
+import useTimeout from '@features/global/hooks/use-timeout';
 import ApplicationLoader from './components/loader/application-loader';
 
 import DebugState from './components/debug/debug-state';
-import 'app/styles/index.less';
+import '@styles/index.less';
 
 const delayMessage = 5000;
 
diff --git a/tdrive/frontend/src/app/atoms/link/link.stories.tsx b/tdrive/frontend/src/app/atoms/link/link.stories.tsx
index f5e1d151..a65de471 100644
--- a/tdrive/frontend/src/app/atoms/link/link.stories.tsx
+++ b/tdrive/frontend/src/app/atoms/link/link.stories.tsx
@@ -6,7 +6,13 @@ import A from './index';
 export default {
   title: '@atoms/link',
   component: A,
-  decorators: [(Story) => (<MemoryRouter><Story/></MemoryRouter>)]
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 } as ComponentMeta<typeof A>;
 
 const Template: ComponentStory<typeof A> = args => <A {...args} />;
@@ -15,7 +21,7 @@ export const Default = Template.bind({});
 Default.args = {
   href: 'https://www.google.com',
   children: 'Link',
-}
+};
 
 export const noColor = Template.bind({});
 noColor.args = {
diff --git a/tdrive/frontend/src/app/components/add-user-button/add-user-button.scss b/tdrive/frontend/src/app/components/add-user-button/add-user-button.scss
deleted file mode 100644
index 14137faa..00000000
--- a/tdrive/frontend/src/app/components/add-user-button/add-user-button.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.addUserButton {
-  color: var(--primary);
-
-  .icon {
-    .iconBox {
-      width: 18px;
-      height: 18px;
-      background-color: var(--primary-background);
-      border-radius: 4px;
-      padding-left: 2px;
-
-      .icon-unicon {
-        color: var(--primary) !important;
-      }
-    }
-    color: var(--primary) !important ;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/add-user-button/add-user-button.tsx b/tdrive/frontend/src/app/components/add-user-button/add-user-button.tsx
deleted file mode 100644
index 1c097943..00000000
--- a/tdrive/frontend/src/app/components/add-user-button/add-user-button.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import Icon from 'app/components/icon/icon.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import './add-user-button.scss';
-import { useRecoilState } from 'recoil';
-import { invitationState } from 'app/features/invitation/state/invitation';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import { useCurrentWorkspace } from 'app/features/workspaces/hooks/use-workspaces';
-
-export default () => {
-  const [, setInvitationOpen] = useRecoilState(invitationState);
-  const { allowed_guests, allowed_members } = useInvitationUsers();
-  const { workspace } = useCurrentWorkspace();
-
-  return AccessRightsService.hasLevel(workspace?.id, 'moderator') &&
-    (allowed_guests > 0 || allowed_members > 0) ? (
-    <div
-      className="channel addUserButton"
-      onClick={() => {
-        setInvitationOpen(true);
-      }}
-    >
-      <div className="icon">
-        <div className="iconBox">
-          <Icon type="plus" />
-        </div>
-      </div>
-      <div className="text">
-        {Languages.t(
-          'scenes.app.popup.workspaceparameter.pages.collaboraters_adding_button',
-          [],
-          'Ajouter des collaborateurs',
-        )}
-      </div>
-    </div>
-  ) : (
-    <></>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/attachment-picker/attachment-picker.jsx b/tdrive/frontend/src/app/components/attachment-picker/attachment-picker.jsx
deleted file mode 100755
index fddfebeb..00000000
--- a/tdrive/frontend/src/app/components/attachment-picker/attachment-picker.jsx
+++ /dev/null
@@ -1,199 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-
-import File from 'components/drive/file';
-import FilePicker from 'components/drive/file-picker/file-picker.jsx';
-import TaskPicker from 'components/task-picker/task-picker.jsx';
-import Menu from 'components/menus/menu.jsx';
-import Icon from 'app/components/icon/icon.jsx';
-import Button from 'components/buttons/button.jsx';
-import UploadZone from 'components/uploads/upload-zone';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import './attachment-picker.scss';
-
-export default class AttachmentPicker extends Component {
-  /*
-        props : {
-            readOnly : bool
-            attachments : []
-            onChange
-            className
-        }
-    */
-
-  getIcon(att) {
-    if (att.type.toLocaleLowerCase() === 'event') {
-      return 'calendar-alt';
-    }
-    if (att.type.toLocaleLowerCase() === 'file') {
-      return 'folder';
-    }
-    if (att.type.toLocaleLowerCase() === 'task') {
-      return 'check-square';
-    }
-  }
-  addAttachment(attachment) {
-    var attachments = this.props.attachments || [];
-    attachments.push(attachment);
-    if (this.props.onChange) {
-      this.props.onChange(attachments);
-    }
-  }
-  removeAttachment(attachment) {
-    var attachments = this.props.attachments || [];
-    var index = attachments.indexOf(attachment);
-    if (index >= 0) {
-      attachments.splice(index, 1);
-      if (this.props.onChange) {
-        this.props.onChange(attachments);
-      }
-    }
-  }
-  render() {
-    return (
-      <div className={'attachmentPicker ' + (this.props.className || '')}>
-        <div className="attachments">
-          {(Object.values(this.props.attachments || {}) || []).map(att => {
-            if (att.type === 'file') {
-              var additionalMenu = [];
-              if (!this.props.readOnly) {
-                additionalMenu = [
-                  {
-                    type: 'menu',
-                    text: Languages.t(
-                      'components.attachmentpicker.remove_attach',
-                      [],
-                      'Remove attachment',
-                    ),
-                    onClick: () => {
-                      this.removeAttachment(att);
-                    },
-                  },
-                ];
-              }
-              return (
-                <div className="attachment attachment_file drive_view list" key={`attachment_file-${att.id}`}>
-                  <File
-                    data={{ id: att.id || '' }}
-                    additionalMenu={additionalMenu}
-                    notInDrive={true}
-                    style={{ marginBottom: 0 }}
-                  />
-                </div>
-              );
-            }
-            return (
-              <div className="attachment" key={att.id}>
-                <Icon className="app-icon" type={this.getIcon(att)} />
-                {att.name}
-                {!this.props.readOnly && (
-                  <Icon
-                    className="remove"
-                    type="times"
-                    onClick={() => {
-                      this.removeAttachment(att);
-                    }}
-                  />
-                )}
-              </div>
-            );
-          })}
-        </div>
-        {!this.props.readOnly && (
-          <Menu
-            style={{ display: 'inline-block' }}
-            menu={[
-              {
-                type: 'menu',
-                text: Languages.t('components.attachmentpicker.file', [], 'File'),
-                icon: 'file',
-                submenu: [
-                  {
-                    type: 'menu',
-                    icon: 'desktop',
-                    text: Languages.t(
-                      'components.attachmentpicker.from_computer',
-                      [],
-                      'From computer',
-                    ),
-                    onClick: () => {
-                      this.upload_zone.open();
-                      MenusManager.closeMenu();
-                    },
-                  },
-                  {
-                    type: 'menu',
-                    icon: 'folder',
-                    text: Languages.t(
-                      'components.attachmentpicker.from_tdrive',
-                      [],
-                      'From Tdrive Documents',
-                    ),
-                    submenu: [
-                      {
-                        type: 'react-element',
-                        reactElement: (
-                          <FilePicker
-                            mode={'select_file'}
-                            onChoose={res => {
-                              this.addAttachment({ type: 'file', id: res.id, name: res.name });
-                              MenusManager.closeMenu();
-                            }}
-                            initialDirectory={{ id: '' }}
-                          />
-                        ),
-                      },
-                    ],
-                  },
-                ],
-              },
-              {
-                type: 'menu',
-                text: Languages.t('scenes.apps.tasks.task', [], 'Task'),
-                icon: 'check-square',
-                submenu: [
-                  {
-                    type: 'react-element',
-                    reactElement: (
-                      <TaskPicker
-                        mode={'select_task'}
-                        onChoose={res => {
-                          this.addAttachment({ type: 'task', id: res.id, name: res.title });
-                          MenusManager.closeMenu();
-                        }}
-                      />
-                    ),
-                  },
-                ],
-              },
-            ]}
-          >
-            {' '}
-            <Button className="small secondary-text right-margin">
-              <Icon type="plus" className="m-icon-small" />{' '}
-              {Languages.t(
-                'components.attachmentpicker.add_attachment',
-                [],
-                'Ajouter des pièces jointes',
-              )}
-            </Button>
-          </Menu>
-        )}
-
-        <UploadZone
-          ref={node => (this.upload_zone = node)}
-          disableClick
-          parent={''}
-          driveCollectionKey={'attachment_' + Workspaces.currentWorkspaceId}
-          uploadOptions={{ workspace_id: Workspaces.currentWorkspaceId, detached: true }}
-          onUploaded={res => {
-            this.addAttachment({ type: 'file', id: res.id, name: res.name });
-          }}
-          multiple={false}
-        />
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/attachment-picker/attachment-picker.scss b/tdrive/frontend/src/app/components/attachment-picker/attachment-picker.scss
deleted file mode 100755
index 1641b683..00000000
--- a/tdrive/frontend/src/app/components/attachment-picker/attachment-picker.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.attachmentPicker {
-  .attachment {
-    display: inline-block;
-    font-size: 12px;
-    color: var(--black);
-    border: solid 1px var(--grey-background);
-    height: 32px;
-    box-sizing: border-box;
-    border-radius: var(--border-radius-large);
-    padding: 4px;
-    padding-right: 8px;
-    line-height: 24px;
-    margin-right: 8px;
-    margin-bottom: 8px;
-
-    &.attachment_file {
-      border: 0;
-      padding: 0;
-      height: auto;
-    }
-  }
-
-  i.app-icon {
-    margin-right: 4px;
-    margin-left: 4px;
-    font-size: 14px;
-    position: relative;
-    top: -1px;
-    vertical-align: top;
-  }
-
-  .remove {
-    opacity: 0.5;
-    cursor: pointer;
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.jsx b/tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.jsx
deleted file mode 100755
index 5b3d3155..00000000
--- a/tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/jsx-key */
-import React from 'react';
-import './calendar-selector.scss';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Select from 'components/select/select.jsx';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import WorkspacesService from 'app/deprecated/workspaces/workspaces.jsx';
-import Languages from 'app/features/global/services/languages-service';
-
-export default class CalendarSelector extends React.Component {
-  constructor(props) {
-    super();
-    this.props = props;
-
-    this.state = {
-      selected: [],
-    };
-  }
-
-  delete(item) {
-    var list = this.props.value.map(item => item.calendar_id);
-    const index = list.indexOf(item.id);
-    if (index >= 0) {
-      list.splice(index, 1);
-      this.change(list);
-    }
-    MenusManager.closeMenu();
-  }
-
-  openMenu(evt, item) {
-    if (this.props.readonly) {
-      return;
-    }
-    MenusManager.openMenu(
-      [
-        {
-          className: 'error',
-          icon: 'trash',
-          text: Languages.t('components.calendar.calendarselector.remove', [], 'Retirer'),
-          onClick: () => {
-            this.delete(item);
-          },
-        },
-      ],
-      { x: evt.clientX, y: evt.clientY, width: 150 },
-      'bottom',
-    );
-  }
-
-  change(list) {
-    if (this.props.onChange)
-      this.props.onChange(
-        list
-          .map(id => {
-            var cal = Collections.get('calendars').find(id);
-            if (!cal) {
-              return undefined;
-            }
-            return {
-              calendar_id: cal.id,
-              workspace_id: cal.workspace_id,
-            };
-          })
-          .filter(item => item),
-      );
-  }
-
-  render() {
-    return (
-      <div
-        className={
-          'calendar_selector_container ' +
-          (this.props.medium ? 'medium ' : '') +
-          (this.props.small ? 'small ' : '') +
-          (this.props.big ? 'big ' : '') +
-          this.props.className
-        }
-      >
-        <div className="selected_calendars_list calendar_selector_part">
-          {this.props.value.map(ws_cal_id => {
-            var item = Collections.get('calendars').find(ws_cal_id.calendar_id);
-            if (!item || item.workspace_id !== WorkspacesService.currentWorkspaceId) {
-              return '';
-            }
-            return (
-              <div
-                ref={node => (this.node = node)}
-                onClick={evt => this.openMenu(evt, item)}
-                className={'calendar_item ' + (this.props.readonly ? '' : 'removable')}
-              >
-                <div className="calendar_color" style={{ background: item.color }} />
-                {'' + item.title}
-              </div>
-            );
-          })}
-
-          {(!this.props.value || this.props.value.length === 0) && (
-            <div className="smalltext right-margin" style={{ lineHeight: '40px' }}>
-              {Languages.t(
-                'components.calendar.calendarselector.no_workspace_calendar',
-                [],
-                "Aucun calendrier d'espace de travail.",
-              )}
-            </div>
-          )}
-        </div>
-
-        {!this.props.readonly && (
-          <div className="list_calendar_to_select">
-            <Select
-              medium={this.props.medium}
-              small={this.props.small}
-              big={this.props.big}
-              options={[
-                {
-                  type: 'title',
-                  text: Languages.t('scenes.apps.calendar.left.calendars', [], 'Calendriers'),
-                  className: 'no-background',
-                },
-              ].concat(
-                this.props.calendarList.map(item => {
-                  return {
-                    text: (
-                      <div className="calendar_selector_part calendar_item">
-                        <div className="calendar_color" style={{ background: item.color }} />
-                        {item.title}
-                      </div>
-                    ),
-                    value: item.id,
-                  };
-                }),
-              )}
-              onChange={v => {
-                var list = this.props.value.map(item => item.calendar_id);
-                var existe = false;
-                // eslint-disable-next-line array-callback-return
-                list.map(id => {
-                  if (v === id) existe = true;
-                });
-
-                if (!existe) {
-                  list.push(v);
-                }
-
-                //Only one calendar for now
-                if (!this.props.allowMultiple) {
-                  list = [v];
-                }
-
-                this.change(list);
-              }}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.scss b/tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.scss
deleted file mode 100755
index 07712bd0..00000000
--- a/tdrive/frontend/src/app/components/calendar/calendar-selector/calendar-selector.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.calendar_selector_container {
-  display: inline-block;
-  vertical-align: middle;
-
-  .selected_calendars_list {
-    display: inline-block;
-  }
-
-  .list_calendar_to_select {
-    display: inline-block;
-    vertical-align: top;
-
-    .select {
-      display: inline-block;
-      vertical-align: top;
-    }
-  }
-
-  &.medium {
-    .calendar_item {
-      height: 40px;
-      padding: 4px 12px;
-    }
-  }
-}
-
-.calendar_selector_part {
-  .calendar_item {
-    height: 32px;
-    box-sizing: border-box;
-    line-height: 32px;
-    padding-left: 8px;
-    padding-right: 8px;
-    font-size: 14px;
-    display: inline-block;
-    background-color: var(--grey-background);
-    border-radius: var(--border-radius-base);
-    margin-right: 8px;
-    margin-bottom: 8px;
-    text-transform: capitalize;
-
-    &.removable {
-      cursor: pointer;
-
-      &:hover {
-        background: var(--primary-background);
-      }
-    }
-  }
-
-  .calendar_color {
-    width: 12px;
-    height: 12px;
-    border-radius: 6px;
-    display: inline-block;
-    margin: 10px 0;
-    vertical-align: top;
-    background: var(--green);
-    margin-right: 8px;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/date-picker.jsx b/tdrive/frontend/src/app/components/calendar/date-picker.jsx
deleted file mode 100755
index e8d279df..00000000
--- a/tdrive/frontend/src/app/components/calendar/date-picker.jsx
+++ /dev/null
@@ -1,423 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import Tooltip from 'components/tooltip/tooltip.jsx';
-import moment from 'moment';
-import DateTimeUtils from 'app/features/global/utils/datetime.js';
-import UserService from 'app/features/users/services/current-user-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import DayPicker from './day-picker/day-picker.jsx';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import Input from 'components/inputs/input.jsx';
-import Icon from 'app/components/icon/icon.jsx';
-import './date-picker.scss';
-
-export default class DatePicker extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-
-    this.display_format = 'D MMM YYYY';
-
-    this.old_props_ts = props.ts;
-    this.state = {
-      time_ts: props.ts,
-      time_string: moment(new Date(props.ts * 1000)).format(this.display_format),
-    };
-
-    this.user_language =
-      (UserService.getCurrentUser() || {}).language || Globals.window.navigator.language;
-
-    this.months_names = [
-      'jan',
-      'feb',
-      'mar',
-      'apr',
-      'may',
-      'jun',
-      'jul',
-      'aug',
-      'sep',
-      'oct',
-      'nov',
-      'dec',
-    ].map(m => m.toLocaleLowerCase());
-    this.months_long_names = [
-      'january',
-      'february',
-      'march',
-      'april',
-      'may',
-      'june',
-      'july',
-      'august',
-      'september',
-      'october',
-      'november',
-      'december',
-    ].map(m => m.toLocaleLowerCase());
-    this.months_names = this.months_names
-      .concat(
-        moment.localeData().monthsShort() || [
-          'jan',
-          'feb',
-          'mar',
-          'apr',
-          'may',
-          'jun',
-          'jul',
-          'aug',
-          'sep',
-          'oct',
-          'nov',
-          'dec',
-        ],
-      )
-      .map(m => m.toLocaleLowerCase());
-    this.months_long_names = this.months_long_names
-      .concat(moment.localeData().months())
-      .map(m => m.toLocaleLowerCase());
-    this.months_names = this.months_names
-      .concat(moment.localeData(this.user_language).monthsShort())
-      .map(m => m.toLocaleLowerCase());
-    this.months_long_names = this.months_long_names
-      .concat(moment.localeData(this.user_language).months())
-      .map(m => m.toLocaleLowerCase());
-    if (
-      Globals.window.navigator &&
-      Globals.window.navigator.language &&
-      Globals.window.navigator.language !== this.user_language
-    ) {
-      this.months_names = this.months_names.concat(
-        (moment.localeData(Globals.window.navigator.language).monthsShort() || []).map(m =>
-          m.toLocaleLowerCase(),
-        ),
-      );
-      this.months_long_names = this.months_long_names.concat(
-        (moment.localeData(Globals.window.navigator.language).months() || []).map(m =>
-          m.toLocaleLowerCase(),
-        ),
-      );
-    }
-
-    this.all_months = this.months_long_names.concat(this.months_names);
-
-    this.focused = false;
-  }
-
-  componentWillUnmount() {
-    if (this.helper_open) {
-      MenusManager.closeMenu();
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextStates) {
-    if (nextProps.ts !== this.old_props_ts) {
-      this.old_props_ts = nextProps.ts;
-      nextStates.time_ts = nextProps.ts;
-      if (!this.focused) {
-        nextStates.time_string = moment(new Date(nextProps.ts * 1000)).format(this.display_format);
-      }
-    }
-    return true;
-  }
-
-  process(string) {
-    var d, m, y;
-    var error = false;
-
-    if (string) {
-      var original_string = string;
-
-      //Try to find year
-      var year = string.match(/([0-9]{4,4})/);
-      if (year && year[1]) {
-        y = parseInt(year[1]);
-        string = string.replace(year[1], '');
-      }
-
-      //Try to find month as text
-      var sentences = string.match(/(^|[0-9])([^0-9]+)($|[0-9])/);
-      var in_text_month = false;
-      if (sentences && sentences[1] !== undefined) {
-        sentences.slice(1).forEach(s => {
-          // eslint-disable-next-line no-useless-escape
-          s = s.replace(/[0-9-'`~!@#$%^&*()_|+=?;:'",.<>\{\}\[\]\\\/]/gi, '');
-          s = s.trim();
-          s = s.toLocaleLowerCase();
-          if (s) {
-            var found = false;
-            this.all_months.forEach((m, i) => {
-              if (!found && m.indexOf(s) === 0) {
-                found = (i % 12) + 1;
-              }
-            });
-            if (found !== false) {
-              in_text_month = found;
-              string = string.replace(s, '');
-            }
-          }
-        });
-      }
-      if (in_text_month) {
-        m = in_text_month;
-      }
-
-      if (m && y) {
-        d = parseInt(string.replace(/[^0-9]/, ''));
-      } else {
-        //Get all numbers
-        var numbers = string.match(/[+-]?\d+(?:\.\d+)?/g);
-
-        if (numbers && numbers.length >= 1) {
-          if (y) {
-            //Only got year
-            if (numbers.length === 1) {
-              m = parseInt(numbers[0]);
-            } else {
-              //>=2
-              if (DateTimeUtils.isDateFirstInFormat()) {
-                d = parseInt(numbers[0]);
-                m = parseInt(numbers[1]);
-              } else {
-                d = parseInt(numbers[1]);
-                m = parseInt(numbers[0]);
-              }
-              if (m > 12) {
-                var tmp = d;
-                d = m;
-                m = tmp;
-              }
-            }
-          } else if (m) {
-            //Only got month
-            if (numbers.length === 1) {
-              d = parseInt(numbers[0]);
-            } else {
-              d = parseInt(numbers[0]);
-              y = parseInt(numbers[1]);
-              if (y < 100 && y >= 50) {
-                y += 1900;
-              } else if (y < 50) {
-                y += 2000;
-              }
-            }
-          } else {
-            //Got nothing
-
-            if (numbers.length === 1) {
-              y = parseInt(numbers[0]);
-              d = 1;
-              m = 1;
-
-              if (y < 100 && y >= 50) {
-                y += 1900;
-              } else if (y < 50) {
-                y += 2000;
-              }
-            } else if (numbers.length === 2) {
-              if (Math.max(parseInt(numbers[0]), parseInt(numbers[1])) > 12) {
-                y = Math.max(d, m);
-                m = Math.min(d, m);
-              } else {
-                d = parseInt(numbers[0]);
-                m = parseInt(numbers[1]);
-              }
-
-              if (m > 12) {
-                // eslint-disable-next-line no-redeclare
-                var tmp = m;
-                m = d;
-                d = tmp;
-              }
-            } else if (numbers.length >= 3) {
-              if (DateTimeUtils.isDateFirstInFormat()) {
-                d = parseInt(numbers[0]);
-                m = parseInt(numbers[1]);
-                y = parseInt(numbers[2]);
-              } else {
-                d = parseInt(numbers[1]);
-                m = parseInt(numbers[0]);
-                y = parseInt(numbers[2]);
-              }
-            }
-
-            if (y < 100 && y >= 50) {
-              y += 1900;
-            } else if (y < 50) {
-              y += 2000;
-            }
-          }
-        }
-      }
-
-      //Last check date is correct
-      if (!y || !m || !d || isNaN(y) || isNaN(m) || isNaN(d)) {
-        if ((y && !isNaN(y)) || (m && !isNaN(m)) || (d && !isNaN(d))) {
-          //If partial input, do not show error
-          if (y && !isNaN(y)) {
-            m = m || 1;
-            d = d || 1;
-          } else if (m && !isNaN(m)) {
-            y = new Date().getFullYear() + (m <= new Date().getMonth() + 1 ? 1 : 0);
-            d = d || 1;
-          } else if (d && !isNaN(d)) {
-            m = 1;
-            y = y || new Date().getFullYear() + (m <= new Date().getMonth() + 1 ? 1 : 0);
-          }
-        } else {
-          error = true;
-        }
-      }
-
-      if (y < 1950) {
-        error = true;
-      }
-      if (m < 1 || m > 12) {
-        error = true;
-      }
-      // eslint-disable-next-line no-redeclare
-      var tmp = new Date();
-      tmp.setMonth(m - 1);
-      tmp.setFullYear(y);
-      tmp.setDate(d);
-      if (d < 1 || d > 31 || tmp.getDate() !== d) {
-        error = true;
-      }
-    } else {
-      error = true;
-    }
-
-    this.setState({ time_string: original_string });
-
-    if (!error) {
-      // eslint-disable-next-line no-redeclare
-      var d = moment(d + '-' + m + '-' + y, 'DD-MM-YYYY').toDate();
-      this.changeDate(d);
-    } else {
-      this.setState({ error: true });
-      this.setState({});
-    }
-  }
-
-  changeDate(d, changeInput) {
-    var date = new Date(this.state.time_ts * 1000);
-    date.setDate(d.getDate());
-    date.setMonth(d.getMonth());
-    date.setFullYear(d.getFullYear());
-    this.setState({ time_ts: date.getTime() / 1000 });
-    this.setState({ error: false });
-
-    this.setState({
-      time_string_formatted: moment(this.state.time_ts * 1000).format(this.display_format),
-    });
-
-    if (changeInput) {
-      this.setState({ time_string: this.state.time_string_formatted });
-    }
-
-    this.props.onChange && this.props.onChange(this.state.time_ts);
-    this.setState({});
-    this.input.focus();
-  }
-
-  focus() {
-    this.closeMenuTimeout && clearTimeout(this.closeMenuTimeout);
-
-    this.focused = true;
-
-    if (!this.state.time_ts) {
-      this.setState({ time_ts: new Date().getTime() / 1000 });
-    }
-
-    if (!this.helper_open) {
-      this.helper_open = true;
-      var pos = window.getBoundingClientRect(this.input);
-      pos.x = pos.x || pos.left;
-      pos.y = pos.y || pos.top;
-      MenusManager.openMenu(
-        [
-          {
-            type: 'react-element',
-            reactElement: () => (
-              <div
-                style={{ padding: '20px 24px', margin: -16 }}
-                onMouseDown={() => {
-                  this.cancelBlur = true;
-                }}
-              >
-                <DayPicker
-                  value={moment(this.state.time_ts * 1000)}
-                  onChange={value => {
-                    var ts = value._d.getTime();
-                    MenusManager.closeMenu();
-                    setTimeout(() => {
-                      this.changeDate(new Date(ts), true);
-                      this.cancelBlur = false;
-                      this.input.blur();
-                    }, 100);
-                  }}
-                  onClick={() => this.input.focus()}
-                />
-              </div>
-            ),
-          },
-        ],
-        { x: pos.left + pos.width / 2, y: pos.bottom },
-        'bottom',
-        { allowClickOut: false },
-      );
-    }
-  }
-
-  blur() {
-    if (this.cancelBlur) {
-      this.cancelBlur = false;
-      return;
-    }
-    this.focused = false;
-    this.setState({ time_string: this.state.time_string_formatted, error: false });
-    this.closeMenuTimeout && clearTimeout(this.closeMenuTimeout);
-    this.closeMenuTimeout = setTimeout(() => {
-      MenusManager.closeMenu();
-      this.helper_open = false;
-    }, 50);
-
-    this.props.onChangeBlur && this.props.onChangeBlur(this.state.time_ts);
-    this.props.onChange && this.props.onChange(this.state.time_ts);
-  }
-
-  render() {
-    return (
-      <div className={'date_selector ' + this.props.className} style={{ display: 'inline-block' }}>
-        <Tooltip position="top" tooltip="Invalide" overable={false} visible={this.state.error}>
-          <Input
-            onEchap={() => this.input.blur()}
-            onEnter={() => this.input.blur()}
-            onBlur={() => this.blur()}
-            onFocus={() => this.focus()}
-            placeholder={'No date'}
-            value={this.state.time_ts ? this.state.time_string : ''}
-            style={{ maxWidth: 108 }}
-            onChange={evt => this.process(evt.target.value)}
-            refInput={node => (this.input = node)}
-            big={this.props.big}
-            medium={this.props.medium}
-            small={this.props.small}
-          />
-          {this.props.withReset && (
-            <div
-              className="reset_date"
-              onClick={() => {
-                this.setState({ time_ts: false });
-                this.props.onChangeBlur(this.state.time_ts);
-                this.setState({});
-              }}
-            >
-              <Icon type="trash" />
-            </div>
-          )}
-        </Tooltip>
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/date-picker.scss b/tdrive/frontend/src/app/components/calendar/date-picker.scss
deleted file mode 100755
index ee6dd11b..00000000
--- a/tdrive/frontend/src/app/components/calendar/date-picker.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.date_selector {
-  .reset_date {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    right: 8px;
-    top: 12px;
-    background: #eee;
-    border-radius: var(--border-radius-large);
-    font-size: 12px;
-    color: #444;
-    cursor: pointer;
-
-    &:hover {
-      background: #ddd;
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/day-picker/day-picker.jsx b/tdrive/frontend/src/app/components/calendar/day-picker/day-picker.jsx
deleted file mode 100755
index 99bff9f9..00000000
--- a/tdrive/frontend/src/app/components/calendar/day-picker/day-picker.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-import Icon from 'app/components/icon/icon.jsx';
-import moment from 'moment';
-import './day-picker.scss';
-
-export default class DayPicker extends Component {
-  /*
-        this.props :{
-            onChange(day)
-            value : Array of selected days
-        }
-    */
-  constructor(props) {
-    super(props);
-    this.state = {
-      days: [],
-      currentDate: moment(),
-    };
-    this.openSelected = false;
-    window.moment = moment;
-  }
-  componentDidMount() {
-    this.setState(this.updateDay());
-  }
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
-    if (moment(nextProps.value).valueOf() != this.oldProp) {
-      var obj = this.updateDay(nextProps.value);
-      nextState.days = obj.days;
-      nextState.currentDate = obj.currentDate;
-    }
-    this.oldProp = moment(nextProps.value).valueOf();
-  }
-  updateDay(date) {
-    var searchedDate = date || moment();
-    var days = [];
-    var first_day_of_month = moment(searchedDate).startOf('month').startOf('week');
-    for (var i = 0; i < 35; i++) {
-      days.push(moment(moment(first_day_of_month).add(i, 'days')));
-    }
-    return {
-      days: days,
-      currentDate: searchedDate,
-    };
-  }
-  isSelected(day) {
-    if (this.props.value) {
-      if (
-        Array.isArray(this.props.value) &&
-        this.props.value.length == 2 &&
-        this.props.value[0] &&
-        this.props.value[1]
-      ) {
-        return day.isBetween(this.props.value[0], this.props.value[1], 'day', '[]');
-      } else if (
-        Array.isArray(this.props.value) &&
-        this.props.value.length >= 1 &&
-        this.props.value[0]
-      ) {
-        return day.isSame(this.props.value[0], 'day');
-      } else if (!Array.isArray(this.props.value) && this.props.value) {
-        return day.isSame(this.props.value, 'day');
-      }
-    }
-    return false;
-  }
-  isLast(day) {
-    if (this.props.value) {
-      if (
-        Array.isArray(this.props.value) &&
-        this.props.value.length == 2 &&
-        this.props.value[0] &&
-        this.props.value[1]
-      ) {
-        return day.isSame(this.props.value[1], 'day');
-      } else if (
-        Array.isArray(this.props.value) &&
-        this.props.value.length >= 1 &&
-        this.props.value[0]
-      ) {
-        return day.isSame(this.props.value[0], 'day');
-      } else if (!Array.isArray(this.props.value) && this.props.value) {
-        return day.isSame(this.props.value, 'day');
-      }
-    }
-    return false;
-  }
-  render() {
-    var last_week = -1;
-    return (
-      <div
-        className="dayPicker"
-        onClick={() => this.props.onClick && this.props.onClick()}
-        onMouseDown={this.props.onMouseDown}
-      >
-        <div className="titleDayPicker">
-          <div className="month">{moment(this.state.currentDate).format('MMMM YYYY')}</div>
-          <div className="chevron">
-            <div
-              className="move_icon"
-              onClick={() => {
-                this.setState(this.updateDay(moment(this.state.currentDate).subtract(1, 'months')));
-              }}
-            >
-              <Icon type="angle-left" />
-            </div>
-            <div
-              className="move_icon"
-              onClick={() => {
-                this.setState(this.updateDay(moment(this.state.currentDate).add(1, 'months')));
-              }}
-            >
-              <Icon type="angle-right" />
-            </div>
-          </div>
-        </div>
-        <div className="days">
-          <div className="dayName" key={'wn'}>
-            Wk
-          </div>
-          {this.state.days.map((day, index) => {
-            if (index < 7) {
-              return (
-                <div className="dayName" key={day.format()}>
-                  {day.format('ddd')}
-                </div>
-              );
-            }
-          })}
-          {this.state.days.map(day => {
-            var list = [];
-            if (day.week() != last_week) {
-              last_week = day.week();
-              list.push(<div className="weeknumber">{last_week}</div>);
-            }
-            list.push(
-              <div
-                key={day.format()}
-                onClick={() => {
-                  if (this.props.onChange) {
-                    this.props.onChange(day);
-                  }
-                }}
-                className={
-                  'day ' +
-                  (day.month() == this.state.currentDate.month() ? '' : 'notInMonth') +
-                  ' ' +
-                  (day.format('YYYY MM DD') == moment().format('YYYY MM DD') ? 'today' : '') +
-                  ' ' +
-                  (this.isSelected(day) ? 'selected' : '') +
-                  ' ' +
-                  (this.isLast(day) ? 'last' : '')
-                }
-              >
-                {day.date()}
-              </div>,
-            );
-            return list;
-          })}
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/day-picker/day-picker.scss b/tdrive/frontend/src/app/components/calendar/day-picker/day-picker.scss
deleted file mode 100755
index 8fa3a3cd..00000000
--- a/tdrive/frontend/src/app/components/calendar/day-picker/day-picker.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.dayPicker {
-  width: 200px;
-  font-size: 14px;
-  font-weight: 500;
-
-  .titleDayPicker {
-    display: flex;
-    margin-top: -8px;
-    margin-bottom: -4px;
-    .month {
-      display: inline-block;
-      text-transform: capitalize;
-      line-height: 30px;
-    }
-    .chevron {
-      flex: 1;
-      text-align: right;
-      display: inline-block;
-      .move_icon {
-        display: inline-block;
-        font-size: 14px;
-        opacity: 1;
-        padding: 5px;
-        border-radius: var(--border-radius-base);
-      }
-      .move_icon:hover {
-        cursor: pointer;
-        background: rgba(55, 53, 47, 0.08);
-      }
-    }
-  }
-  .days {
-    .weeknumber {
-      background: #dfdfdf;
-      height: 26px;
-      line-height: 26px;
-      vertical-align: top;
-      display: inline-block;
-      font-size: 12px;
-      color: #000;
-      opacity: 0.3;
-      padding: 0 1px;
-      box-sizing: border-box;
-      width: 12.5%;
-      text-align: center;
-    }
-    .dayName {
-      display: inline-block;
-      width: 12.5%;
-      text-align: center;
-      height: 28px;
-      line-height: 28px;
-      font-size: 11px;
-      border-radius: var(--border-radius-base);
-      opacity: 0.6;
-    }
-    .dayName:first-child {
-      opacity: 0.3;
-    }
-    .day {
-      display: inline-block;
-      width: 12.5%;
-      text-align: center;
-      height: 24px;
-      line-height: 24px;
-      margin-bottom: 2px;
-      border-radius: var(--border-radius-base);
-    }
-    .day:not(.selected):hover {
-      background: rgba(45, 156, 219, 0.2);
-    }
-    .day:hover {
-      cursor: pointer;
-    }
-    .notInMonth {
-      opacity: 0.5;
-    }
-    .selected + .selected:not(.last) {
-      border-radius: 0px;
-    }
-    .selected {
-      background: #827dff;
-      border-radius: var(--border-radius-base) 0px 0px var(--border-radius-base);
-      color: white;
-    }
-    .selected + .last {
-      border-radius: 0px 4px 4px 0px;
-    }
-    :not(.selected) + .last {
-      border-radius: var(--border-radius-base);
-    }
-    .today:not(.selected) {
-      color: rgb(235, 87, 87);
-      border-radius: var(--border-radius-base);
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/event/event.jsx b/tdrive/frontend/src/app/components/calendar/event/event.jsx
deleted file mode 100755
index 2ede0d6a..00000000
--- a/tdrive/frontend/src/app/components/calendar/event/event.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-import './event.scss';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Icon from 'app/components/icon/icon.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import UserListManager from 'components/user-list-manager-depreciated/user-list-manager';
-
-import moment from 'moment';
-
-export default class Event extends Component {
-  constructor(props) {
-    super();
-    this.props = props;
-  }
-  render() {
-    var className = '';
-    var icon = '';
-    var event_duration = '';
-    var classNameUser = '';
-    if (this.props.inEvent) {
-      classNameUser = 'inEvent';
-    }
-
-    var event_name =
-      this.props.event.title || Languages.t('scenes.apps.drive.navigators.new_file.untitled');
-
-    var event_start = moment(parseInt(this.props.event.from) * 1000).format('LT');
-
-    var event_end = moment(parseInt(this.props.event.to) * 1000).format('LT');
-
-    var location = this.props.event.location || '';
-
-    if (event_start) event_duration = event_start;
-    if (event_end)
-      event_duration =
-        event_duration + Languages.t('components.calendar.event.to', [], ' à ') + event_end;
-
-    var duration = (parseInt(this.props.event.to) - parseInt(this.props.event.from)) / 60;
-
-    if (
-      (duration > 0 && duration <= 15) ||
-      this.props.event.type == 'deadline' ||
-      this.props.event.type == 'remind'
-    ) {
-      className += ' size_15 ';
-    } else if ((duration > 15 && duration <= 30) || this.props.event.all_day) {
-      className += ' size_30';
-      if (location) event_duration += ', ' + location;
-    } else if (duration > 30 && duration <= 45) {
-      className += ' size_45';
-    } else if (duration > 45 && duration <= 60) {
-      className += ' size_60';
-    }
-
-    className += ' ' + this.props.event.type;
-
-    if (this.props.event.type == 'remind') {
-      icon = 'stopwatch';
-    } else if (this.props.event.type == 'deadline') {
-      icon = 'stopwatch-slash';
-    } else if (this.props.event.type == 'move') {
-      icon = 'car-sideview';
-    }
-
-    var users = [];
-    var emails = [];
-
-    (this.props.event.participants || []).map(obj => {
-      if (obj) {
-        var regex = /^[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;
-        if (obj.user_id_or_mail.match(regex)) {
-          var user = Collections.get('users').find(obj.user_id_or_mail);
-          users.push(user);
-        } else {
-          var email = obj.user_id_or_mail;
-          emails.push(email);
-        }
-      }
-    });
-
-    return (
-      <div
-        className={'event_container ' + className + ' ' + classNameUser}
-        style={{ background: '' + this.props.getColor() }}
-      >
-        <div className={'block ' + className}>
-          {icon && <Icon type={'' + icon} className="icon" />}
-
-          <span className={'text title ' + className}>
-            {event_name}
-            <span style={{ fontWeight: 'normal' }}>
-              {(duration <= 30 || this.props.event.all_day) && ', ' + event_start}
-            </span>
-          </span>
-        </div>
-
-        {duration > 30 && !this.props.event.all_day && (
-          <div className={'time ' + className}>
-            <span className="text simple">{event_duration}</span>
-          </div>
-        )}
-
-        <div className={'place ' + className}>
-          <span className="text simple">{'' + location}</span>
-        </div>
-
-        <div className={'users ' + className}>
-          <UserListManager
-            noPlaceholder
-            users={(this.props.event.participants || []).map(u => {
-              return { id: u.user_id_or_mail };
-            })}
-            max={4}
-            readOnly
-            collapsed
-            medium
-          />
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/event/event.scss b/tdrive/frontend/src/app/components/calendar/event/event.scss
deleted file mode 100755
index c959d537..00000000
--- a/tdrive/frontend/src/app/components/calendar/event/event.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-.event_container {
-  margin: 0px;
-  width: auto;
-  height: auto;
-  border-radius: var(--border-radius-base);
-  color: var(--white);
-  box-sizing: border-box;
-  padding-left: 4px;
-  padding-right: 2px;
-  padding-top: 2px;
-  position: relative;
-  transition: box-shadow 0.2s;
-  cursor: pointer;
-
-  & > div {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &:hover {
-    box-shadow: 0 0px 1000px 0px rgba(0, 0, 0, 0.1) inset;
-  }
-
-  .icon {
-    display: inline-block;
-    font-size: 14px;
-    font-weight: 700;
-    margin-left: -2px;
-  }
-
-  .text {
-    &.title {
-      font-size: 12px;
-      font-weight: 700;
-    }
-
-    &.simple {
-      font-size: 11px;
-      font-weight: 500;
-    }
-  }
-
-  .time,
-  .place,
-  .description,
-  .users {
-    display: flex;
-    flex-direction: row;
-    text-overflow: ellipsis;
-  }
-
-  .users {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    display: flex;
-    align-items: center;
-    height: 28px;
-
-    .emoji-container {
-      width: 24px;
-      text-align: center;
-    }
-
-    .more {
-      font-size: 12px;
-      margin: 0 2px;
-      font-weight: 700;
-      opacity: 0.8;
-    }
-  }
-
-  .time.size_15,
-  .place.size_15,
-  .place.size_30,
-  .users.size_15,
-  .users.size_30,
-  .users.size_45 {
-    .user_head {
-      width: 12px !important;
-      height: 12px !important;
-    }
-  }
-
-  .place.size_45 {
-    margin-top: 8px;
-  }
-
-  .users > div {
-    border-radius: var(--border-radius-base);
-    margin-left: 2px;
-  }
-
-  //event
-  min-height: 60px;
-
-  &.size_15 {
-    min-height: 16px;
-    height: 16px;
-    font-size: 11px;
-  }
-
-  &.size_30 {
-    min-height: 24px;
-    height: 24px;
-  }
-
-  &.size_45 {
-    min-height: 32px;
-    height: 32px;
-  }
-
-  &.size_60 {
-    min-height: 48px;
-  }
-
-  .inEvent {
-    border-style: solid;
-    border: 0px;
-  }
-
-  //rappel
-  &.remind {
-    border-radius: var(--border-radius-large);
-    min-height: 18px;
-  }
-
-  //deadline
-
-  &.deadline {
-    border-top-left-radius: 1px;
-    border-top-right-radius: 1px;
-    box-shadow: 0 2px 0px 0px rgba(255, 0, 0, 0.5) inset;
-    min-height: 18px;
-  }
-
-  //deplacement
-
-  &.move {
-    border-radius: var(--border-radius-large);
-    border-top-left-radius: 4px;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/calendar/time-selector.jsx b/tdrive/frontend/src/app/components/calendar/time-selector.jsx
deleted file mode 100755
index 5b8d12f9..00000000
--- a/tdrive/frontend/src/app/components/calendar/time-selector.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/no-direct-mutation-state */
-import React, { Component } from 'react';
-import Input from 'components/inputs/input.jsx';
-import Tooltip from 'components/tooltip/tooltip.jsx';
-import moment from 'moment';
-import DateTimeUtils from 'app/features/global/utils/datetime.js';
-import Languages from 'app/features/global/services/languages-service';
-
-export default class TimeSelector extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      time_ts: props.ts,
-      time_string: moment(new Date(props.ts * 1000)).format(DateTimeUtils.getDefaultTimeFormat()),
-    };
-    this.old_ts = props.ts;
-    this.focus = false;
-  }
-
-  shouldComponentUpdate(nextProps, nextStates) {
-    if (nextProps.ts != this.old_ts) {
-      this.old_ts = nextProps.ts;
-      nextStates.time_ts = nextProps.ts;
-      if (!this.focus) {
-        nextStates.time_string = moment(new Date(nextProps.ts * 1000)).format(
-          DateTimeUtils.getDefaultTimeFormat(),
-        );
-      }
-    }
-    return true;
-  }
-
-  process(string) {
-    var h, m, am_pm;
-    var error = false;
-
-    if (string) {
-      var match = string.match(/^[^0-9]*([0-9]+)([^0-9]+)?([0-9]*)?(.*?)$/);
-
-      if (match) {
-        h = parseInt(match[1]);
-        m = parseInt(match[3] || '0');
-        am_pm = ((match[4] ? match[4] : match[2]) || '').toLocaleLowerCase();
-        if (am_pm && (am_pm[0] == 'p' || am_pm.indexOf('pm') >= 0)) {
-          am_pm = 'PM';
-        } else if (am_pm && (am_pm[0] == 'a' || am_pm.indexOf('am') >= 0)) {
-          am_pm = 'AM';
-        } else {
-          if (h == 12) {
-            am_pm = 'PM';
-          } else {
-            am_pm = 'AM';
-          }
-        }
-      } else {
-        error = true;
-      }
-
-      if (h > 12) {
-        am_pm = '';
-      }
-
-      if (h > 23) {
-        error = true;
-      }
-
-      if (m > 59) {
-        error = true;
-      }
-    } else {
-      error = true;
-    }
-
-    this.state.time_string = string;
-
-    if (!error) {
-      var d = moment(h + ':' + m + am_pm, 'LT').toDate();
-      var date = new Date(this.state.time_ts * 1000);
-      date.setHours(d.getHours());
-      date.setMinutes(d.getMinutes());
-      this.state.time_ts = date.getTime() / 1000;
-      this.state.error = false;
-      this.state.time_string_formatted = moment(this.state.time_ts * 1000).format(
-        DateTimeUtils.getDefaultTimeFormat(),
-      );
-      this.props.onChange && this.props.onChange(this.state.time_ts);
-    } else {
-      this.state.error = true;
-    }
-    this.setState({});
-  }
-
-  blur() {
-    this.focus = false;
-    this.setState({ time_string: this.state.time_string_formatted, error: false });
-    this.props.onChangeBlur && this.props.onChangeBlur(this.state.time_ts);
-    this.props.onChange && this.props.onChange(this.state.time_ts);
-  }
-
-  render() {
-    return (
-      <div className={'time_selector ' + this.props.className} style={{ display: 'inline-block' }}>
-        <Tooltip
-          position="top"
-          tooltip={Languages.t('components.workspace.calendar.invalid', [], 'Invalide')}
-          overable={false}
-          visible={this.state.error}
-        >
-          <Input
-            onBlur={() => this.blur()}
-            onFocus={() => (this.focus = true)}
-            value={this.state.time_string}
-            style={{ maxWidth: 94 }}
-            onChange={evt => this.process(evt.target.value)}
-          />
-        </Tooltip>
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/channel-attachement-list/channel-attachement-list.tsx b/tdrive/frontend/src/app/components/channel-attachement-list/channel-attachement-list.tsx
deleted file mode 100644
index 0a62132e..00000000
--- a/tdrive/frontend/src/app/components/channel-attachement-list/channel-attachement-list.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Modal, ModalContent } from 'app/atoms/modal';
-import {
-  channelAttachmentListState,
-  activeChannelAttachementListTabState,
-} from 'app/features/channels/state/channel-attachment-list';
-import Languages from 'app/features/global/services/languages-service';
-import Tab from 'app/molecules/tabs';
-import React from 'react';
-import { useRecoilState } from 'recoil';
-import ChannelFiles from './parts/channel-files';
-import ChannelMedias from './parts/channel-medias';
-
-enum Tabs {
-  Medias = 0,
-  Files = 1,
-}
-
-export default (): React.ReactElement => {
-  const [open, setOpen] = useRecoilState(channelAttachmentListState);
-  const [activeTab, setActiveTab] = useRecoilState(activeChannelAttachementListTabState);
-
-  return (
-    <Modal open={open} onClose={() => setOpen(false)} className="sm:w-[60vw] sm:max-w-2xl">
-      <ModalContent textCenter title={Languages.t('components.channel_attachement_list.title')}>
-        <Tab
-          tabs={[
-            <div key="media">
-              <div className="flex">
-                {Languages.t('components.channel_attachement_list.medias')}
-              </div>
-            </div>,
-            <div key="files">
-              <div className="flex">{Languages.t('components.channel_attachement_list.files')}</div>
-            </div>,
-          ]}
-          selected={activeTab}
-          onClick={index => setActiveTab(index)}
-        />
-        {activeTab === Tabs.Medias && <ChannelMedias />}
-        {activeTab === Tabs.Files && <ChannelFiles />}
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-attachment.tsx b/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-attachment.tsx
deleted file mode 100644
index 0da3ac28..00000000
--- a/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-attachment.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { Button } from 'app/atoms/button/button';
-import { DownloadIcon } from 'app/atoms/icons-agnostic';
-import {
-  FileTypeArchiveIcon,
-  FileTypeDocumentIcon,
-  FileTypePdfIcon,
-  FileTypeSlidesIcon,
-  FileTypeSpreadsheetIcon,
-  FileTypeUnknownIcon,
-} from 'app/atoms/icons-colored';
-import { Base, Info } from 'app/atoms/text';
-import { channelAttachmentListState } from 'app/features/channels/state/channel-attachment-list';
-import fileUploadApiClient from 'app/features/files/api/file-upload-api-client';
-import fileUploadService from 'app/features/files/services/file-upload-service';
-import { formatDate } from 'app/features/global/utils/format-date';
-import { formatSize } from 'app/features/global/utils/format-file-size';
-import { Message, MessageFileType } from 'app/features/messages/types/message';
-import routerService from 'app/features/router/services/router-service';
-import { UserType } from 'app/features/users/types/user';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-import Media from 'app/molecules/media';
-import React from 'react';
-import { ArrowRight } from 'react-feather';
-import { useRecoilState } from 'recoil';
-
-type FileMessageType = {
-  message?: Message;
-};
-
-type FileUserType = {
-  user?: UserType;
-};
-
-type PropsType = {
-  file: MessageFileType & FileMessageType & FileUserType;
-  is_media: boolean;
-};
-
-type FilePreviewType = {
-  file: MessageFileType & FileMessageType & FileUserType;
-};
-
-export default ({ file, is_media }: PropsType): React.ReactElement => {
-  return is_media ? <ChannelMedia file={file} /> : <ChannelFile file={file} />;
-};
-
-const ChannelFile = ({ file }: FilePreviewType): React.ReactElement => {
-  const [, setOpen] = useRecoilState(channelAttachmentListState);
-  const name = file?.metadata?.name;
-  const extension = name?.split('.').pop();
-  const previewUrl = fileUploadApiClient.getFileThumbnailUrlFromMessageFile(file);
-  const fileType = fileUploadApiClient.mimeToType(file?.metadata?.mime || '');
-  const { open: openViewer } = useFileViewerModal();
-
-  const iconClassName = previewUrl
-    ? 'absolute left-0 top-0 bottom-0 right-0 m-auto w-8 h-8'
-    : 'absolute bottom-1 left-1 w-6 h-6';
-
-  return (
-    <div
-      className="flex items-center p-2 hover:bg-zinc-50 rounded-md cursor-pointer"
-      onClick={() => openViewer(file)}
-    >
-      <div className="relative flex bg-zinc-200 rounded-md w-16 h-16 mr-3">
-        <Media size="md" url={previewUrl} duration={fileType === 'video' ? extension : undefined} />
-        {(!['image', 'video'].includes(fileType) || !previewUrl) && (
-          <>
-            {fileType === 'archive' ? (
-              <FileTypeArchiveIcon className={iconClassName} />
-            ) : fileType === 'pdf' ? (
-              <FileTypePdfIcon className={iconClassName} />
-            ) : fileType === 'document' ? (
-              <FileTypeDocumentIcon className={iconClassName} />
-            ) : fileType === 'slides' ? (
-              <FileTypeSlidesIcon className={iconClassName} />
-            ) : fileType === 'spreadsheet' ? (
-              <FileTypeSpreadsheetIcon className={iconClassName} />
-            ) : (
-              <FileTypeUnknownIcon className={iconClassName} />
-            )}
-          </>
-        )}
-      </div>
-      <div className="grow mr-3 overflow-hidden">
-        <Base className="block whitespace-nowrap overflow-hidden text-ellipsis">{name}</Base>
-        <Info className="block whitespace-nowrap overflow-hidden text-ellipsis">
-          {extension?.toLocaleUpperCase()} • {formatDate(file?.message?.created_at)} •{' '}
-          {formatSize(file?.metadata?.size)}
-        </Info>
-      </div>
-      <div
-        className="whitespace-nowrap"
-        onClick={e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <Button
-          theme="outline"
-          className="w-9 px-1.5 ml-2 rounded-full border-none"
-          onClick={() => downloadFile(file)}
-        >
-          <DownloadIcon className="w-6 h-6" />
-        </Button>
-
-        {!!file.message && (
-          <Button
-            theme="outline"
-            className="w-9 px-1.5 ml-2 rounded-full border-none"
-            onClick={() => {
-              setOpen(false);
-              gotoMessage(file.message as Message);
-            }}
-          >
-            <ArrowRight className="w-6 h-6" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const ChannelMedia = ({ file }: FilePreviewType): React.ReactElement => {
-  const previewUrl = fileUploadApiClient.getFileThumbnailUrlFromMessageFile(file);
-  const type = fileUploadApiClient.mimeToType(file?.metadata?.mime || '');
-  const { open: openViewer } = useFileViewerModal();
-
-  return (
-    <div
-      className="cursor-pointer hover:opacity-75 inline-block m-2"
-      onClick={() => openViewer(file)}
-    >
-      <Media
-        key={file.id}
-        size="lg"
-        url={previewUrl}
-        duration={
-          type === 'video'
-            ? file?.metadata?.name?.split('.').slice(-1)?.[0]?.toLocaleUpperCase()
-            : undefined
-        }
-      />
-    </div>
-  );
-};
-
-const getFileDownloadRoute = (file: MessageFileType): string => {
-  if (file?.metadata?.source !== 'internal') {
-    return '';
-  }
-
-  return fileUploadService.getDownloadRoute({
-    companyId: file.metadata?.external_id?.company_id,
-    fileId: file.metadata?.external_id?.id,
-  });
-};
-
-const downloadFile = (file: MessageFileType): void => {
-  const url = getFileDownloadRoute(file);
-
-  if (url) {
-    window.location.href = url;
-  }
-};
-
-const gotoMessage = (message: Message): void => {
-  routerService.push(
-    routerService.generateRouteFromState({
-      companyId: message?.cache?.company_id,
-      channelId: message?.cache?.channel_id,
-      threadId: message?.thread_id,
-      workspaceId: message?.cache?.workspace_id,
-      ...(message.id !== message?.thread_id ? { messageId: message.id } : {}),
-    }),
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-files.tsx b/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-files.tsx
deleted file mode 100644
index ba273508..00000000
--- a/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-files.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useChannelFileList } from 'app/features/channels/hooks/use-channel-media-files';
-import React, { useEffect } from 'react';
-import ChannelAttachment from './channel-attachment';
-import { LoadingAttachements, NoAttachements } from './commun';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-
-type PropsType = {
-  maxItems?: number;
-};
-
-export default ({ maxItems }: PropsType): React.ReactElement => {
-  const { loading, result, loadMore, loadItems } = useChannelFileList();
-
-  useEffect(() => {
-    loadItems();
-  }, []);
-
-  return (
-    <PerfectScrollbar
-      className="-mb-4 py-3 overflow-hidden -mx-2 px-2"
-      style={{ maxHeight: 'calc(80vh - 100px)', minHeight: 'calc(80vh - 100px)' }}
-      options={{ suppressScrollX: true, suppressScrollY: false }}
-      component="div"
-      onYReachEnd={() => loadMore()}
-    >
-      {result.length === 0 && !loading && <NoAttachements />}
-      {loading ? (
-        <LoadingAttachements />
-      ) : (
-        result
-          .slice(0, maxItems || result.length)
-          .map(file => <ChannelAttachment key={file.id} file={file} is_media={false} />)
-      )}
-    </PerfectScrollbar>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-medias.tsx b/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-medias.tsx
deleted file mode 100644
index 8404d77c..00000000
--- a/tdrive/frontend/src/app/components/channel-attachement-list/parts/channel-medias.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useChannelMediaList } from 'app/features/channels/hooks/use-channel-media-files';
-import fileUploadApiClient from 'app/features/files/api/file-upload-api-client';
-import React, { useEffect } from 'react';
-import ChannelAttachment from './channel-attachment';
-import { LoadingAttachements, NoAttachements } from './commun';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-
-type PropsType = {
-  maxItems?: number;
-};
-
-export default ({ maxItems }: PropsType): React.ReactElement => {
-  const { loading, result, loadMore, loadItems } = useChannelMediaList();
-
-  useEffect(() => {
-    loadItems();
-  }, []);
-
-  return (
-    <>
-      <PerfectScrollbar
-        className="-mb-4 py-3 overflow-hidden -mx-2 px-2"
-        style={{ maxHeight: 'calc(80vh - 100px)', minHeight: 'calc(80vh - 100px)' }}
-        options={{ suppressScrollX: true, suppressScrollY: false }}
-        component="div"
-        onYReachEnd={() => loadMore()}
-      >
-        {result.length === 0 && !loading && <NoAttachements />}
-        {loading ? (
-          <LoadingAttachements />
-        ) : (
-          result
-            .slice(0, maxItems || result.length)
-            .map(file => {
-              const url = fileUploadApiClient.getFileThumbnailUrlFromMessageFile(file);
-
-              return url && <ChannelAttachment key={file.id} file={file} is_media={true} />;
-            })
-            .filter(Boolean)
-        )}
-      </PerfectScrollbar>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-attachement-list/parts/commun.tsx b/tdrive/frontend/src/app/components/channel-attachement-list/parts/commun.tsx
deleted file mode 100644
index 24ba5228..00000000
--- a/tdrive/frontend/src/app/components/channel-attachement-list/parts/commun.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Loader } from 'app/atoms/loader';
-import { Info } from 'app/atoms/text';
-import Languages from 'app/features/global/services/languages-service';
-import React from 'react';
-
-export const LoadingAttachements = (): React.ReactElement => {
-  return (
-    <div className="flex h-full justify-center items-center px-2">
-      <Loader className="h-8 w-8 m-auto" />
-    </div>
-  );
-};
-
-export const NoAttachements = (): React.ReactElement => {
-  return (
-    <div className="flex items-center justify-center flex-col h-64 px-2">
-      <Info className="p-2">
-        {Languages.t('components.channel_attachement_list.nothing_found')}
-      </Info>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-members-list/channel-members-modal.tsx b/tdrive/frontend/src/app/components/channel-members-list/channel-members-modal.tsx
deleted file mode 100644
index 1a524bb9..00000000
--- a/tdrive/frontend/src/app/components/channel-members-list/channel-members-modal.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import { InformationCircleIcon } from '@heroicons/react/outline';
-import { SearchIcon } from '@heroicons/react/solid';
-import { Alert } from 'app/atoms/alert';
-import { InputDecorationIcon } from 'app/atoms/input/input-decoration-icon';
-import { Input } from 'app/atoms/input/input-text';
-import Text, { Info } from 'app/atoms/text';
-import { useSearchChannelMembersAll } from 'app/features/channel-members-search/hooks/use-search-all';
-import Languages from 'app/features/global/services/languages-service';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import Strings from 'app/features/global/utils/strings';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import { invitationState } from 'app/features/invitation/state/invitation';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import { useEffect, useState } from 'react';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import { useRecoilState } from 'recoil';
-import { EmailItem } from './email-item';
-import { MemberItem } from './member-item';
-import { UserItem } from './user-item';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import { useCurrentWorkspace } from 'app/features/workspaces/hooks/use-workspaces';
-
-export const ChannelMembersListModal = (): JSX.Element => {
-  const channelId = useRouterChannel();
-  const [query, setQuery] = useState<string>('');
-
-  const { addEmailSuggestion, pendingEmailList, channelMembersList, usersList, search, refresh } =
-    useSearchChannelMembersAll({
-      channelId,
-    });
-
-  useEffect(() => {
-    delayRequest('ChannelMembersListModal', async () => {
-      search(query);
-    });
-  }, [search, query]);
-
-  useEffect(() => {
-    if (channelId) refresh();
-  }, [channelId]);
-
-  return (
-    <div
-      className="flex flex-col max-w-full space-y-1"
-      style={{ height: '80vh', maxHeight: '400px' }}
-    >
-      <div>
-        <InputDecorationIcon
-          className="mb-2"
-          suffix={SearchIcon}
-          input={({ className }) => (
-            <Input
-              className={className}
-              placeholder={Languages.t('scenes.client.channelbar.channelmemberslist.search_invite')}
-              onChange={e => {
-                setQuery(e.target.value);
-              }}
-              value={query}
-            />
-          )}
-        />
-        {pendingEmailList?.length === 0 && channelMembersList?.length <= 1 && (
-          <Alert
-            className="mb-0"
-            theme="primary"
-            title={Languages.t('scenes.client.channelbar.channelmemberslist.search_invite_notice')}
-            icon={InformationCircleIcon}
-          />
-        )}
-      </div>
-      <div className="-mx-3">
-        <PerfectScrollbar
-          options={{ suppressScrollX: true, suppressScrollY: false }}
-          component="div"
-          style={{ width: '100%', height: '100%' }}
-        >
-          <div className="mx-1">
-            {addEmailSuggestion &&
-              pendingEmailList?.length === 0 &&
-              channelMembersList?.length === 0 &&
-              usersList?.length === 0 &&
-              !Strings.verifyMail(query) && (
-                <>
-                  <Info className="px-2 mt-2 block">
-                    {Languages.t(
-                      'scenes.client.channelbar.channelmemberslist.search_invite_type_email',
-                    )}
-                  </Info>
-                </>
-              )}
-            {addEmailSuggestion && <EmailSuggestion email={query} />}
-            {pendingEmailList?.length > 0 && (
-              <>
-                <Info className="px-2 mt-2 block">
-                  {Languages.t('scenes.client.channelbar.channelmemberslist.pending_section')}
-                </Info>
-              </>
-            )}
-            {pendingEmailList &&
-              pendingEmailList.map((item, index) => {
-                return (
-                  <div key={`key_${index}`} className="flex  py-1 hover:bg-zinc-50 rounded-sm px-2">
-                    <EmailItem email={item} />
-                  </div>
-                );
-              })}
-            {channelMembersList?.length > 0 && (
-              <>
-                <Info className="px-2 mt-2 block">
-                  {Languages.t('scenes.client.channelbar.channelmemberslist.members_section')}
-                </Info>
-              </>
-            )}
-            {channelMembersList &&
-              channelMembersList
-                .filter(a => a && a?.user)
-                .map(cMember => {
-                  return (
-                    <div
-                      key={cMember.user_id}
-                      className="flex  py-1 hover:bg-zinc-50 rounded-sm px-2"
-                    >
-                      <MemberItem userId={cMember.user_id} member={cMember} />
-                    </div>
-                  );
-                })}
-            {usersList?.length > 0 && (
-              <>
-                <Info className="px-2 mt-2 block">
-                  {Languages.t('scenes.client.channelbar.channelmemberslist.not_members_section')}
-                </Info>
-              </>
-            )}
-            {usersList &&
-              usersList.map(user => {
-                return (
-                  <div key={user.id} className="flex  py-1 hover:bg-zinc-50 rounded-sm px-2">
-                    <UserItem userId={user.id || ''} />
-                  </div>
-                );
-              })}
-          </div>
-        </PerfectScrollbar>
-      </div>
-    </div>
-  );
-};
-
-const EmailSuggestion = ({ email }: { email: string }) => {
-  const [, setInvitationOpen] = useRecoilState(invitationState);
-  const { addInvitation, allowed_guests, allowed_members } = useInvitationUsers();
-  const { workspace } = useCurrentWorkspace();
-
-  const invite = () => {
-    addInvitation(email);
-    setInvitationOpen(true);
-  };
-  if (!email || !Strings.verifyMail(email)) {
-    return <></>;
-  }
-
-  return AccessRightsService.hasLevel(workspace?.id, 'moderator') &&
-    (allowed_guests > 0 || allowed_members > 0) ? (
-    <div>
-      <Info className="px-2 mt-2 mb-2 block items-center flex">
-        <Text type="base" className="cursor-pointer" onClick={() => invite()}>
-          {Languages.t(
-            'scenes.client.channelbar.channelmemberslist.invite_to_workspace',
-            [email],
-            `Invite ${email} to the workspace ➡`,
-          )}
-        </Text>
-      </Info>
-    </div>
-  ) : (
-    <></>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-members-list/email-item.tsx b/tdrive/frontend/src/app/components/channel-members-list/email-item.tsx
deleted file mode 100644
index a3741725..00000000
--- a/tdrive/frontend/src/app/components/channel-members-list/email-item.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { MailIcon } from '@heroicons/react/outline';
-import { XIcon } from '@heroicons/react/solid';
-import { Tooltip } from 'antd';
-import { Button } from 'app/atoms/button/button';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { Info } from 'app/atoms/text';
-import { usePendingEmail } from 'app/features/channel-members-search/hooks/use-pending-email-hook';
-import Languages from 'app/features/global/services/languages-service';
-import { PendingEmail } from 'app/features/pending-emails/types/pending-email';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import WorkspaceUserAPIClient from 'app/features/workspace-members/api/workspace-members-api-client';
-import { WorkspacePendingUserType } from 'app/features/workspaces/types/workspace';
-import { useState } from 'react';
-
-type IProps = {
-  email: PendingEmail;
-};
-
-export const EmailItem = (props: IProps): JSX.Element => {
-  const { email } = props.email;
-  const { loading, cancelInvite } = usePendingEmail(email);
-  const workspaceId = useRouterWorkspace();
-  const companyId = useRouterCompany();
-  const [cancelWorkspaceInvitation, setCancelWorkspaceInvitation] =
-    useState<WorkspacePendingUserType | null>(null);
-
-  const _cancelInvite = async () => {
-    //Also check if the user is pending in the workspace and display something if that's the case
-    const pending = await WorkspaceUserAPIClient.listPending(companyId, workspaceId);
-    const foundWorkspacePending = pending.find(
-      p => p.email.toLocaleLowerCase() === email.toLocaleLowerCase(),
-    );
-    if (foundWorkspacePending) {
-      //Propose to also cancel workspace invitation
-      setCancelWorkspaceInvitation(foundWorkspacePending);
-    } else {
-      await cancelInvite();
-    }
-  };
-
-  return (
-    <>
-      <Modal open={!!cancelWorkspaceInvitation} onClose={() => setCancelWorkspaceInvitation(null)}>
-        <ModalContent
-          theme="warning"
-          title="Remove workspace invitation ?"
-          text="Do you want to cancel also the workspace invitation?"
-          buttons={[
-            <Button
-              key="no"
-              theme="default"
-              onClick={() => {
-                setCancelWorkspaceInvitation(null);
-                cancelInvite();
-              }}
-            >
-              {Languages.t('general.no')}
-            </Button>,
-            <Button
-              className="mr-2"
-              key="yes"
-              theme="primary"
-              onClick={() => {
-                setCancelWorkspaceInvitation(null);
-                cancelInvite();
-                WorkspaceUserAPIClient.cancelPending(companyId, workspaceId, email);
-              }}
-            >
-              {Languages.t('general.yes')}
-            </Button>,
-          ]}
-        ></ModalContent>
-      </Modal>
-      <div className="flex grow items-center space-x-1">
-        <MailIcon className="h-6 w-6 text-zinc-500" />
-        <div>
-          <span className="pl-2">
-            {email}{' '}
-            <Info>
-              (
-              {Languages.t(
-                'scenes.client.channels_bar.modals.parts.channel_member_row.label.pending_email',
-              )}
-              )
-            </Info>
-          </span>
-        </div>
-      </div>
-      <div>
-        <Tooltip
-          placement="top"
-          title={Languages.t('scenes.app.popup.workspaceparameter.pages.cancel_invitation')}
-        >
-          <Button
-            theme="default"
-            size="sm"
-            icon={XIcon}
-            loading={loading}
-            onClick={() => _cancelInvite()}
-          ></Button>
-        </Tooltip>
-      </div>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-members-list/member-item.tsx b/tdrive/frontend/src/app/components/channel-members-list/member-item.tsx
deleted file mode 100644
index c7ad9c7f..00000000
--- a/tdrive/frontend/src/app/components/channel-members-list/member-item.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import Avatar from 'app/atoms/avatar';
-import { ChannelMemberWithUser } from 'app/features/channel-members-search/types/channel-members';
-import Languages from 'app/features/global/services/languages-service';
-import UsersService from 'app/features/users/services/current-user-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import { useChannelMember } from 'app/features/channel-members-search/hooks/member-hook';
-import { LogoutIcon } from '@heroicons/react/outline';
-import { Tooltip } from 'antd';
-import { ButtonConfirm } from 'app/atoms/button/confirm';
-import MemberGrade from 'app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/MemberGrade';
-
-type IMemberProps = {
-  member: ChannelMemberWithUser;
-  userId?: string;
-};
-
-export const MemberItem = (props: IMemberProps): JSX.Element => {
-  const { member, userId } = props;
-  const { first_name, email } = member.user;
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const channelId = useRouterChannel();
-
-  const parameters = { companyId, workspaceId, channelId };
-
-  const { leave, loading } = useChannelMember(userId || '', parameters);
-
-  const isCurrentUser = (): boolean => {
-    const currentUserId: string = UsersService.getCurrentUserId();
-
-    return props.userId === currentUserId;
-  };
-
-  return (
-    <>
-      <div className="w-8 flex items-center ">
-        <Avatar className="" size="xs" avatar={UsersService.getThumbnail(member.user)} />
-      </div>
-      <div className="grow flex items-center overflow-hidden ">
-        <div className="whitespace-nowrap overflow-hidden text-ellipsis">
-          <span className="font-bold">{first_name}</span>
-          <span className="pl-2">{email}</span>
-        </div>
-      </div>
-      <div className="mr-2 flex items-center">
-        <MemberGrade
-          companyRole={member.user.companies?.find(c => c.company.id === companyId)?.role || ''}
-          workspaceRole={member.user.workspaces?.find(c => c.id === workspaceId)?.role || ''}
-        />
-      </div>
-      <div>
-        {isCurrentUser() ? (
-          <Tooltip placement="top" title={Languages.t('scenes.app.channelsbar.channel_leaving')}>
-            <ButtonConfirm
-              theme="danger"
-              size="sm"
-              icon={LogoutIcon}
-              loading={loading}
-              onClick={() => leave(props.userId || '')}
-            />
-          </Tooltip>
-        ) : (
-          <Tooltip
-            placement="top"
-            title={Languages.t('scenes.client.channelbar.channelmemberslist.menu.option_2')}
-          >
-            <ButtonConfirm
-              theme="primary"
-              size="sm"
-              icon={LogoutIcon}
-              loading={loading}
-              onClick={() => leave(props.userId || '')}
-            />
-          </Tooltip>
-        )}
-      </div>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-members-list/user-item.tsx b/tdrive/frontend/src/app/components/channel-members-list/user-item.tsx
deleted file mode 100644
index 81982c98..00000000
--- a/tdrive/frontend/src/app/components/channel-members-list/user-item.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import Avatar from 'app/atoms/avatar';
-import UsersService from 'app/features/users/services/current-user-service';
-import { useUser } from 'app/features/users/hooks/use-user';
-import { Button } from 'app/atoms/button/button';
-import Languages from 'app/features/global/services/languages-service';
-import { useChannelMember } from 'app/features/channel-members-search/hooks/member-hook';
-import { PlusIcon } from '@heroicons/react/solid';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import React from 'react';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import ConsoleService from 'app/features/console/services/console-service';
-import MemberGrade from 'app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/MemberGrade';
-
-type IUserProps = {
-  userId: string;
-};
-
-export const UserItem = (props: IUserProps): JSX.Element => {
-  const { userId } = props;
-  const user = useUser(userId || '');
-  const workspaceId = useRouterWorkspace();
-  const companyId = useRouterCompany();
-  const [confirmWorkspaceInvitation, setConfirmWorkspaceInvitation] =
-    React.useState<boolean>(false);
-
-  if (!user) {
-    return <></>;
-  }
-
-  const { addMember, loading } = useChannelMember(userId || '');
-  const [full_name, avatar] = [UsersService.getFullName(user), UsersService.getThumbnail(user)];
-
-  const _addMember = () => {
-    if (!(user.workspaces || []).map(w => w.id).includes(workspaceId)) {
-      //Ask for confirmation to invite the user to the workspace first
-      setConfirmWorkspaceInvitation(true);
-    } else {
-      addMember(userId || '');
-    }
-  };
-
-  return (
-    <>
-      <Modal open={confirmWorkspaceInvitation} onClose={() => setConfirmWorkspaceInvitation(false)}>
-        <ModalContent
-          theme="warning"
-          title="Also invite to the workspace?"
-          text="This user is not in the current workspace, he will be invited."
-          buttons={[
-            <Button key="no" theme="default" onClick={() => setConfirmWorkspaceInvitation(false)}>
-              {Languages.t('general.no')}
-            </Button>,
-            <Button
-              className="mr-2"
-              key="yes"
-              theme="primary"
-              onClick={async () => {
-                setConfirmWorkspaceInvitation(false);
-                await ConsoleService.addMailsInWorkspace({
-                  workspace_id: workspaceId || '',
-                  company_id: companyId || '',
-                  emails: [user.email],
-                });
-                await addMember(userId || '');
-              }}
-            >
-              {Languages.t('general.yes')}
-            </Button>,
-          ]}
-        ></ModalContent>
-      </Modal>
-
-      <div className="w-8 flex items-center ">
-        <Avatar size="xs" avatar={avatar} />
-      </div>
-      <div className="grow flex items-center overflow-hidden ">
-        <div className="whitespace-nowrap overflow-hidden text-ellipsis">
-          <span className="font-bold">{full_name}</span>
-          <span className="pl-2">{user.email}</span>
-        </div>
-      </div>
-      <div className="mr-2 flex items-center">
-        <MemberGrade
-          companyRole={user.companies?.find(c => c.company.id === companyId)?.role || ''}
-          workspaceRole={user.workspaces?.find(c => c.id === workspaceId)?.role || ''}
-        />
-      </div>
-      <div>
-        <Button
-          theme="primary"
-          size="sm"
-          icon={PlusIcon}
-          loading={loading}
-          onClick={() => _addMember()}
-        />
-      </div>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channel-members-list/users-search-modal.tsx b/tdrive/frontend/src/app/components/channel-members-list/users-search-modal.tsx
deleted file mode 100644
index 7543b427..00000000
--- a/tdrive/frontend/src/app/components/channel-members-list/users-search-modal.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { useUsersSearchModal } from 'app/features/channel-members-search/state/search-channel-member';
-import Languages from 'app/features/global/services/languages-service';
-import { ChannelMembersListModal } from './channel-members-modal';
-
-export default () => {
-  const { open, setOpen } = useUsersSearchModal();
-
-  return (
-    <Modal open={open} onClose={() => setOpen(false)} className="sm:w-[80vw] sm:max-w-xl">
-      <ModalContent
-        textCenter
-        title={Languages.t('scenes.apps.parameters.workspace_sections.members')}
-      >
-        <ChannelMembersListModal />
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/channels-selector/index.tsx b/tdrive/frontend/src/app/components/channels-selector/index.tsx
deleted file mode 100644
index 1e13c54c..00000000
--- a/tdrive/frontend/src/app/components/channels-selector/index.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { SearchIcon } from '@heroicons/react/outline';
-import Avatar from 'app/atoms/avatar';
-import { InputDecorationIcon } from 'app/atoms/input/input-decoration-icon';
-import { Input } from 'app/atoms/input/input-text';
-import { Loader } from 'app/atoms/loader';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { Base, Info } from 'app/atoms/text';
-import {
-  useSearchChannels,
-  useSearchChannelsLoading,
-} from 'app/features/search/hooks/use-search-channels';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import Block from 'app/molecules/grouped-rows/base';
-import { useEffect, useState } from 'react';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import { atom, useRecoilState, useSetRecoilState } from 'recoil';
-import Button from '../buttons/button';
-import Emojione from '../emojione/emojione';
-import UsersService from 'app/features/users/services/current-user-service';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { Checkbox } from 'app/atoms/input/input-checkbox';
-import Languages from '../../features/global/services/languages-service';
-import Icon from '../icon/icon';
-
-export const SelectChannelModalAtom = atom<boolean>({
-  key: 'SelectChannelModalAtom',
-  default: false,
-});
-
-export const ChannelSelectorModal = (props: {
-  initialChannels: ChannelType[];
-  onChange: (channels: ChannelType[]) => void;
-  lockDefaultChannels?: boolean;
-}) => {
-  const [open, setOpen] = useRecoilState(SelectChannelModalAtom);
-  const [channels, setChannels] = useState<ChannelType[]>([]);
-
-  return (
-    <Modal open={open} onClose={() => setOpen(false)}>
-      <ModalContent title={Languages.t('components.channelselector.title')}>
-        <ChannelSelector
-          initialChannels={props.initialChannels}
-          onChange={channels => {
-            setChannels(channels);
-          }}
-          lockDefaultChannels={props.lockDefaultChannels}
-        />
-        <Button
-          className="w-full mt-2 text-center justify-center"
-          disabled={channels.length === 0}
-          onClick={() => {
-            props.onChange(channels);
-          }}
-        >
-          {Languages.t('components.channelselector.confirm')}
-        </Button>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-export const ChannelSelector = (props: {
-  initialChannels: ChannelType[];
-  onChange: (channels: ChannelType[]) => void;
-  lockDefaultChannels?: boolean;
-}) => {
-  const [selectedChannels, setSelectedChannels] = useState<ChannelType[]>(props.initialChannels);
-  const setSearch = useSetRecoilState(SearchInputState);
-  const { channels } = useSearchChannels();
-  const loading = useSearchChannelsLoading();
-
-  const displayedChannels = props.lockDefaultChannels
-    ? [
-        ...channels.filter(channel => channel.is_default),
-        ...channels.filter(channel => !channel.is_default),
-      ]
-    : channels;
-
-  useEffect(() => {
-    props.onChange(selectedChannels);
-  }, [selectedChannels]);
-
-  return (
-    <>
-      <InputDecorationIcon
-        prefix={
-          loading
-            ? ({ className }) => (
-                <div className={className + ' !h-6'}>
-                  <Loader className="h-4 w-4" />
-                </div>
-              )
-            : SearchIcon
-        }
-        input={({ className }) => (
-          <Input
-            className={className}
-            placeholder={Languages.t('components.channelselector.search')}
-            onChange={e => setSearch({ query: e.target.value })}
-          />
-        )}
-      />
-
-      <PerfectScrollbar
-        className="border-b border-zinc-200 py-3 overflow-hidden"
-        style={{ maxHeight: '40vh', minHeight: '40vh' }}
-        options={{ suppressScrollX: true, suppressScrollY: false }}
-        component="div"
-      >
-        {displayedChannels.map(channel => {
-          const name =
-            channel.name || channel.users?.map(u => UsersService.getFullName(u)).join(', ');
-
-          return (
-            <Block
-              key={channel.id}
-              avatar={
-                <Avatar
-                  icon={
-                    channel.visibility === 'direct' ? undefined : (
-                      <div className="w-full h-full flex justify-center items-center">
-                        <Emojione type={channel.icon || ''} />
-                      </div>
-                    )
-                  }
-                  title={name || ''}
-                />
-              }
-              title={<Base className="capitalize">{name}</Base>}
-              subtitle={
-                <Info className="-mt-2">{`${
-                  channel.stats?.members || channel.members?.length || 0
-                } members`}</Info>
-              }
-              suffix={
-                <div className="flex text-center pr-4">
-                  {props.lockDefaultChannels &&
-                  props.initialChannels.find(({ id }) => channel.id === id) &&
-                  channel.is_default ? (
-                    <div className="font-medium h-6 flex items-center justify-center text-sm rounded-full text-white bg-blue-500">
-                      <Icon type="lock-alt" className="m-icon-small" />
-                    </div>
-                  ) : (
-                    <Checkbox
-                      value={!!selectedChannels.find(({ id }) => channel.id === id)}
-                      onChange={() => {
-                        if (selectedChannels.includes(channel)) {
-                          setSelectedChannels(selectedChannels.filter(c => c.id !== channel.id));
-                        } else if (channel.id) {
-                          setSelectedChannels([...selectedChannels, channel]);
-                        }
-                      }}
-                    />
-                  )}
-                </div>
-              }
-              className="py-2"
-            />
-          );
-        })}
-      </PerfectScrollbar>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.scss b/tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.scss
deleted file mode 100644
index bfbe28d4..00000000
--- a/tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.companyMessagesCounter {
-  margin-right: 8px;
-
-  .info {
-    font-weight: 400;
-    opacity: 0.5;
-  }
-  .link {
-    margin-top: 4px;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.tsx b/tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.tsx
deleted file mode 100644
index 51346ddf..00000000
--- a/tdrive/frontend/src/app/components/company-messages-counter/company-messages-counter.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Col, Progress, Row, Typography } from 'antd';
-import './company-messages-counter.scss';
-import i18n from 'i18next';
-
-import Languages from 'app/features/global/services/languages-service';
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
-import FeatureTogglesService, {
-  FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
-import MessageHistoryService from 'app/features/messages/services/message-history-service';
-import consoleService from 'app/features/console/services/console-service';
-
-const { Text, Title, Link } = Typography;
-const CompanyMessagesCounter = () => {
-  const [messagesCount, setMessagesCount] = useState<number>(1);
-  const companyMessagesLimit = MessageHistoryService.getLimitCompanyMessages();
-
-  const { company } = useCurrentCompany();
-
-  const companySubscriptionUrl = consoleService.getCompanySubscriptionUrl(company.id);
-
-  const onClickLink = () => window.open(companySubscriptionUrl, 'blank');
-
-  useEffect(() => {
-    if (company) {
-      setMessagesCount(company.stats?.total_messages || 1);
-    }
-  }, [company]);
-
-  return !FeatureTogglesService.isActiveFeatureName(FeatureNames.MESSAGE_HISTORY) ? (
-    <>
-      <Row
-        justify="space-around"
-        align="middle"
-        wrap={false}
-        style={{
-          padding: '0px 0px',
-          width: '100%',
-        }}
-      >
-        <Col className="small-left-margin companyMessagesCounter" style={{ lineHeight: '16px' }}>
-          <Title level={4}>
-            {Languages.t('scenes.app.channelsbar.currentuser.company_messages_counter_header', [])}
-          </Title>
-          <Text className="info">
-            {Languages.t('scenes.app.channelsbar.currentuser.company_messages_counter_info', [
-              Intl.NumberFormat(i18n.language).format(companyMessagesLimit),
-            ])}
-          </Text>
-          <div className="link">
-            <Link onClick={onClickLink}>
-              {Languages.t('scenes.app.channelsbar.currentuser.company_messages_counter_link', [])}
-            </Link>
-          </div>
-        </Col>
-        <Col>
-          <Progress
-            type="circle"
-            format={() => (messagesCount / 1000).toFixed(1) + 'k'}
-            percent={(messagesCount / companyMessagesLimit) * 100}
-            width={55}
-          />
-        </Col>
-      </Row>
-    </>
-  ) : (
-    <></>
-  );
-};
-export default CompanyMessagesCounter;
diff --git a/tdrive/frontend/src/app/components/components-tester/component-doc.jsx b/tdrive/frontend/src/app/components/components-tester/component-doc.jsx
deleted file mode 100755
index 985c48f0..00000000
--- a/tdrive/frontend/src/app/components/components-tester/component-doc.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { Component } from 'react';
-import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board.jsx';
-import './component-doc.scss';
-
-export default class ComponentDoc extends React.Component {
-  constructor() {
-    super();
-  }
-  render() {
-    return (
-      <div className="component_doc">
-        <div className="section header">
-          {this.props.title && <div className="title">{this.props.title}</div>}
-          {this.props.import && (
-            <InputWithClipBoard value={this.props.import} className="full_width" />
-          )}
-        </div>
-        <div className="section">{this.props.children}</div>
-        <div className="section">
-          {this.props.properties && [
-            <div className="subtitle">Properties</div>,
-            <table className="properties">
-              <thead>
-                <tr>
-                  <td>Property</td>
-                  <td>Type</td>
-                  <td>Default</td>
-                  <td>Description</td>
-                </tr>
-              </thead>
-              {this.props.properties.map(property => {
-                return (
-                  <tr>
-                    <td>{property[0]}</td>
-                    <td>
-                      {property[1].split(',').map(item => (
-                        <span className="type">{item}</span>
-                      ))}
-                    </td>
-                    <td>{property[2]}</td>
-                    <td>{property[3]}</td>
-                  </tr>
-                );
-              })}
-            </table>,
-            <br />,
-            <br />,
-          ]}
-
-          {this.props.infos && [
-            <div className="subtitle">Infos</div>,
-            <div className="text">{this.props.infos}</div>,
-          ]}
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/components-tester/component-doc.scss b/tdrive/frontend/src/app/components/components-tester/component-doc.scss
deleted file mode 100755
index 1fc53cbe..00000000
--- a/tdrive/frontend/src/app/components/components-tester/component-doc.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.component_doc {
-  background: var(--grey-background);
-  padding: 25px;
-  max-height: 100vh;
-  overflow: scroll;
-  box-sizing: border-box;
-
-  .section {
-    background: var(--white);
-    max-width: 900px;
-    margin: auto;
-    left: 0;
-    right: 0;
-    padding: 25px;
-    box-sizing: border-box;
-    border-radius: var(--border-radius-base);
-    margin-top: 25px;
-  }
-
-  .header {
-    input {
-      background: var(--black);
-      color: #fff;
-      font-family: monospace;
-    }
-  }
-
-  .subtitle {
-    font-weight: 700;
-  }
-
-  .properties {
-    border-collapse: collapse;
-    width: 100%;
-
-    thead {
-      font-weight: 700;
-    }
-
-    td {
-      border: 1px solid var(--grey-background);
-      padding: 8px;
-    }
-    .type {
-      background: var(--grey-background);
-      padding: 2px 4px;
-      border-radius: var(--border-radius-base);
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/components-tester/components-tester.jsx b/tdrive/frontend/src/app/components/components-tester/components-tester.jsx
deleted file mode 100755
index 67bab63a..00000000
--- a/tdrive/frontend/src/app/components/components-tester/components-tester.jsx
+++ /dev/null
@@ -1,370 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { Component } from 'react';
-import Emojione from 'components/emojione/emojione';
-import Icon from 'app/components/icon/icon.jsx';
-import Menu from 'components/menus/menu.jsx';
-import MenusBodyLayer from 'app/components/menus/menus-body-layer.jsx';
-import AutoComplete from 'components/auto-complete/auto-complete';
-import UserPicker from 'components/user-picker/user-picker.jsx';
-import EmojiPicker from 'components/emoji-picker/emoji-picker.jsx';
-
-import Directory from 'components/drive/directory.jsx';
-import File from 'components/drive/file';
-import DriveMultiSelector from 'components/drive/drive-multi-selector.jsx';
-
-import Rounded from 'components/inputs/rounded.jsx';
-
-import DraggableBodyLayer from 'components/draggable/draggable-body-layer.jsx';
-
-import emojiService from 'app/components/rich-text-editor/emojis-service.jsx';
-import User from 'components/ui/user.jsx';
-
-import AutoHeight from 'components/auto-height/auto-height.jsx';
-import Tooltip from 'components/tooltip/tooltip.jsx';
-import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board.jsx';
-
-import './components-tester.scss';
-import GroupInputs from './group/inputs.js';
-
-export default class ComponentsTester extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      autocompValue: '',
-      visible: false,
-    };
-  }
-  render() {
-    return [
-      <div className="componentTester">
-        <div className="section">
-          <div className="title">Test des composants</div>
-          <div className="subtitle">ctrl+alt+e pour revenir à Tdrive</div>
-        </div>
-
-        <GroupInputs />
-
-        <div className="section">
-          <div className="title">Icones</div>
-
-          <div className="title">
-            Title <Icon type="comment" />
-          </div>
-          <div className="subtitle">
-            Sub title <Icon type="search" />
-          </div>
-          <div className="text">
-            Text <Icon type="grid" />
-          </div>
-        </div>
-
-        <div className="section">
-          <div className="title">Emojione</div>
-          <div className="title">
-            Title <Emojione type="🍺" />
-          </div>
-          <div className="subtitle">
-            Subtitle <Emojione type=":smile:" />
-          </div>
-          <div className="text">
-            Text <Emojione type="👍" />
-          </div>
-        </div>
-        <div className="section">
-          <div className="title">Tooltip</div>
-          <div className="text">
-            <Tooltip
-              ref={o => (this.tooltip = o)}
-              tooltip={'toolltiiiiiiiiip'}
-              position={'top'}
-              overable={false}
-            >
-              <div className="to">this is my tooltip top</div>
-            </Tooltip>
-          </div>
-          <button onClick={() => this.tooltip.openWithTimeOut(2)}>open</button>
-          <div className="text">
-            <Tooltip tooltip={'toolltiiiiiiiiip'} position={'bottom'}>
-              <div className="to">this is my tooltip top</div>
-            </Tooltip>
-          </div>
-        </div>
-
-        <div className="section">
-          <div className="title">Input with clipboard</div>
-          <div className="text">
-            <InputWithClipBoard
-              value={
-                'https://join.slack.com/t/yopmail-groupe/shared_invite/enQtNTY2NjEwNTM4MTMxLTFmYTg2N2U1NjZiMDg4NmMxM2UyOTQ5YjQ1YWE4ZGE2NGVkNTRhMjRlZGMwMmMxZjk1YjViN2M5Y2MzMTgxYjQ'
-              }
-              disabled={true}
-            />
-          </div>
-        </div>
-
-        <div className="section">
-          <div className="title">Menus</div>
-
-          <Menu
-            menu={[
-              { type: 'menu', text: 'Un menu', icon: 'list' },
-              {
-                type: 'menu',
-                text: 'Un menu avec sous menu',
-                icon: 'grid',
-                submenu: [
-                  { text: 'Sub menu 4', icon: 'search' },
-                  { text: 'Sub menu 5', icon: 'search' },
-                  { text: 'Sub menu 6', icon: 'search' },
-                ],
-              },
-              {
-                type: 'menu',
-                text: 'Un menu avec sous menu',
-                icon: 'grid',
-                submenu: [
-                  {
-                    type: 'react-element',
-                    text: 'Sub menu 6',
-                    icon: 'search',
-                    reactElement: <div className="hello">salut</div>,
-                  },
-                ],
-              },
-              { type: 'separator' },
-              { type: 'text', text: 'Du texte' },
-            ]}
-          >
-            Click here !
-          </Menu>
-        </div>
-        <div className="section">
-          <div className="title">Auto complete one line</div>
-          <AutoComplete
-            search={[
-              (text, cb) => {
-                cb(
-                  [
-                    {
-                      id: 1,
-                      username: 'benoit',
-                      mail: 'benoit.tallandier@g.a',
-                      userimage: 'https://randomuser.me/api/portraits/men/40.jpg',
-                    },
-                    {
-                      id: 2,
-                      username: 'romaric',
-                      mail: 'romaric.mourgues@g.a',
-                      userimage: 'https://randomuser.me/api/portraits/men/41.jpg',
-                    },
-                    {
-                      id: 3,
-                      username: 'guillaume',
-                      mail: 'romaric.mourgues@g.a',
-                      userimage: 'https://randomuser.me/api/portraits/men/42.jpg',
-                    },
-                    {
-                      id: 4,
-                      username: 'Amandine',
-                      mail: 'romaric.mourgues@g.a',
-                      userimage: 'https://randomuser.me/api/portraits/women/40.jpg',
-                    },
-                  ].filter(function (item) {
-                    if (item && item.username.indexOf(text) !== -1) {
-                      return true;
-                    }
-                    return false;
-                  }),
-                );
-              },
-              (text, cb) => {
-                cb(emojiService.search(text));
-              },
-            ]}
-            max={[5, 5]}
-            renderItemChoosen={[
-              item => {
-                return '@' + (item || {}).username + ' ';
-              },
-              item => {
-                return item.shortname + ' ';
-              },
-            ]}
-            renderItem={[
-              item => {
-                return (
-                  <div style={{ margin: '3px 0px' }}>
-                    <User data={item} />
-                  </div>
-                );
-              },
-              item => {
-                return (
-                  <div style={{ margin: '1px 0px' }}>
-                    <Emojione type={item.shortname} /> {item.shortname}
-                  </div>
-                );
-              },
-            ]}
-            regexHooked={[/\B@([\-+\w]*)$/, /\B:([\-+\w]{0}[\-+\w]*)$/]}
-            placeholder="Placeholder"
-            autoHeight
-          />
-        </div>
-        <div className="section">
-          <div className="title">Multi-line input</div>
-
-          <AutoHeight />
-        </div>
-        <div className="section">
-          <div className="title">Users picker</div>
-          <div className="subtitle">In menu</div>
-          <Menu
-            menu={[
-              {
-                type: 'react-element',
-                reactElement: (
-                  <UserPicker
-                    value={this.state.users_picker_value}
-                    onChange={list => this.setState({ users_picker_value: list })}
-                  />
-                ),
-              },
-            ]}
-          >
-            <div className="text">Open menu</div>
-          </Menu>
-
-          <br />
-          <br />
-          <div className="subtitle">Inline</div>
-
-          <UserPicker
-            value={this.state.users_picker_value}
-            onChange={list => this.setState({ users_picker_value: list })}
-            inline
-          />
-
-          <br />
-          <div className="subtitle">Inline read only</div>
-
-          <UserPicker value={this.state.users_picker_value} readOnly />
-
-          <br />
-          <div className="subtitle">Inline read only miniatures</div>
-
-          <UserPicker value={this.state.users_picker_value} readOnly mini />
-        </div>
-        <div className="section">
-          <div className="title">Emoji picker</div>
-          <Menu menu={[{ type: 'react-element', reactElement: <EmojiPicker /> }]}>
-            Click here !
-          </Menu>
-        </div>
-
-        <div className={'section ' + (this.state.drive_list ? 'list' : 'grid')}>
-          <button
-            style={{ float: 'right' }}
-            className="medium"
-            onClick={() => {
-              this.setState({ drive_list: !this.state.drive_list });
-            }}
-          >
-            Toggle display mode
-          </button>
-
-          <div className="title">Drive</div>
-
-          <div className="text">
-            TODO: Tester drag drop depuis ordinateur
-            <br />
-            TODO: Faire apparaitre l'icone "drag + menu" au survol
-          </div>
-
-          <DriveMultiSelector
-            scroller={this.drive_scroller}
-            selectionType="drive_1"
-            style={{ maxHeight: 400 }}
-          >
-            <div style={{ padding: 5 }}>
-              <div className="subtitle">Dossiers</div>
-
-              <Directory
-                selectionType="drive_1"
-                data={{ id: 1, name: 'Drive', type: 'google_drive' }}
-              />
-              <Directory selectionType="drive_1" data={{ id: 2, name: 'Accepté', size: '6000' }} />
-              <Directory selectionType="drive_1" data={{ id: 3, name: 'Refusés', size: '19000' }} />
-
-              <Menu
-                menu={[
-                  { type: 'menu', text: 'Nouveau dossier', icon: 'plus' },
-                  { type: 'menu', text: 'ChannelServiceImpl externe', icon: 'grid' },
-                ]}
-              >
-                <Rounded />
-              </Menu>
-
-              <br />
-              <br />
-
-              <div className="subtitle">Fichiers</div>
-
-              <File
-                selectionType="drive_1"
-                data={{
-                  id: 4,
-                  name: 'fonds_marins.jpeg',
-                  size: '3000',
-                  preview_url:
-                    'https://cdn12.picryl.com/photo/2016/12/31/wintry-winter-mood-snow-landscape-nature-landscapes-10fa27-1024.jpg',
-                }}
-              />
-              <File
-                selectionType="drive_1"
-                data={{
-                  id: 5,
-                  name: 'photo.jpg',
-                  size: '2000',
-                  preview_url:
-                    'https://www.goodfreephotos.com/albums/turkey/other/landscape-with-river-valley-in-turkey.jpg',
-                }}
-              />
-              <File
-                selectionType="drive_1"
-                data={{
-                  id: 6,
-                  name: 'montagnes.png',
-                  size: '1500',
-                  preview_url: 'https://c1.staticflickr.com/6/5081/5252291555_830a56721b_b.jpg',
-                }}
-              />
-              <File
-                selectionType="drive_1"
-                data={{
-                  id: 7,
-                  name: 'chapeau.png',
-                  size: '532',
-                  preview_url:
-                    'https://www.lacerisesurlechapeau.com/wp-content/uploads/2016/07/chapeau-original-trendy-feutre.png',
-                }}
-              />
-
-              <Menu
-                menu={[
-                  { type: 'menu', text: 'Nouveau fichier', icon: 'plus', submenu: [] },
-                  { type: 'menu', text: 'Depuis un lien', icon: 'link' },
-                  { type: 'menu', text: "Importer depuis l'ordinateur", icon: 'monitor' },
-                ]}
-              >
-                <Rounded />
-              </Menu>
-            </div>
-          </DriveMultiSelector>
-        </div>
-      </div>,
-      <MenusBodyLayer />,
-      <DraggableBodyLayer />,
-    ];
-  }
-}
diff --git a/tdrive/frontend/src/app/components/components-tester/components-tester.scss b/tdrive/frontend/src/app/components/components-tester/components-tester.scss
deleted file mode 100755
index 3f42f35e..00000000
--- a/tdrive/frontend/src/app/components/components-tester/components-tester.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.componentTester {
-  background: #f5f5f7;
-  padding: 25px;
-  max-height: 100vh;
-  overflow: scroll;
-  box-sizing: border-box;
-
-  .section {
-    background: #fff;
-    max-width: 900px;
-    margin: auto;
-    left: 0;
-    right: 0;
-    padding: 25px;
-    box-sizing: border-box;
-    border-radius: var(--border-radius-base);
-    margin-top: 25px;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/components-tester/group/inputs.jsx b/tdrive/frontend/src/app/components/components-tester/group/inputs.jsx
deleted file mode 100755
index 040d872c..00000000
--- a/tdrive/frontend/src/app/components/components-tester/group/inputs.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { Component } from 'react';
-
-import Checkbox from 'app/components/inputs/deprecated_checkbox.jsx';
-import Switch from 'components/inputs/switch';
-import Button from 'components/buttons/button.jsx';
-import Input from 'components/inputs/input.jsx';
-
-import StepCounter from 'components/step-counter/step-counter.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import { lang } from 'moment';
-
-export default class GroupInputs extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      input: 'Example',
-    };
-  }
-  render() {
-    return [
-      <div className="section">
-        <div className="title">Formulaires</div>
-
-        <div className="subtitle">className="big"</div>
-        <Input
-          className="big"
-          value={this.state.input}
-          onChange={evt => this.setState({ input: evt.target.value })}
-        />
-        <br />
-        <Checkbox
-          className="big"
-          value={this.state.input}
-          onChange={value => this.setState({ input: value })}
-        />
-        <br />
-        <Switch
-          className="big"
-          checked={this.state.input}
-          onChange={value => this.setState({ input: value })}
-        />
-        <br />
-
-        <div className="subtitle">className="medium"</div>
-        <Input
-          className="medium"
-          value={this.state.input}
-          onChange={evt => this.setState({ input: evt.target.value })}
-        />
-        <br />
-        <Checkbox
-          className="medium"
-          checked={this.state.input}
-          onChange={value => this.setState({ input: value })}
-        />
-        <br />
-        <Switch
-          className="medium"
-          checked={this.state.input}
-          onChange={value => this.setState({ input: value })}
-        />
-        <br />
-
-        <div className="subtitle">className="small"</div>
-        <Input
-          className="small"
-          value={this.state.input}
-          onChange={evt => this.setState({ input: evt.target.value })}
-        />
-        <br />
-        <Checkbox
-          className="small"
-          value={this.state.input}
-          onChange={value => this.setState({ input: value })}
-        />
-        <br />
-        <Switch
-          className="small"
-          checked={this.state.input}
-          onChange={value => this.setState({ input: value })}
-        />
-        <br />
-      </div>,
-      <div className="section">
-        <div className="big_form">
-          <StepCounter current={3} total={4} />
-          <div className="title">Create my company 3/4</div>
-          <div className="subtitle">
-            {Languages.t(
-              'scenes.app.workspaces.create_company.importations.title_1',
-              [],
-              'Already working with digital tools? Import or integrate your tools now!',
-            )}
-            <br />
-            {Languages.t(
-              'scenes.app.workspaces.create_company.importations.title_2',
-              [],
-              'No worries, you can do this later!',
-            )}
-          </div>
-
-          <div className="body">
-            <div className="input_with_label">
-              <div className="label">What's your company name ?</div>
-              <Input
-                className="big full_width"
-                value={this.state.company_name || ''}
-                onChange={evt => this.setState({ company_name: evt.target.value })}
-                placeholder="Ex : Google, Aircall, Doctolib"
-              />
-            </div>
-          </div>
-
-          <div className="footer">
-            <Button value={Languages.t('general.back', [], 'Back')} inline />
-
-            <Button value={Languages.t('general.continue', [], 'Continue')} primary />
-          </div>
-        </div>
-      </div>,
-    ];
-  }
-}
diff --git a/tdrive/frontend/src/app/components/connection-indicator/connection-indicator.tsx b/tdrive/frontend/src/app/components/connection-indicator/connection-indicator.tsx
index 22d0c911..43dc4334 100644
--- a/tdrive/frontend/src/app/components/connection-indicator/connection-indicator.tsx
+++ b/tdrive/frontend/src/app/components/connection-indicator/connection-indicator.tsx
@@ -3,10 +3,10 @@ import './connection-indicator.scss';
 import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
 import HourglassEmpty from '@material-ui/icons/HourglassEmpty';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-import Languages from 'app/features/global/services/languages-service';
-import { ConnectedState } from 'app/features/users/state/atoms/connected';
+import Languages from '@features/global/services/languages-service';
+import { ConnectedState } from '@features/users/state/atoms/connected';
 import { useRecoilState } from 'recoil';
-import WebSocket, { WebsocketEvents } from 'app/features/global/types/websocket-types';
+import WebSocket, { WebsocketEvents } from '@features/global/types/websocket-types';
 
 export default () => {
   const [{ connected, reconnecting }, setState] = useRecoilState(ConnectedState);
diff --git a/tdrive/frontend/src/app/components/connectors-list-manager/connectors-list-manager.jsx b/tdrive/frontend/src/app/components/connectors-list-manager/connectors-list-manager.jsx
index f62f1160..ef63da2d 100755
--- a/tdrive/frontend/src/app/components/connectors-list-manager/connectors-list-manager.jsx
+++ b/tdrive/frontend/src/app/components/connectors-list-manager/connectors-list-manager.jsx
@@ -6,9 +6,9 @@ import AddIcon from '@material-ui/icons/AddOutlined';
 import GearIcon from '@material-ui/icons/BuildOutlined';
 import Input from 'components/inputs/input.jsx';
 import './connectors-list-manager.scss';
-import Languages from 'app/features/global/services/languages-service';
-import WorkspacesApps from 'app/deprecated/workspaces/workspaces_apps.jsx';
-import { getCompanyApplication as getApplication } from 'app/features/applications/state/company-applications';
+import Languages from '@features/global/services/languages-service';
+import WorkspacesApps from '@deprecated/workspaces/workspaces_apps.jsx';
+import { getCompanyApplication as getApplication } from '@features/applications/state/company-applications';
 
 export default class ConnectorsListManager extends Component {
   constructor(props) {
diff --git a/tdrive/frontend/src/app/components/desktop-redirect/index.tsx b/tdrive/frontend/src/app/components/desktop-redirect/index.tsx
index 67c38639..54bf60e0 100644
--- a/tdrive/frontend/src/app/components/desktop-redirect/index.tsx
+++ b/tdrive/frontend/src/app/components/desktop-redirect/index.tsx
@@ -1,11 +1,11 @@
-import { Loader } from 'app/atoms/loader';
-import { OpenDesktopPopup } from 'app/components/open-desktop-popup/open-desktop-popup';
-import Electron from 'app/features/global/framework/electron-service';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { useWebState } from 'app/features/global/state/atoms/use-web';
-import { getDevice } from 'app/features/global/utils/device';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
+import { Loader } from '@atoms/loader';
+import { OpenDesktopPopup } from '@components/open-desktop-popup/open-desktop-popup';
+import Electron from '@features/global/framework/electron-service';
+import { useGlobalEffect } from '@features/global/hooks/use-global-effect';
+import { LoadingState } from '@features/global/state/atoms/Loading';
+import { useWebState } from '@features/global/state/atoms/use-web';
+import { getDevice } from '@features/global/utils/device';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import { detectDesktopAppPresence } from 'src/utils/browser-detect';
diff --git a/tdrive/frontend/src/app/components/download-app-banner/download-app-banner.tsx b/tdrive/frontend/src/app/components/download-app-banner/download-app-banner.tsx
index 11c13d2f..a5a679f2 100644
--- a/tdrive/frontend/src/app/components/download-app-banner/download-app-banner.tsx
+++ b/tdrive/frontend/src/app/components/download-app-banner/download-app-banner.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import InitService from '../../features/global/services/init-service';
 import LocalStorage from '../../features/global/framework/local-storage-service';
-import DownloadBanner from 'app/molecules/download-banner';
+import DownloadBanner from '@molecules/download-banner';
 import { detectDesktopAppPresence } from '../../../utils/browser-detect';
 
 export default (): React.ReactElement => {
diff --git a/tdrive/frontend/src/app/components/draggable/draggable-body-layer.jsx b/tdrive/frontend/src/app/components/draggable/draggable-body-layer.jsx
deleted file mode 100755
index d37734c9..00000000
--- a/tdrive/frontend/src/app/components/draggable/draggable-body-layer.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-
-import DraggableManager from './draggable-manager.js';
-
-export default class DraggableBodyLayer extends Component {
-  constructor() {
-    super();
-    this.state = {
-      draggable_manager: DraggableManager,
-    };
-    this.draggable_body_dom = null;
-    DraggableManager.addListener(this);
-  }
-  componentDidMount() {
-    DraggableManager.registerContainer(this.draggable_body_dom);
-  }
-  componentWillUnmount() {
-    DraggableManager.removeListener(this);
-  }
-  render() {
-    return <div ref={node => (this.draggable_body_dom = node)} />;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/draggable/draggable-manager.js b/tdrive/frontend/src/app/components/draggable/draggable-manager.js
deleted file mode 100755
index 9af86534..00000000
--- a/tdrive/frontend/src/app/components/draggable/draggable-manager.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import React, { Component } from 'react';
-
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import SelectionsManager from 'app/deprecated/SelectionsManager/SelectionsManager.js';
-
-class DraggableManager extends Observable {
-  constructor() {
-    super();
-    this.setObservableName('draggable_manager');
-    this.container = null;
-
-    this.move = this.move.bind(this);
-    this.end = this.end.bind(this);
-    this.start = this.start.bind(this);
-
-    this.drag = false;
-    this.clone_created = false;
-    this.drag_initial_point = [];
-    this.current_node_initial_position = [];
-  }
-
-  registerContainer(container) {
-    this.container = container;
-  }
-
-  setDropCallback(key, callback) {
-    this.callback_key = key;
-    this.callback = callback;
-  }
-
-  removeDropCallback(key) {
-    if (this.callback_key == key) {
-      this.callback = false;
-      this.callback_key = null;
-    }
-  }
-
-  start(evt, node, react_draggable) {
-    if (this.dragging) {
-      return;
-    }
-
-    if (react_draggable.props.dragHandler) {
-      var onHandler = false;
-      var handlers = node.getElementsByClassName(react_draggable.props.dragHandler);
-      if (handlers.length > 0) {
-        Array.from(handlers).forEach(item => {
-          if (item == evt.target || item.contains(evt.target)) {
-            onHandler = true;
-          }
-        });
-      }
-
-      if (!onHandler) {
-        return;
-      }
-    }
-
-    this.data = {};
-    if (node) {
-      this.current_node = node;
-    }
-    if (react_draggable) {
-      this.current_react_draggable = react_draggable;
-      this.props = {
-        parentClassOnDrag: this.current_react_draggable.props.parentClassOnDrag,
-        minMove: this.current_react_draggable.props.minMove,
-      };
-      this.data = this.current_react_draggable.props.data;
-    }
-
-    this.selected_number = 1;
-    if (this.data.selection_type) {
-      this.selected_number = SelectionsManager.selected_per_type[this.data.selection_type];
-      if (this.selected_number) {
-        this.selected_number = Object.keys(this.selected_number).length;
-      }
-
-      if (!this.selected_number) {
-        this.selected_number = 1;
-      }
-    }
-
-    evt.stopPropagation();
-    evt.preventDefault();
-
-    document.addEventListener('mousemove', this.move);
-    document.addEventListener('mouseup', this.end);
-    var rect = window.getBoundingClientRect(this.current_node);
-    rect.x = rect.x || rect.left;
-    rect.y = rect.y || rect.top;
-
-    this.clone_created = false;
-    this.drag_initial_point = [evt.clientX, evt.clientY];
-    this.current_node_initial_position = [rect.left, rect.top, node.clientWidth, node.clientHeight];
-
-    this.drag = true;
-    if (this.current_react_draggable) this.current_react_draggable.setState({ drag: true });
-  }
-  end(evt, node, react_draggable) {
-    if (this.dragging) {
-      evt.preventDefault();
-      evt.stopPropagation();
-    }
-
-    this.current_react_draggable && this.current_react_draggable.setState({ hide_original: false });
-
-    if (!this.data) {
-      return;
-    }
-
-    if (node) {
-      this.current_node = node;
-    }
-    if (react_draggable) {
-      this.current_react_draggable = react_draggable;
-      this.props = {
-        parentClassOnDrag: this.current_react_draggable.props.parentClassOnDrag,
-        minMove: this.current_react_draggable.props.minMove,
-      };
-    }
-
-    document.removeEventListener('mousemove', this.move);
-    document.removeEventListener('mouseup', this.end);
-
-    document.body.classList.remove('dragging');
-    document.body.classList.remove('drag_' + this.data.type);
-    this.drag = false;
-    this.dragging = false;
-    if (this.current_react_draggable)
-      this.current_react_draggable.setState({ drag: false, dragging: false });
-
-    var delete_delay = 0;
-    if (this.callback) {
-      this.callback(this.data);
-    } else {
-      if (this.clone) {
-        this.clone.style.transition = 'transform 0.2s';
-        this.clone.style.transform =
-          'translateX(' +
-          this.current_node_initial_position[0] +
-          'px) translateY(' +
-          this.current_node_initial_position[1] +
-          'px)';
-      }
-      delete_delay = 200;
-    }
-
-    setTimeout(() => {
-      if (this.clone) {
-        try {
-          this.container.removeChild(this.clone);
-        } catch (e) {}
-      }
-      if (this.current_react_draggable)
-        this.current_react_draggable.setState({ hide_original: false });
-      if (this.props.parentClassOnDrag) {
-        this.props.parentClassOnDrag.split(' ').forEach(c => {
-          this.container.classList.remove(c);
-        });
-      }
-    }, delete_delay);
-
-    this.data = {};
-  }
-  move(evt) {
-    if (!this.data) {
-      return;
-    }
-
-    var deltaX = evt.clientX - this.drag_initial_point[0];
-    var deltaY = evt.clientY - this.drag_initial_point[1];
-
-    if (
-      !this.clone_created &&
-      Math.max(Math.abs(deltaX), Math.abs(deltaY)) < (this.props.minMove || 10)
-    ) {
-      return;
-    }
-
-    if (this.drag) {
-      if (!this.clone_created) {
-        var html = this.current_node.outerHTML;
-        var div = document.createElement('div');
-        div.classList.add('draggable_clone');
-        div.innerHTML = html.trim();
-        div.firstChild.classList.remove('dragging_opacity');
-        div.firstChild.classList.remove('fade_in');
-        div.firstChild.classList.remove('is_selected');
-
-        div.style.width = this.current_node_initial_position[2] + 'px';
-        div.style.height = this.current_node_initial_position[3] + 'px';
-
-        this.clone = div;
-
-        if (this.selected_number > 1) {
-          var div_number = document.createElement('div');
-          div_number.classList.add('draggable_number');
-          div_number.innerHTML = this.selected_number;
-          this.clone.appendChild(div_number);
-        }
-
-        this.container.appendChild(this.clone);
-        this.clone_created = true;
-
-        if (this.props.parentClassOnDrag) {
-          this.props.parentClassOnDrag.split(' ').forEach(c => {
-            this.container.classList.add(c);
-          });
-        }
-
-        if (
-          this.current_react_draggable &&
-          this.current_react_draggable.props &&
-          this.current_react_draggable.props.onDragStart
-        ) {
-          this.current_react_draggable.props.onDragStart(evt);
-        }
-
-        this.dragging = true;
-        if (this.current_react_draggable)
-          this.current_react_draggable.setState({ dragging: true, hide_original: true });
-      }
-
-      document.body.classList.add('dragging');
-      document.body.classList.add('drag_' + this.data.type);
-      this.clone.style.transform =
-        'translateX(' +
-        (deltaX + this.current_node_initial_position[0]) +
-        'px) translateY(' +
-        (deltaY + this.current_node_initial_position[1]) +
-        'px)';
-    }
-  }
-}
-
-const service = new DraggableManager();
-export default service;
diff --git a/tdrive/frontend/src/app/components/draggable/draggable.scss b/tdrive/frontend/src/app/components/draggable/draggable.scss
deleted file mode 100755
index 77d2d039..00000000
--- a/tdrive/frontend/src/app/components/draggable/draggable.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.draggable {
-  .js-drag-handler {
-    cursor: grab;
-    width: 100%;
-    min-height: 16px;
-  }
-}
-
-.dragging {
-  cursor: grabbing !important;
-}
-
-.draggable_clone {
-  position: absolute;
-  z-index: 1000;
-  left: 0px;
-  top: 0px;
-  pointer-events: none;
-
-  & > * {
-    opacity: 0.5;
-  }
-
-  .draggable_number {
-    opacity: 1;
-    position: absolute;
-    right: -10px;
-    bottom: -10px;
-    background: #fff;
-    color: var(--primary);
-    font-size: 16px;
-    width: 40px;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    border-radius: 50%;
-    box-shadow: var(--box-shadow-base);
-  }
-}
-
-.dragging_opacity {
-  //opacity: 0.5;
-}
-
-.droppable_zone {
-  background: #f2f2f200;
-  margin: 0px;
-  border-radius: var(--border-radius-base);
-  transition: margin 0.2s, border 0.2s;
-  border: 0px dashed #ffffff00;
-
-  .empty {
-    border-radius: var(--border-radius-base);
-    background: #ffffff;
-    padding: 0px;
-    text-align: center;
-    color: #00000088;
-    margin: 0px;
-    opacity: 0;
-    overflow: hidden;
-    max-height: 0px;
-    transition: margin 0.2s, opacity 0.2s, height 0.2s, padding 0.2s, max-height 0.2s;
-  }
-}
-
-.dragging.drag_channel .droppable_zone.for_channel,
-.dragging.drag_message .droppable_zone.for_message {
-  border: 2px dashed #f2f2f2;
-  margin: 10px 0px;
-
-  .empty {
-    padding: 10px;
-    opacity: 1;
-    max-height: 40px;
-    .m-icon-small {
-      vertical-align: bottom;
-    }
-  }
-
-  &:hover {
-    border: 2px dashed #eaeaea;
-    background: #f2f2f2;
-    .empty {
-      background: #f2f2f2;
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/draggable/draggable.tsx b/tdrive/frontend/src/app/components/draggable/draggable.tsx
deleted file mode 100755
index 9bf5234e..00000000
--- a/tdrive/frontend/src/app/components/draggable/draggable.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// eslint-disable-next-line @typescript-eslint/no-use-before-define
-import React from 'react';
-import './draggable.scss';
-import DraggableManager from './draggable-manager.js';
-import classNames from 'classnames';
-
-type PropsType = { [key: string]: any };
-
-type StateType = { [key: string]: any };
-
-export default class Draggable extends React.Component<PropsType, StateType> {
-  node: HTMLDivElement | null | undefined;
-
-  render() {
-    return (
-      <div
-        className={classNames(
-          { draggable: !this.props?.deactivated, dragging_opacity: this.state?.hide_original },
-          this.props.className,
-        )}
-        ref={node => {
-          this.node = node;
-          if (this.props.refDraggable) {
-            this.props.refDraggable(node);
-          }
-        }}
-        onClick={this.props.onClick}
-        onMouseDown={evt => {
-          !this.props?.deactivated && DraggableManager.start(evt, this.node, this);
-        }}
-        onMouseUp={evt => {
-          !this.props?.deactivated && DraggableManager.end(evt, this.node, this);
-        }}
-        onMouseOver={this.props.onMouseOver}
-        onMouseOut={this.props.onMouseOut}
-        onDoubleClick={this.props.onDoubleClick}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/draggable/droppable-zone.jsx b/tdrive/frontend/src/app/components/draggable/droppable-zone.jsx
deleted file mode 100755
index a80b8b05..00000000
--- a/tdrive/frontend/src/app/components/draggable/droppable-zone.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-
-import DraggableManager from './draggable-manager.js';
-import Number from 'app/features/global/utils/Numbers';
-import './draggable.scss';
-
-export default class DroppableZone extends Component {
-  constructor() {
-    super();
-    this.unique_drop_key = Number.unid();
-    this.longOverTimeout = '';
-  }
-  onDrop(data) {
-    if (!data) {
-      return;
-    }
-    if (this.props.types && data.type) {
-      if (this.props.types.indexOf(data.type) < 0) {
-        return;
-      }
-    }
-    if (this.props.onDrop) {
-      this.props.onDrop(data);
-    }
-  }
-  componentWillUnmount() {
-    DraggableManager.removeDropCallback(this.unique_drop_key);
-    clearTimeout(this.longOverTimeout);
-  }
-  onEnter() {
-    if (DraggableManager.drag) {
-      this.longOverTimeout = setTimeout(() => {
-        if (DraggableManager.drag) {
-          if (this.props.onClick && !this.props.disableLongOver) {
-            this.props.onClick();
-          }
-          if (this.props.onLongOver) {
-            this.props.onLongOver();
-          }
-        }
-      }, 1500);
-      DraggableManager.setDropCallback(this.unique_drop_key, d => this.onDrop(d));
-    }
-  }
-  onLeave() {
-    DraggableManager.removeDropCallback(this.unique_drop_key);
-    clearTimeout(this.longOverTimeout);
-  }
-  render() {
-    return (
-      <div
-        className={this.props.className}
-        style={this.props.style}
-        onClick={this.props.onClick}
-        onMouseEnter={() => {
-          if (!this.props.deactivated) {
-            this.onEnter();
-          }
-        }}
-        onMouseLeave={() => {
-          if (!this.props.deactivated) {
-            this.onLeave();
-          }
-        }}
-      >
-        {this.props.children}
-        {!this.props.children && !this.props.deactivated && (
-          <div className="empty">{this.props.empty || ''}</div>
-        )}
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/directory.jsx b/tdrive/frontend/src/app/components/drive/directory.jsx
deleted file mode 100755
index b07c0165..00000000
--- a/tdrive/frontend/src/app/components/drive/directory.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import DriveElement from './drive-element.jsx';
-import UIDirectory from './ui/directory.jsx';
-import Loader from 'components/loader/loader.jsx';
-
-import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
-import Draggable from 'components/draggable/draggable';
-import DroppableZone from 'components/draggable/droppable-zone.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import './drive.scss';
-
-export default class Directory extends DriveElement {
-  constructor(props) {
-    super();
-    this.props = props;
-    this.state = {
-      loading: true,
-    };
-  }
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.state.loading) {
-      setTimeout(() => {
-        this.setState({ loading: false });
-      }, 4000);
-    }
-  }
-  render() {
-    if (!this.state.element || !this.state.element.front_id) {
-      return (
-        <div className="directory mini" style={{ textAlign: 'center' }}>
-          {this.state.loading && <Loader color="#CCC" className="file_loader" />}
-          {!this.state.loading && (
-            <span className="text" style={{ opacity: 0.5 }}>
-              {Languages.t(
-                'components.drive.navigators.directory_not_found',
-                [],
-                'Directory not found.',
-              )}
-            </span>
-          )}
-        </div>
-      );
-    } else {
-      this.state.loading = false;
-    }
-
-    if (this.props.hide) {
-      return '';
-    }
-
-    return (
-      <DroppableZone
-        types={['file']}
-        onDrop={data => this.dropFile(data)}
-        onLongOver={this.props.onClick}
-        className="directory_drop_zone"
-      >
-        <Draggable
-          style={this.props.style}
-          className={
-            'js-drive-multi-selector-selectable fade_in directory ' +
-            (this.state.selected ? 'is_selected ' : '') +
-            this.props.className
-          }
-          deactivated={
-            (this.state.element.is_directory && this.state.element.application_id) ||
-            WorkspaceUserRights.isNotConnected()
-          }
-          refDraggable={node => (this.node = node)}
-          onClick={evt => {
-            this.clickElement(evt);
-          }}
-          onDoubleClick={this.props.onDoubleClick}
-          parentClassOnDrag="grid"
-          onDragStart={evt => {
-            this.dragElement(evt);
-          }}
-          minMove={10}
-          data={{ type: 'file', selection_type: this.props.selectionType, data: this.props.data }}
-        >
-          <UIDirectory data={this.state.element} menu={this.common_menu} details={true} />
-        </Draggable>
-      </DroppableZone>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/drive-element.jsx b/tdrive/frontend/src/app/components/drive/drive-element.jsx
deleted file mode 100755
index b8d49e90..00000000
--- a/tdrive/frontend/src/app/components/drive/drive-element.jsx
+++ /dev/null
@@ -1,645 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/no-direct-mutation-state */
-import React, { useState } from 'react';
-
-import SelectionsManager from 'app/deprecated/SelectionsManager/SelectionsManager.js';
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import MenuManager from 'app/components/menus/menus-manager.jsx';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import FilePicker from 'components/drive/file-picker/file-picker.jsx';
-import Button from 'components/buttons/button.jsx';
-import Input from 'components/inputs/input.jsx';
-import VersionDetails from './version-details.jsx';
-import WorkspacesApps from 'app/deprecated/workspaces/workspaces_apps.jsx';
-import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board.jsx';
-import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
-import MediumPopupManager from 'app/components/modal/modal-manager';
-import Languages from 'app/features/global/services/languages-service';
-import TagPicker from 'components/tag-picker/tag-picker.jsx';
-import RouterServices from 'app/features/router/services/router-service';
-import { getAsFrontUrl } from 'app/features/global/utils/URLUtils';
-import FeatureTogglesService, {
-  FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
-import ModalManager from 'app/components/modal/modal-manager';
-import LockedOnlyOfficePopup from 'app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup';
-
-const RenameInput = props => {
-  const [value, setValue] = useState(props.value);
-  return (
-    <div>
-      <div className="menu-buttons">
-        <Input
-          onEnter={() => {
-            if ((value || '').trim().length > 0) {
-              props.rename(value);
-            }
-          }}
-          className="full_width bottom-margin"
-          onEchap={() => {
-            MenuManager.closeMenu();
-          }}
-          autoFocus
-          value={value}
-          onChange={evt => setValue(evt.target.value)}
-        />
-      </div>
-      <div className="menu-buttons">
-        <Button
-          disabled={(value || '').trim().length <= 0}
-          type="button"
-          value={Languages.t('general.save', [], 'Enregistrer')}
-          onClick={() => {
-            props.rename(value);
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-const PublicSharing = props => {
-  Collections.get('drive').useListener(useState);
-  const element = Collections.get('drive').find(props?.id);
-  if (!element) {
-    return <div />;
-  }
-  const sharedUrl = RouterServices.generateRouteFromState({
-    workspaceId: element.workspace_id,
-    documentId: element?.id,
-    appName: 'drive',
-    shared: true,
-    token: (element.acces_info || {}).token,
-  });
-  return (
-    <div>
-      {(element.acces_info || {}).token && (
-        <div>
-          <InputWithClipBoard
-            className={'bottom-margin full_width'}
-            value={getAsFrontUrl(sharedUrl)}
-            disabled={false}
-          />
-          <br />
-          <br />
-          <Button
-            className="danger"
-            onClick={() => {
-              AlertManager.confirm(() => {
-                DriveService.updateAccess(
-                  element,
-                  { public_access: false },
-                  props.driveCollectionKey,
-                );
-              });
-            }}
-            value={Languages.t(
-              'components.drive.right_preview.suppress_link',
-              [],
-              'Supprimer le lien',
-            )}
-          />
-        </div>
-      )}
-      {!(element.acces_info || {}).token && (
-        <div>
-          <Button
-            onClick={() => {
-              DriveService.updateAccess(element, { public_access: true }, props.driveCollectionKey);
-            }}
-            value={Languages.t(
-              'components.drive.right_preview.create_link',
-              [],
-              "Créer un lien d'accès",
-            )}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default class DriveElement extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      selections_manager: SelectionsManager,
-    };
-    SelectionsManager.addListener(this);
-
-    this.driveCollectionKey = '';
-
-    this.driveSelectorOver = this.driveSelectorOver.bind(this);
-    this.driveSelectorOut = this.driveSelectorOut.bind(this);
-    Collections.get('drive').addListener(this);
-  }
-  componentWillUnmount() {
-    SelectionsManager.removeListener(this);
-    Collections.get('drive').removeListener(this);
-    if (this.node) {
-      this.node.removeEventListener('drive_selector_over', this.driveSelectorOver);
-      this.node.removeEventListener('drive_selector_out', this.driveSelectorOut);
-    }
-
-    if (this.driveCollectionKey && this.driveCollectionKey != this.props.driveCollectionKey) {
-      Collections.get('drive').removeSource(this.driveCollectionKey);
-    }
-  }
-  UNSAFE_componentWillMount() {
-    if (this.props && this.props.data && this.props.data.front_id) {
-      Collections.get('drive').listenOnly(this, [this.props.data.front_id]);
-    }
-
-    this.state.element = DriveService.find(
-      Workspaces.currentWorkspaceId,
-      this.props.data?.id,
-      el => {
-        this.setState({ element: el });
-      },
-    );
-    this.updateMenu();
-  }
-  componentDidMount() {
-    if (this.node) {
-      this.node.addEventListener('drive_selector_over', this.driveSelectorOver);
-      this.node.addEventListener('drive_selector_out', this.driveSelectorOut);
-      this.node.setAttribute('drive_selector_unid', this.state.element?.id);
-    }
-
-    if (this.props && this.props.data && this.props.data?.id) {
-      SelectionsManager.listenOnly(this, [this.props.data?.id]);
-    }
-  }
-  driveSelectorOut() {
-    if (this.state.selected) this.setState({ selected: false });
-  }
-  driveSelectorOver() {
-    if (!this.state.selected) this.setState({ selected: true });
-  }
-
-  dropFile(data, directory) {
-    var destination = directory || this.props.data;
-
-    var objects = data.data?.id;
-    if (data.selection_type) {
-      var selected = Object.keys(SelectionsManager.selected_per_type[data.selection_type] || {});
-      if (selected && selected.length > 1) {
-        objects = selected;
-      }
-    }
-
-    DriveService.moveFile(
-      objects,
-      destination,
-      this.props.driveCollectionKey || this.driveCollectionKey,
-    );
-  }
-
-  dragElement(evt) {
-    SelectionsManager.setType(this.props.selectionType);
-    if (
-      !evt.shiftKey &&
-      !SelectionsManager.selected_per_type[this.props.selectionType][this.state.element?.id]
-    ) {
-      SelectionsManager.unselectAll();
-    }
-    SelectionsManager.select(this.state.element?.id);
-  }
-
-  clickElement(evt, previewonly = false) {
-    evt.stopPropagation();
-    evt.preventDefault();
-
-    if (this.props.notInDrive) {
-      if (this.props.onClick) {
-        this.props.onClick();
-      } else {
-        DriveService.viewDocument(this.state.element, previewonly);
-      }
-    } else {
-      SelectionsManager.setType(this.props.selectionType);
-      if (!evt.shiftKey) {
-        if (this.props.onClick) {
-          this.props.onClick();
-        } else {
-          DriveService.viewDocument(this.state.element, previewonly);
-        }
-
-        var oldStatus =
-          SelectionsManager.selected_per_type[this.props.selectionType][this.state.element?.id];
-        SelectionsManager.unselectAll();
-        if (oldStatus) {
-          SelectionsManager.unselect(this.state.element?.id);
-        } else {
-          SelectionsManager.select(this.state.element?.id);
-        }
-      } else {
-        SelectionsManager.toggle(this.state.element?.id);
-      }
-    }
-  }
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
-    nextState.element =
-      Collections.get('drive').find(this.props.data?.id) ||
-      DriveService.find(Workspaces.currentWorkspaceId, this.props.data?.id, el => {
-        this.setState({ element: el });
-      });
-    this.state.element = nextState.element;
-
-    if (
-      this.state.element &&
-      SelectionsManager.selected_per_type[nextProps.selectionType] &&
-      SelectionsManager.selected_per_type[nextProps.selectionType][this.state.element?.id] !=
-        this.old_selection_state
-    ) {
-      nextState.selected =
-        SelectionsManager.selected_per_type[nextProps.selectionType][nextProps.data?.id];
-      this.old_selection_state = nextState.selected;
-    }
-
-    if (this.state.element && !this.props.driveCollectionKey) {
-      this.channel = 'standalone_drive_collection_' + this.state.element.parent_id;
-      var parent_id = this.state.element.parent_id;
-      if (this.state.element.parent_id == 'detached') {
-        parent_id += '_' + this.state.element.workspace_id;
-      }
-      var old_collection_key = this.driveCollectionKey;
-      this.driveCollectionKey = DriveService.addSourceIfNotExist(
-        Workspaces.currentWorkspaceId,
-        this.channel,
-        parent_id,
-        'standalone',
-      );
-      if (old_collection_key && old_collection_key != this.driveCollectionKey) {
-        Collections.get('drive').removeSource(old_collection_key);
-      }
-    }
-
-    this.updateMenu();
-
-    return true;
-  }
-
-  moveTo(new_parent) {
-    DriveService.moveFile(
-      [this.state.element?.id],
-      new_parent,
-      this.props.driveCollectionKey || this.driveCollectionKey,
-    );
-  }
-
-  rename(new_name) {
-    if (!this.state.element.is_directory) {
-      new_name = new_name + '.' + this.state.element.extension;
-    }
-    this.state.element.name = new_name || this.state.element.name;
-    new_name = undefined;
-    MenuManager.closeMenu();
-    DriveService.save(this.state.element, this.props.driveCollectionKey || this.driveCollectionKey);
-  }
-
-  updateMenu() {
-    if (!this.state.element) {
-      this.common_menu = [];
-      return;
-    }
-
-    this.common_menu = [];
-
-    //-- All files
-    if (!this.state.element.is_directory) {
-      this.common_menu = [
-        {
-          type: 'menu',
-          text: Languages.t('components.drive.elements.see', [], 'Voir'),
-          onClick: () => {
-            DriveService.viewDocument(this.state.element);
-          },
-        },
-      ];
-
-      var candidates = DriveService.getEditorsCandidates(this.state.element);
-      var editor_candidate = candidates.preview_candidate || [];
-
-      if (editor_candidate.length > 0 && editor_candidate[0].app) {
-        this.common_menu.push({
-          type: 'menu',
-          text: Languages.t(
-            'scenes.apps.drive.viewer.edit_with_button',
-            [editor_candidate[0].app?.identity?.name],
-            'Editer avec $1',
-          ),
-          onClick: () => {
-            if (FeatureTogglesService.isActiveFeatureName(FeatureNames.EDIT_FILES)) {
-              var app = editor_candidate[0];
-              if (app.url && app.is_url_file) {
-                window.open(app.url);
-              }
-              app = app.app;
-              DriveService.getFileUrlForEdition(
-                app.display?.tdrive?.files?.editor?.edition_url,
-                app,
-                this.state.element?.id,
-                url => {
-                  window.open(url);
-                },
-              );
-            } else {
-              ModalManager.open(
-                <LockedOnlyOfficePopup />,
-                {
-                  position: 'center',
-                  size: { width: '600px' },
-                },
-                false,
-              );
-            }
-          },
-        });
-      }
-    }
-
-    this.common_menu.push({
-      type: 'menu',
-      text:
-        this.state.element.url && this.state.element.extension == 'url'
-          ? Languages.t('scenes.apps.drive.open_link', [], 'Open link')
-          : Languages.t('scenes.apps.drive.download_button', [], 'Télécharger'),
-      onClick: () => {
-        var link = DriveService.getLink(this.state.element, undefined, 1);
-        if (this.state.element.url) {
-          window.open(link, '_blank');
-        } else {
-          window.open(link);
-        }
-      },
-    });
-
-    if (!WorkspaceUserRights.isNotConnected()) {
-      //-- All files
-      if (this.state.element.detached) {
-        this.common_menu.push({
-          type: 'menu',
-          text: Languages.t('scenes.apps.drive.move_text2', [], 'Déplacer'),
-          submenu_replace: true,
-          submenu: [
-            {
-              type: 'react-element',
-              reactElement: () => (
-                <FilePicker
-                  mode={'select_location'}
-                  onChoose={res => this.moveTo(res)}
-                  initialDirectory={{ id: '' }}
-                />
-              ),
-            },
-          ],
-        });
-      }
-
-      if (!this.props.notInDrive && !this.state.element.detached) {
-        if (this.common_menu.length > 0) {
-          this.common_menu.push({ type: 'separator' });
-        }
-
-        if (!this.state.element.detached && this.state.element.parent_id) {
-          this.common_menu = this.common_menu.concat([
-            {
-              type: 'menu',
-              text: Languages.t('scenes.app.mainview.tabs.rename', [], 'Renommer'),
-              submenu_replace: true,
-              submenu: [
-                {
-                  type: 'title',
-                  text: Languages.t('scenes.app.mainview.tabs.rename', [], 'Renommer'),
-                },
-                {
-                  type: 'text',
-                  text:
-                    Languages.t('components.drive.elements.current_name', [], 'Nom actuel : ') +
-                    this.state.element.name,
-                },
-                {
-                  type: 'react-element',
-                  reactElement: () => (
-                    <RenameInput
-                      rename={name => {
-                        this.rename(name);
-                      }}
-                      value={
-                        this.state.element.is_directory
-                          ? this.state.element.name
-                          : this.state.element.name.replace(/\.[^.]*$/, '')
-                      }
-                    />
-                  ),
-                },
-              ],
-            },
-          ]);
-        }
-
-        if (!this.state.element.trash) {
-          this.common_menu = this.common_menu.concat([
-            {
-              type: 'menu',
-              text: Languages.t('scenes.apps.drive.right_preview.public', [], 'Accès public...'),
-              submenu_replace: true,
-              submenu: [
-                {
-                  type: 'title',
-                  text: Languages.t(
-                    'scenes.apps.drive.right_preview.public_link',
-                    [],
-                    "Lien d'accès public",
-                  ),
-                },
-                {
-                  //TODO menu react-element to refactor
-                  type: 'react-element',
-                  reactElement: () => (
-                    <PublicSharing
-                      id={this.state.element?.id}
-                      element={this.state.element}
-                      driveCollectionKey={this.props.driveCollectionKey || this.driveCollectionKey}
-                    />
-                  ),
-                },
-              ],
-            },
-          ]);
-
-          if (!(this.state.element.application_id && this.state.element.is_directory)) {
-            this.common_menu.push({
-              type: 'menu',
-              text: Languages.t('scenes.apps.drive.move_text', [], 'Déplacer'),
-              submenu_replace: true,
-              submenu: [
-                {
-                  type: 'react-element',
-                  reactElement: () => (
-                    <FilePicker
-                      mode={'select_location'}
-                      onChoose={res => this.moveTo(res)}
-                      initialDirectory={{ id: this.state.element.parent_id }}
-                    />
-                  ),
-                },
-              ],
-            });
-          }
-
-          if (WorkspaceUserRights.hasWorkspacePrivilege()) {
-            if (this.state.element.application_id && this.state.element.is_directory) {
-              this.common_menu.push({
-                type: 'menu',
-                text: Languages.t(
-                  'components.drive.elements.configurate_mod',
-                  [],
-                  'Configurer le module...',
-                ),
-                onClick: () => {
-                  var data = {
-                    drive_element: this.state.element,
-                  };
-                  WorkspacesApps.notifyApp(
-                    this.state.element.application_id,
-                    'configuration',
-                    'drive',
-                    data,
-                  );
-                },
-              });
-            }
-          }
-
-          if (!this.state.element.is_directory && !this.state.element.url) {
-            var versions_indicator = '';
-            if ((this.state.element.versions || {}).length > 1) {
-              versions_indicator = ' (' + (this.state.element.versions || {}).length + ')';
-            }
-            this.common_menu.push(
-              {
-                type: 'menu',
-                text:
-                  Languages.t(
-                    'components.drive.elements.manage_version',
-                    [],
-                    'Gérer les versions',
-                  ) +
-                  versions_indicator +
-                  '...',
-                onClick: () => {
-                  MediumPopupManager.open(<VersionDetails file={this.state.element} />, {
-                    size: { width: 600 },
-                  });
-                },
-              },
-              {
-                type: 'menu',
-                text: Languages.t(
-                  'scenes.apps.drive.navigators.navigator_labels.title',
-                  [],
-                  'Labels',
-                ),
-                submenu_replace: true,
-                submenu: [
-                  {
-                    type: 'title',
-                    text: Languages.t(
-                      'scenes.apps.drive.navigators.navigator_labels.title',
-                      [],
-                      'Labels',
-                    ),
-                  },
-                  {
-                    type: 'react-element',
-                    reactElement: level => (
-                      <div>
-                        <TagPicker
-                          menu_level={level}
-                          saveButton
-                          canCreate={true}
-                          value={this.state.element.tags || []}
-                          onChange={values => {
-                            this.state.element.tags = values;
-                            MenuManager.closeMenu();
-                            DriveService.save(
-                              this.state.element,
-                              this.props.driveCollectionKey || this.driveCollectionKey,
-                            );
-                          }}
-                        />
-                      </div>
-                    ),
-                  },
-                ],
-              },
-            );
-          }
-
-          if (this.props.attachmentMenu) {
-            this.common_menu.push(this.props.attachment_menu);
-          }
-
-          this.common_menu.push({ type: 'separator' });
-
-          this.common_menu.push({
-            type: 'menu',
-            text: Languages.t(
-              'scenes.apps.drive.right_preview.operations_delete',
-              [],
-              'Mettre à la corbeille',
-            ),
-            className: 'error',
-            onClick: () => {
-              DriveService.remove(
-                [this.props.data],
-                this.props.driveCollectionKey || this.driveCollectionKey,
-              );
-            },
-          });
-        } else {
-          this.common_menu.push({
-            type: 'menu',
-            text: Languages.t(
-              'scenes.apps.drive.right_preview.operations_restore',
-              [],
-              'Restaurer',
-            ),
-            onClick: () => {
-              DriveService.restore(
-                [this.props.data],
-                this.props.driveCollectionKey || this.driveCollectionKey,
-              );
-            },
-          });
-          this.common_menu.push({
-            type: 'menu',
-            text: Languages.t(
-              'scenes.apps.drive.remove_definitely_menu',
-              [],
-              'Supprimer définitivement',
-            ),
-            className: 'error',
-            onClick: () => {
-              AlertManager.confirm(() => {
-                DriveService.removeDefinitively(
-                  [this.props.data],
-                  this.props.driveCollectionKey || this.driveCollectionKey,
-                );
-              });
-            },
-          });
-        }
-      }
-
-      if (this.props.additionalMenu && this.props.additionalMenu.length > 0) {
-        this.common_menu.push({ type: 'separator' });
-        this.common_menu = this.common_menu.concat(this.props.additionalMenu);
-      }
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/drive-multi-selector.jsx b/tdrive/frontend/src/app/components/drive/drive-multi-selector.jsx
deleted file mode 100755
index 679c1310..00000000
--- a/tdrive/frontend/src/app/components/drive/drive-multi-selector.jsx
+++ /dev/null
@@ -1,278 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/no-direct-mutation-state */
-import React, { Component } from 'react';
-
-import './drive-multi-selector.scss';
-import SelectionsManager from 'app/deprecated/SelectionsManager/SelectionsManager.js';
-import './drive.scss';
-
-export default class DriveMultiSelector extends Component {
-  constructor() {
-    super();
-    this.state = {
-      start_drag: false,
-      dragging: true,
-    };
-    this.move = this.move.bind(this);
-    this.end = this.end.bind(this);
-    this.start = this.start.bind(this);
-    this.pause = this.pause.bind(this);
-    this.unpause = this.unpause.bind(this);
-
-    this.currentSelection = {};
-    this.currentSelectionCount = 0;
-
-    this.noMovementRefreshAnyway = setTimeout('');
-  }
-  componentDidMount() {
-    this.scroller_container = this.props.scroller;
-  }
-  componentWillUnmount() {
-    clearInterval(this.noMovementRefreshAnyway);
-
-    this.container.removeEventListener('mouseleave', this.pause);
-    this.container.removeEventListener('mouseenter', this.unpause);
-    document.removeEventListener('mousemove', this.move);
-    document.removeEventListener('mouseup', this.end);
-    document.body.classList.remove('no_select');
-  }
-  pause() {
-    clearInterval(this.noMovementRefreshAnyway);
-
-    this.setState({ dragging: false });
-  }
-  unpause() {
-    this.setState({ dragging: true });
-  }
-  end(evt) {
-    clearInterval(this.noMovementRefreshAnyway);
-
-    this.setState({ start_drag: false });
-
-    document.removeEventListener('mousemove', this.move);
-    document.removeEventListener('mouseup', this.end);
-    this.container.removeEventListener('mouseleave', this.pause);
-    this.container.removeEventListener('mouseenter', this.unpause);
-
-    document.body.classList.remove('no_select');
-
-    if (!this.did_drag) {
-      if (!evt.shiftKey && !this.did_start_drag == 0) {
-        SelectionsManager.unselectAll();
-      }
-      this.did_start_drag = false;
-      return;
-    }
-    this.did_drag = false;
-
-    Object.keys(this.currentSelection).forEach(id => {
-      if (this.currentSelection[id]) {
-        SelectionsManager.select(id);
-      } else {
-        SelectionsManager.unselect(id);
-      }
-    });
-    this.did_start_drag = false;
-
-    this.noMovementRefreshAnyway = setTimeout(() => {
-      this.state.left = 0;
-      this.state.right = 0;
-      this.state.width = 0;
-      this.state.height = 0;
-      this.setState({});
-    }, 500);
-  }
-  start(evt) {
-    this.did_drag = false;
-    this.did_start_drag = true;
-
-    this.element_position_cache = {};
-
-    SelectionsManager.setType(this.props.selectionType);
-
-    clearInterval(this.noMovementRefreshAnyway);
-    this.currentSelection = {};
-
-    this.state.start_drag = true;
-    this.state.dragging = true;
-    var rect = window.getBoundingClientRect(this.container);
-    rect.x = rect.x || rect.left;
-    rect.y = rect.y || rect.top;
-
-    this.drag_add = evt.nativeEvent.shiftKey;
-    this.drag_start = [
-      evt.clientX - rect.left,
-      evt.clientY - rect.top,
-      this.container.scrollLeft,
-      this.container.scrollTop,
-    ];
-
-    document.addEventListener('mousemove', this.move);
-    document.addEventListener('mouseup', this.end);
-    this.container.addEventListener('mouseleave', this.pause);
-    this.container.addEventListener('mouseenter', this.unpause);
-
-    document.body.classList.add('no_select');
-
-    rect = {};
-    rect.width = 0;
-    rect.height = 0;
-    rect.left = evt.clientX;
-    rect.top = evt.clientY;
-    this.autoSelect(rect);
-  }
-  move(evt) {
-    clearInterval(this.noMovementRefreshAnyway);
-    var rect = window.getBoundingClientRect(this.container);
-    rect.x = rect.x || rect.left;
-    rect.y = rect.y || rect.top;
-    var pos = [];
-
-    if (this.state.start_drag && this.state.dragging) {
-      this.did_drag = true;
-
-      pos = [evt.clientX - rect.left, evt.clientY - rect.top];
-
-      pos[0] = Math.min(pos[0], rect.width - 5);
-      pos[0] = Math.max(pos[0], 5);
-
-      pos[1] = Math.min(pos[1], rect.height - 5);
-      pos[1] = Math.max(pos[1], 5);
-
-      var w = this.drag_start[0] + this.drag_start[2] - (pos[0] + this.container.scrollLeft);
-      var h = this.drag_start[1] + this.drag_start[3] - (pos[1] + this.container.scrollTop);
-      var winv = w > 0;
-      var hinv = h > 0;
-      var selectorRect = {
-        width: Math.abs(w),
-        height: Math.abs(h),
-        left: this.drag_start[0] + this.drag_start[2] - Math.abs(winv ? w : 0),
-        top: this.drag_start[1] + this.drag_start[3] - Math.abs(hinv ? h : 0),
-      };
-      this.setState(selectorRect);
-
-      rect = window.getBoundingClientRect(this.selector);
-      rect.x = rect.x || rect.left;
-      rect.y = rect.y || rect.top;
-      this.autoSelect(rect);
-    }
-
-    pos = [evt.clientX, evt.clientY];
-
-    if (
-      rect.height + rect.top < pos[1] ||
-      rect.top > pos[1] ||
-      rect.width + rect.left < pos[0] ||
-      rect.left > pos[0]
-    ) {
-      var newScrollTop =
-        this.container.scrollTop +
-        (pos[1] - ((pos[1] > rect.height + rect.top ? rect.height : 0) + rect.top)) / 10;
-      var newScrollLeft =
-        this.container.scrollLeft +
-        (pos[0] - ((pos[0] > rect.width + rect.top ? rect.width : 0) + rect.left)) / 10;
-
-      if (this.container.scrollTop != newScrollTop || this.container.scrollLeft != newScrollLeft) {
-        this.container.scrollTop = newScrollTop;
-        this.container.scrollLeft = newScrollLeft;
-        this.state.dragging = true;
-
-        this.noMovementRefreshAnyway = setTimeout(() => {
-          this.move({
-            clientX: evt.clientX,
-            clientY: evt.clientY,
-          });
-        }, 50);
-      } else {
-        this.state.dragging = false;
-      }
-    }
-  }
-  autoSelect(rect) {
-    this.currentSelectionCount = 0;
-    var scroll_top = this.container.scrollTop;
-    if (this.old_scroll_top != scroll_top) {
-      this.element_position_cache = {};
-    }
-    this.old_scroll_top = scroll_top;
-
-    Array.from(this.container.getElementsByClassName('js-drive-multi-selector-selectable')).forEach(
-      element => {
-        var element_id = element.getAttribute('drive_selector_unid');
-
-        var selected = SelectionsManager.selected_per_type[this.props.selectionType][element_id];
-
-        var over = false;
-        var elementRect = {};
-
-        if (this.element_position_cache[element_id]) {
-          elementRect = JSON.parse(JSON.stringify(this.element_position_cache[element_id]));
-        } else {
-          var er = window.getBoundingClientRect(element);
-          er.x = er.x || er.left;
-          er.y = er.y || er.top;
-          elementRect = JSON.parse(JSON.stringify(er));
-          this.element_position_cache[element_id] = elementRect;
-        }
-
-        if (
-          !(
-            rect.left > elementRect.left + elementRect.width ||
-            elementRect.left > rect.left + rect.width ||
-            rect.top > elementRect.top + elementRect.height ||
-            elementRect.top > rect.top + rect.height
-          )
-        ) {
-          over = true;
-        }
-
-        if (
-          (over && this.drag_add && selected) ||
-          (!over && this.drag_add && !selected) ||
-          (!over && !this.drag_add)
-        ) {
-          element.dispatchEvent(new Event('drive_selector_out'));
-          this.currentSelection[element_id] = false;
-        }
-        if (
-          (over && this.drag_add && !selected) ||
-          (over && !this.drag_add) ||
-          (!over && this.drag_add && selected)
-        ) {
-          element.dispatchEvent(new Event('drive_selector_over'));
-          this.currentSelection[element_id] = true;
-          this.currentSelectionCount++;
-        }
-      },
-    );
-  }
-  render() {
-    return (
-      <div
-        onMouseDown={evt => {
-          this.start(evt);
-        }}
-        onMouseUp={evt => {
-          this.end(evt);
-        }}
-        ref={node => (this.container = node)}
-        style={this.props.style || {}}
-        className={'drive_multiselector'}
-      >
-        <div
-          ref={node => (this.selector = node)}
-          className={
-            'selectionRect ' + (this.state.start_drag && this.state.dragging ? 'visible ' : '')
-          }
-          style={{
-            width: this.state.width,
-            height: this.state.height,
-            left: this.state.left,
-            top: this.state.top,
-          }}
-        />
-        {this.props.children}
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/drive-multi-selector.scss b/tdrive/frontend/src/app/components/drive/drive-multi-selector.scss
deleted file mode 100755
index 4599207b..00000000
--- a/tdrive/frontend/src/app/components/drive/drive-multi-selector.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-body.no_select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.drive_multiselector {
-  position: relative;
-  overflow-x: visible;
-  overflow-y: scroll;
-}
-
-.selectionRect {
-  background: var(--primary);
-  z-index: 10;
-  border-radius: var(--border-radius-base);
-  position: absolute;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s;
-
-  &.visible {
-    opacity: 0.2;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/drive.scss b/tdrive/frontend/src/app/components/drive/drive.scss
deleted file mode 100755
index 433aef9a..00000000
--- a/tdrive/frontend/src/app/components/drive/drive.scss
+++ /dev/null
@@ -1,522 +0,0 @@
-/* Drive */
-
-.directory,
-.file {
-  .file_loader {
-    width: 32px;
-    height: 32px;
-    display: inline-block;
-    margin: auto;
-  }
-  .options {
-    padding-left: 5px;
-    display: none;
-  }
-
-  &:hover {
-    .options {
-      display: block;
-    }
-  }
-}
-
-.directory_drop_zone {
-  display: inline-block;
-}
-.directory {
-  background: #fff;
-  border: 1px solid var(--grey-background);
-  height: 50px;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  line-height: 32px;
-  margin-right: 16px;
-  margin-bottom: 16px;
-  border-radius: var(--border-radius-base);
-  font-size: 13px;
-  vertical-align: middle;
-  width: 200px;
-  padding: 8px;
-  font-weight: 500;
-  padding-right: 12px;
-  cursor: pointer;
-
-  .text {
-    font-size: 12px;
-    font-weight: bold;
-  }
-
-  &:hover:not(.notInDrive) {
-    box-shadow: 4px 4px 16px 0 #00000022;
-    border-color: #fff;
-  }
-
-  .options {
-    .m-icon-small {
-      font-size: 20px !important;
-    }
-  }
-
-  .app_icon {
-    width: 20px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 20px;
-    margin-top: 2px;
-  }
-
-  .icon {
-    font-size: 14px;
-    padding-right: 8px;
-    margin-left: 6px;
-    padding-top: 4px;
-
-    .m-icon-small {
-      color: var(--warning);
-      font-size: 20px !important;
-    }
-
-    i.icon-fontastic {
-      position: relative;
-      top: 8px;
-    }
-
-    .icon {
-      height: 30px;
-      background-size: 16px auto;
-      background-position: center left;
-      background-repeat: no-repeat;
-    }
-  }
-}
-
-.file {
-  overflow: hidden;
-  border: 1px solid var(--grey-background);
-  background: #fff;
-  height: 180px;
-  width: 216px;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: column;
-  line-height: 30px;
-  margin-right: 16px;
-  margin-bottom: 16px;
-  border-radius: var(--border-radius-base);
-  font-size: 13px;
-  vertical-align: middle;
-  position: relative;
-  cursor: pointer;
-
-  &:hover:not(.notInDrive) {
-    box-shadow: 4px 4px 16px 0 #00000022;
-    border-color: #fff;
-  }
-
-  .options {
-    .m-icon-small {
-      font-size: 20px !important;
-    }
-  }
-
-  &.mini {
-    height: 32px;
-
-    .data {
-      border-top: none;
-      .no-grid {
-        display: none;
-      }
-    }
-
-    .preview {
-      height: 32px;
-      background: #fff !important;
-
-      &:after {
-        content: none;
-      }
-    }
-  }
-
-  .preview {
-    width: 216px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-color: #f5f5f7;
-    flex: 1;
-
-    .tags_list {
-      position: absolute;
-      top: 4px;
-      padding-left: 8px;
-      line-height: 30px;
-    }
-
-    &.no_preview {
-      background-color: #f5f5f7;
-      background-repeat: no-repeat;
-      background-size: 64px;
-    }
-
-    /*&:after {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0.5) 100%);
-    }*/
-  }
-
-  .data {
-    display: flex;
-    flex-direction: row;
-    padding-left: 8px;
-    padding-right: 8px;
-    bottom: 0px;
-    color: var(--black);
-    height: 32px;
-    font-weight: 500;
-    width: 100%;
-    box-sizing: border-box;
-    border-top: 1px solid var(--grey-background);
-
-    .icon {
-      height: 20px;
-      width: 20px;
-      box-sizing: border-box;
-      border-radius: var(--border-radius-base);
-      margin-right: 6px;
-      margin-left: -3px;
-      margin-top: 5px;
-      color: #fff;
-      text-align: center;
-      background-size: 70%;
-      background-repeat: no-repeat;
-      background-position: center;
-
-      i.icon-fontastic {
-        position: relative;
-        top: 4px;
-      }
-    }
-  }
-}
-
-.draggable_clone {
-  .file,
-  .directory {
-    opacity: 1;
-    box-shadow: 4px 4px 16px 0 #00000022;
-    border-color: #fff;
-  }
-}
-
-.dragging.drag_file .drive_multiselector {
-  .file.is_selected,
-  .directory.is_selected {
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-}
-
-.file,
-.directory {
-  transition: opacity 0s;
-
-  &.notInDrive {
-    margin-bottom: 0px;
-  }
-
-  &.dragging_opacity {
-    opacity: 0;
-  }
-
-  &.is_selected {
-    background: var(--primary);
-    color: #fff;
-    box-shadow: none;
-
-    .file_type_icon svg,
-    .file_type_icon svg * {
-      fill: #fff;
-    }
-
-    &:hover:not(.notInDrive),
-    .data {
-      background-color: var(--primary);
-      color: #fff;
-    }
-  }
-
-  .text {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .created-by,
-  .last-modified {
-    width: 200px;
-  }
-
-  .size {
-    text-align: right;
-    width: 70px;
-  }
-
-  .last-modified {
-    text-align: right;
-    width: 120px;
-  }
-
-  .detail_preview_parent {
-    width: 32px;
-    margin-left: 12px;
-
-    .detail_preview {
-      width: 32px;
-      height: 32px;
-      border-radius: var(--border-radius-base);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-color: var(--primary-background);
-
-      &.no_preview {
-        background-size: 60%;
-      }
-    }
-  }
-}
-
-.drive_view.list {
-  .directory_drop_zone {
-    display: inherit;
-  }
-}
-
-.drive_view.list .directory,
-.drive_view.list .file {
-  margin-right: 0px;
-  margin-bottom: 0px;
-  border: 0;
-  border-bottom: 1px solid var(--grey-background);
-  border-top: 1px solid var(--grey-background);
-  border-radius: 2px;
-  width: 100%;
-  height: 64px;
-  padding-top: 16px;
-  color: var(--black);
-  margin-top: -1px;
-  padding-right: 12px;
-
-  &.exit-active,
-  &.enter-active {
-    margin-top: -1px !important;
-  }
-
-  .data {
-    border-top: 0px;
-    bottom: -1px;
-  }
-
-  .text {
-    font-size: 14px;
-  }
-
-  .options {
-    display: block;
-  }
-
-  &:hover:not(.notInDrive):not(.is_selected) {
-    box-shadow: none;
-    background: var(--primary-background);
-  }
-
-  &.is_selected {
-    background: var(--primary);
-    color: #fff;
-    box-shadow: none;
-  }
-}
-
-.drive_view.list .file .preview {
-  display: none;
-}
-
-.drive_view.list {
-  .rounded-btn {
-    margin-top: 10px;
-  }
-}
-
-.drive_view.grid {
-  .is_selected.file {
-    background: var(--primary);
-    color: #fff;
-    box-shadow: none;
-  }
-}
-
-.drive_view.grid .no-grid {
-  display: none;
-}
-.drive_view.list .no-list {
-  display: none;
-}
-
-.file_type_icon {
-  line-height: 38px;
-  width: 24px;
-
-  svg,
-  svg * {
-    fill: var(--primary);
-  }
-
-  &.link {
-    background-image: url('./icons/link.svg');
-  }
-
-  &.code {
-    background-image: url('./icons/code.svg');
-  }
-
-  &.document {
-    background-image: url('./icons/document.svg');
-  }
-
-  &.image {
-    background-image: url('./icons/image.svg');
-  }
-
-  &.pdf {
-    background-image: url('./icons/pdf.svg');
-  }
-
-  &.slides {
-    background-image: url('./icons/slides.svg');
-  }
-
-  &.sound, &.audio {
-    background-image: url('./icons/sound.svg');
-  }
-
-  &.spreadsheet {
-    background-image: url('./icons/spreadsheet.svg');
-  }
-
-  &.svg {
-    background-image: url('./icons/svg.svg');
-  }
-
-  &.video {
-    background-image: url('./icons/video.svg');
-  }
-
-  &.archive {
-    background-image: url('./icons/archive.svg');
-  }
-
-  &.other {
-    background-image: url('./icons/file.svg');
-  }
-}
-
-.drive_view.list .file_type_icon {
-  line-height: 38px;
-  width: 34px;
-  text-align: center;
-}
-
-/* version details */
-.versionDetails {
-  min-height: 250px;
-
-  .text.no-more {
-    text-align: center;
-    width: 100%;
-    opacity: 0.5;
-    margin-top: 32px;
-    margin-bottom: 32px;
-  }
-
-  .version {
-    display: flex;
-    padding: 24px 0px;
-    border-bottom: solid 1px var(--grey-background);
-    .titleVersionDetails {
-      font-size: 24px;
-      color: var(--black);
-      font-weight: bold;
-      margin-bottom: 24px;
-    }
-    .info {
-      flex: 0.5;
-      margin-bottom: 8px;
-      .versionTitle {
-        font-size: 14px;
-        font-weight: bold;
-        color: var(--black);
-      }
-      .versionDate {
-        font-size: 14px;
-        color: var(--black);
-      }
-    }
-    .name {
-      flex: 0.5;
-      font-size: 14px;
-      line-height: 24px;
-      color: var(--black);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .more {
-    }
-  }
-}
-.footerVersionDetails {
-  display: flex;
-  .addVersion {
-    flex: 1;
-    .addVersionButton {
-      width: 100%;
-      height: 24px;
-      line-height: 24px;
-    }
-    .addVersionButton:hover {
-      cursor: pointer;
-      opacity: 0.8;
-    }
-    .icon {
-      display: inline-block;
-      width: 24px;
-      height: 24px;
-      .iconWithBackground {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-        background-color: var(--grey-background);
-        border-radius: var(--border-radius-base);
-      }
-    }
-    .footerTitle {
-      margin-left: 8px;
-      display: inline-block;
-      font-size: 14px;
-      font-weight: bold;
-      color: var(--black);
-      .addVersionButton:hover {
-        cursor: pointer;
-        opacity: 0.8;
-      }
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/file-picker/file-picker.jsx b/tdrive/frontend/src/app/components/drive/file-picker/file-picker.jsx
deleted file mode 100755
index a7c40b39..00000000
--- a/tdrive/frontend/src/app/components/drive/file-picker/file-picker.jsx
+++ /dev/null
@@ -1,213 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import UIFile from '../ui/file.jsx';
-import UIDirectory from '../ui/directory.jsx';
-import LeftIcon from '@material-ui/icons/KeyboardArrowLeftOutlined';
-import NewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined';
-import Menu from 'components/menus/menu.jsx';
-import Button from 'components/buttons/button.jsx';
-import Input from 'components/inputs/input.jsx';
-import './file-picker.scss';
-
-export default class FilePicker extends Component {
-  constructor() {
-    super();
-    this.drive_channel = 'file_picker_' + Workspaces.currentWorkspaceId;
-    this.drive_collection_key = this.drive_channel;
-
-    this.state = {
-      i18n: Languages,
-      drive_repository: Collections.get('drive'),
-      app_drive_service: DriveService,
-      current_selection: {},
-      creating_folder: false,
-    };
-
-    Languages.addListener(this);
-    Collections.get('drive').addListener(this);
-    DriveService.addListener(this);
-  }
-  componentWillUnmount() {
-    Languages.removeListener(this);
-    Collections.get('drive').removeListener(this);
-    DriveService.removeListener(this);
-
-    if (this.drive_channel) {
-      Collections.get('drive').removeSource(
-        this.state.app_drive_service.current_collection_key_channels[this.drive_channel],
-      );
-    }
-  }
-  componentDidMount() {
-    this.changeCurrentDirectory({ id: (this.props.initialDirectory || {}).id || '' });
-  }
-  clickOnFile(file) {
-    if (this.props.mode == 'select_file') {
-      this.setState({ current_selection: file });
-    }
-  }
-  changeCurrentDirectory(directory) {
-    if (this.props.mode == 'select_file') {
-      this.setState({ current_selection: {} });
-    }
-    if (this.props.mode == 'select_location') {
-      this.setState({ current_selection: directory });
-    }
-    DriveService.changeCurrentDirectory(this.drive_channel, directory);
-  }
-  submit() {
-    var result = null;
-    if (this.props.mode == 'select_file') {
-      result = this.state.current_selection;
-    }
-    if (this.props.mode == 'select_location') {
-      result = this.state.app_drive_service.current_directory_channels[this.drive_channel] || {};
-    }
-    Menu.closeAll();
-    if (this.props.onChoose) this.props.onChoose(result);
-  }
-  render() {
-    var workspace_id = Workspaces.currentWorkspaceId;
-    var directory =
-      this.state.app_drive_service.current_directory_channels[this.drive_channel] || {};
-    var directory_id = directory.id;
-
-    var filter_dir = {
-      workspace_id: workspace_id,
-      parent_id: directory_id,
-      is_directory: true,
-      trash: false,
-    };
-    var directories = this.state.drive_repository
-      .findBy(filter_dir)
-      .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-
-    var filter_files = {
-      workspace_id: workspace_id,
-      parent_id: directory_id,
-      is_directory: false,
-      trash: false,
-    };
-    var files = this.state.drive_repository
-      .findBy(filter_files)
-      .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
-
-    var allow_go_parent = true;
-    var drive_channel = null;
-    if (!drive_channel && (this.props.initialDirectory || {}).id == directory_id) {
-      allow_go_parent = false;
-    }
-
-    return (
-      <div className="filepicker">
-        <div className="title">
-          {directory.parent_id && allow_go_parent && (
-            <LeftIcon
-              className="m-icon-small getback"
-              onClick={() => {
-                this.changeCurrentDirectory({ id: directory.parent_id });
-              }}
-            />
-          )}{' '}
-          {directory.parent_id
-            ? directory.name
-            : Languages.t('app.identity?.name.tdrive_drive', [], 'Documents')}
-        </div>
-        <div className="drive_view list">
-          {directories.map((item, index) => (
-            <div
-              key={'file_picker_dirs_' + index}
-              className="directory"
-              onClick={() => DriveService.changeCurrentDirectory(this.drive_channel, item)}
-            >
-              <UIDirectory data={item} />
-            </div>
-          ))}
-          {files.map((item, index) => (
-            <div
-              key={'file_picker_files_' + index}
-              className={
-                'file ' +
-                (this.props.mode == 'select_location' ? 'disabled ' : '') +
-                (this.state.current_selection.id == item.id ? 'is_selected ' : '')
-              }
-              onClick={() => this.clickOnFile(item)}
-            >
-              <UIFile data={item} />
-            </div>
-          ))}
-        </div>
-
-        {this.state.creating_folder && (
-          <div className="menu-buttons" style={{ display: 'flex' }}>
-            <Button
-              className="button small secondary"
-              style={{ float: 'left' }}
-              onClick={() => this.setState({ creating_folder: false })}
-            >
-              <LeftIcon className="m-icon-small" />
-            </Button>
-            <Input
-              style={{ margin: 0, marginLeft: 5, flex: 1 }}
-              className="small"
-              refInput={node => (node ? node.focus() : '')}
-              type="text"
-              defaultValue={''}
-              placeholder={Languages.t(
-                'scenes.apps.drive.navigators.navigator_content.directory_name',
-                [],
-                'Nom du dossier',
-              )}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  DriveService.createDirectory(
-                    directory.workspace_id,
-                    e.target.value,
-                    directory,
-                    DriveService.current_collection_key_channels[this.drive_channel],
-                    res => {
-                      this.changeCurrentDirectory(res);
-                    },
-                  );
-                  this.setState({ creating_folder: false });
-                }
-              }}
-            />
-          </div>
-        )}
-        {!this.state.creating_folder && (
-          <div className="menu-buttons">
-            {!this.state.creating_folder && directory.workspace_id && (
-              <Button
-                className="button small secondary"
-                style={{ float: 'left' }}
-                onClick={() => this.setState({ creating_folder: true })}
-              >
-                <NewFolderIcon className="m-icon-small" />
-              </Button>
-            )}
-            {this.props.mode == 'select_location' && (
-              <Button
-                className="small"
-                value={Languages.t('components.drive.moove_here', [], 'Déplacer ici')}
-                onClick={() => this.submit()}
-              />
-            )}
-            {this.props.mode == 'select_file' && this.state.current_selection.id && (
-              <Button
-                className="small"
-                value={Languages.t('scenes.app.taskpicker.select', [], 'Sélectionner')}
-                onClick={() => this.submit()}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/file-picker/file-picker.scss b/tdrive/frontend/src/app/components/drive/file-picker/file-picker.scss
deleted file mode 100755
index f3f2c1f2..00000000
--- a/tdrive/frontend/src/app/components/drive/file-picker/file-picker.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.filepicker {
-  margin: -5px 0;
-
-  .no-filepicker {
-    display: none;
-  }
-
-  .file_type_icon {
-    width: 20px;
-    margin-right: 4px;
-  }
-
-  .title {
-    background: #ffffff;
-    margin-bottom: 0px;
-    font-size: 16px;
-    color: #000;
-    line-height: 20px;
-    padding-bottom: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .getback {
-    background: var(--grey-background);
-    border-radius: var(--border-radius-base);
-    width: 20px;
-    height: 20px;
-    vertical-align: top;
-    margin-right: 5px;
-    margin-left: 0px;
-    cursor: pointer;
-    &:hover {
-      background: #f0f0f0;
-    }
-  }
-
-  .menu-buttons {
-    text-align: right;
-    padding: 8px 0px;
-  }
-
-  .drive_view.list {
-    height: 150px;
-    overflow: auto;
-    width: 100%;
-
-    .file .icon {
-      width: 20px;
-      background-size: 60%;
-    }
-
-    .directory .icon {
-      width: 24px;
-    }
-
-    .directory .app_icon {
-      height: 16px;
-    }
-
-    .file,
-    .directory {
-      height: 40px;
-      padding-top: 4px;
-
-      .text {
-        line-height: 30px;
-        margin-left: 6px;
-      }
-
-      .icon {
-        padding-top: 3px;
-        padding-right: 0px;
-        padding-left: 5px;
-      }
-
-      &.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-      }
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/file.tsx b/tdrive/frontend/src/app/components/drive/file.tsx
deleted file mode 100755
index 8c036f01..00000000
--- a/tdrive/frontend/src/app/components/drive/file.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import Draggable from 'components/draggable/draggable';
-import DriveElement from './drive-element.jsx';
-import './drive.scss';
-import UIFile from './ui/file.jsx';
-import Loader from 'components/loader/loader.jsx';
-import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
-import Languages from 'app/features/global/services/languages-service';
-
-type StateType = any;
-
-type NodeType = any;
-
-export default class File extends DriveElement {
-  node: NodeType;
-  state: StateType;
-  constructor() {
-    super();
-    this.state = {
-      loading: true,
-    };
-  }
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.state.loading) {
-      setTimeout(() => {
-        this.setState({ loading: false });
-      }, 4000);
-    }
-  }
-  render() {
-    if (!this.state.element || !this.state.element.front_id) {
-      return (
-        <div
-          className={'file mini ' + (this.props.notInDrive ? 'notInDrive ' : '')}
-          style={{ textAlign: 'center' }}
-        >
-          {this.state.loading && <Loader color="#CCC" className="file_loader" />}
-          {!this.state.loading && (
-            <span className="text" style={{ opacity: 0.5 }}>
-              {Languages.t('scenes.apps.drive.preview_bloc.error_file', [], 'File not found.')}
-            </span>
-          )}
-        </div>
-      );
-    } else {
-      this.state.loading = false;
-    }
-
-    if (this.props.hide) {
-      return '';
-    }
-
-    const mini = (!this.state.element.has_preview && this.props.notInDrive) || this.props.mini;
-    return (
-      <Draggable
-        style={this.props.style}
-        className={
-          'js-drive-multi-selector-selectable file ' +
-          (this.state.selected ? 'is_selected ' : '') +
-          (this.props.notInDrive ? 'notInDrive ' : '') +
-          (mini ? 'mini ' : '') +
-          this.props.className
-        }
-        refDraggable={(node: NodeType) => (this.node = node)}
-        onClick={(evt: any) => this.clickElement(evt, this.props.previewonly)}
-        onDoubleClick={this.props.onDoubleClick}
-        parentClassOnDrag="drive_view list"
-        onDragStart={(evt: any) => {
-          this.dragElement(evt);
-        }}
-        minMove={10}
-        data={{ type: 'file', selection_type: this.props.selectionType, data: this.props.data }}
-        deactivated={WorkspaceUserRights.isNotConnected() || this.props.notInDrive}
-      >
-        <UIFile
-          data={this.state.element}
-          menu={!this.props.removeIcon && this.common_menu}
-          details={true}
-          removeIcon={this.props.removeIcon}
-          removeOnClick={(e: any) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.props.removeOnClick();
-          }}
-        />
-      </Draggable>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/icons/archive.jsx b/tdrive/frontend/src/app/components/drive/icons/archive.jsx
deleted file mode 100755
index 44e4e817..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/archive.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 1792 1792"
-    {...props}
-  >
-    <path
-      scale={((props.scale || 1) * 0.75) / 56}
-      fill={props.fill || '#FFF'}
-      d="M768 384V256H640v128h128zm128 128V384H768v128h128zM768 640V512H640v128h128zm128 128V640H768v128h128zm700-388c18.667 18.667 34.667 44 48 76s20 61.333 20 88v1152c0 26.667-9.333 49.333-28 68s-41.333 28-68 28H224c-26.667 0-49.333-9.333-68-28s-28-41.333-28-68V96c0-26.667 9.333-49.333 28-68s41.333-28 68-28h896c26.667 0 56 6.667 88 20s57.333 29.333 76 48l312 312zm-444-244v376h376c-6.667-19.333-14-33-22-41l-313-313c-8-8-21.667-15.333-41-22zm384 1528V640h-416c-26.667 0-49.333-9.333-68-28s-28-41.333-28-68V128H896v128H768V128H256v1536h1280zM909 943l107 349c5.333 18 8 35.333 8 52 0 55.333-24.167 101.167-72.5 137.5S842 1536 768 1536s-135.167-18.167-183.5-54.5S512 1399.333 512 1344c0-16.667 2.667-34 8-52 14-42 54-174 120-396V768h128v128h79c14.667 0 27.667 4.333 39 13s19 20 23 34zm-141 465c35.333 0 65.5-6.333 90.5-19s37.5-27.667 37.5-45-12.5-32.333-37.5-45-55.167-19-90.5-19-65.5 6.333-90.5 19-37.5 27.667-37.5 45 12.5 32.333 37.5 45 55.167 19 90.5 19z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/archive.svg b/tdrive/frontend/src/app/components/drive/icons/archive.svg
deleted file mode 100755
index af396f1f..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/archive.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="1792px" height="1792px" viewBox="0 0 1792 1792" enable-background="new 0 0 1792 1792" xml:space="preserve">
-<path fill="#FFFFFF" d="M768,384V256H640v128H768z M896,512V384H768v128H896z M768,640V512H640v128H768z M896,768V640H768v128H896z
-	 M1596,380c18.667,18.667,34.667,44,48,76s20,61.333,20,88v1152c0,26.667-9.333,49.333-28,68s-41.333,28-68,28H224
-	c-26.667,0-49.333-9.333-68-28s-28-41.333-28-68V96c0-26.667,9.333-49.333,28-68s41.333-28,68-28h896c26.667,0,56,6.667,88,20
-	s57.333,29.333,76,48L1596,380z M1152,136v376h376c-6.667-19.333-14-33-22-41l-313-313C1185,150,1171.333,142.667,1152,136z
-	 M1536,1664V640h-416c-26.667,0-49.333-9.333-68-28s-28-41.333-28-68V128H896v128H768V128H256v1536H1536z M909,943l107,349
-	c5.333,18,8,35.333,8,52c0,55.333-24.167,101.167-72.5,137.5S842,1536,768,1536s-135.167-18.167-183.5-54.5S512,1399.333,512,1344
-	c0-16.667,2.667-34,8-52c14-42,54-174,120-396V768h128v128h79c14.667,0,27.667,4.333,39,13S905,929,909,943z M768,1408
-	c35.333,0,65.5-6.333,90.5-19s37.5-27.667,37.5-45s-12.5-32.333-37.5-45s-55.167-19-90.5-19s-65.5,6.333-90.5,19
-	s-37.5,27.667-37.5,45s12.5,32.333,37.5,45S732.667,1408,768,1408z"/>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/code.jsx b/tdrive/frontend/src/app/components/drive/icons/code.jsx
deleted file mode 100755
index c83b6ec4..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/code.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M10.786 22.646l-.737.738a.462.462 0 0 1-.68 0L2.494 16.51a.461.461 0 0 1 0-.678l6.875-6.876a.472.472 0 0 1 .341-.147c.128 0 .24.05.339.147l.737.738a.472.472 0 0 1 .147.341c0 .127-.05.239-.147.339l-5.798 5.798 5.798 5.798c.097.098.147.212.147.339s-.05.24-.147.337zm8.718-15.741l-5.502 19.048a.472.472 0 0 1-.229.287.415.415 0 0 1-.346.039l-.915-.254a.463.463 0 0 1-.288-.227.437.437 0 0 1-.037-.36l5.503-19.05a.495.495 0 0 1 .227-.288.417.417 0 0 1 .348-.036l.917.25c.128.04.223.115.288.228a.447.447 0 0 1 .034.363zM29.2 16.51l-6.879 6.875c-.097.102-.212.149-.339.149s-.241-.048-.338-.149l-.738-.738a.47.47 0 0 1-.146-.339.47.47 0 0 1 .146-.339l5.798-5.798-5.798-5.798a.474.474 0 0 1-.146-.339c0-.129.049-.242.146-.341l.738-.738a.464.464 0 0 1 .677 0l6.879 6.876a.465.465 0 0 1 0 .679z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/code.svg b/tdrive/frontend/src/app/components/drive/icons/code.svg
deleted file mode 100755
index 4359143b..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/code.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<path fill="#FFFFFF" d="M10.786,22.646l-0.737,0.738c-0.1,0.102-0.211,0.149-0.339,0.149c-0.129,0-0.241-0.048-0.341-0.149
-	L2.494,16.51c-0.099-0.097-0.148-0.211-0.148-0.339c0-0.127,0.049-0.242,0.148-0.339l6.875-6.876c0.1-0.098,0.212-0.147,0.341-0.147
-	c0.128,0,0.24,0.05,0.339,0.147l0.737,0.738c0.097,0.099,0.147,0.211,0.147,0.341c0,0.127-0.05,0.239-0.147,0.339l-5.798,5.798
-	l5.798,5.798c0.097,0.098,0.147,0.212,0.147,0.339S10.883,22.549,10.786,22.646z M19.504,6.905l-5.502,19.048
-	c-0.039,0.127-0.115,0.225-0.229,0.287c-0.112,0.066-0.228,0.075-0.346,0.039l-0.915-0.254c-0.128-0.037-0.224-0.112-0.288-0.227
-	c-0.064-0.115-0.077-0.233-0.037-0.36l5.503-19.05c0.04-0.127,0.117-0.224,0.227-0.288c0.115-0.063,0.232-0.076,0.348-0.036
-	l0.917,0.25c0.128,0.04,0.223,0.115,0.288,0.228C19.531,6.657,19.546,6.778,19.504,6.905z M29.2,16.51l-6.879,6.875
-	c-0.097,0.102-0.212,0.149-0.339,0.149s-0.241-0.048-0.338-0.149l-0.738-0.738c-0.097-0.098-0.146-0.212-0.146-0.339
-	s0.049-0.241,0.146-0.339l5.798-5.798l-5.798-5.798c-0.097-0.1-0.146-0.212-0.146-0.339c0-0.129,0.049-0.242,0.146-0.341
-	l0.738-0.738c0.097-0.098,0.211-0.147,0.338-0.147s0.242,0.05,0.339,0.147l6.879,6.876c0.098,0.097,0.146,0.212,0.146,0.339
-	C29.346,16.298,29.298,16.413,29.2,16.51z"/>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/document.jsx b/tdrive/frontend/src/app/components/drive/icons/document.jsx
deleted file mode 100755
index 2db77ebc..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/document.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <g fill={props.fill || '#FFF'}>
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M29.159 6.189H2.839a1.34 1.34 0 0 1 0-2.679h26.32a1.34 1.34 0 1 1 0 2.679zM29.159 13.592H2.839a1.34 1.34 0 0 1 0-2.68h26.32a1.34 1.34 0 0 1 0 2.68zM29.159 20.995H2.839a1.34 1.34 0 0 1 0-2.678h26.32a1.34 1.34 0 1 1 0 2.678zM18.685 28.403H2.839c-.739 0-1.339-.598-1.339-1.338s.601-1.341 1.339-1.341h15.845c.74 0 1.34.601 1.34 1.341s-.599 1.338-1.339 1.338z"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/document.svg b/tdrive/frontend/src/app/components/drive/icons/document.svg
deleted file mode 100755
index 7160424e..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/document.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M29.159,6.189H2.839C2.101,6.189,1.5,5.589,1.5,4.849C1.5,4.11,2.101,3.51,2.839,3.51h26.32
-		c0.74,0,1.341,0.6,1.341,1.339C30.5,5.589,29.899,6.189,29.159,6.189z"/>
-	<path fill="#FFFFFF" d="M29.159,13.592H2.839c-0.739,0-1.339-0.6-1.339-1.339c0-0.74,0.601-1.341,1.339-1.341h26.32
-		c0.74,0,1.341,0.601,1.341,1.341C30.5,12.992,29.899,13.592,29.159,13.592z"/>
-	<path fill="#FFFFFF" d="M29.159,20.995H2.839c-0.739,0-1.339-0.601-1.339-1.34s0.601-1.338,1.339-1.338h26.32
-		c0.74,0,1.341,0.599,1.341,1.338S29.899,20.995,29.159,20.995z"/>
-	<path fill="#FFFFFF" d="M18.685,28.403H2.839c-0.739,0-1.339-0.598-1.339-1.338s0.601-1.341,1.339-1.341h15.845
-		c0.74,0,1.34,0.601,1.34,1.341S19.425,28.403,18.685,28.403z"/>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/file.jsx b/tdrive/frontend/src/app/components/drive/icons/file.jsx
deleted file mode 100755
index 46da903b..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/file.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 100 100"
-    {...props}
-  >
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M60 0H20C13.373 0 8 5.373 8 12v72c0 6.627 5.373 12 12 12h55.875C82.502 96 88 90.627 88 84V28L60 0zm0 11.178L76.709 28H60V11.178zM75.875 88H20c-2.206 0-4-1.794-4-4V12c0-2.206 1.794-4 4-4h32v28h28v48c0 2.168-1.889 4-4.125 4z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/file.svg b/tdrive/frontend/src/app/components/drive/icons/file.svg
deleted file mode 100755
index 8b32e854..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/file.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="file" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
-<path fill="#FFFFFF" d="M60,0H20C13.373,0,8,5.373,8,12v72c0,6.627,5.373,12,12,12h55.875C82.502,96,88,90.627,88,84V28
-	C84,24,66,6,60,0z M60,11.178L76.709,28H60V11.178z M75.875,88H20c-2.206,0-4-1.794-4-4V12c0-2.206,1.794-4,4-4h32v20v8h8h20v48
-	C80,86.168,78.111,88,75.875,88z"/>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/image.jsx b/tdrive/frontend/src/app/components/drive/icons/image.jsx
deleted file mode 100755
index ee544c5c..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/image.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 32 * 0.75}
-    height={(props.scale || 1) * 32 * 0.75}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <g fill={props.fill || '#FFF'}>
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M23.251 14.637a3.106 3.106 0 1 0-.002-6.212 3.106 3.106 0 0 0 .002 6.212z"
-      />
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M28.688 4.282H3.312c-1.01 0-1.812.822-1.812 1.831v21.194c0 1.008.802 1.831 1.812 1.831h25.376a1.82 1.82 0 0 0 1.812-1.831V6.113a1.819 1.819 0 0 0-1.812-1.831zm-6.673 12.796a1.116 1.116 0 0 0-.829-.402c-.328 0-.562.156-.829.37l-1.211 1.023c-.252.182-.452.303-.744.303-.278 0-.529-.102-.712-.263a8.251 8.251 0 0 1-.279-.268l-3.483-3.768a1.422 1.422 0 0 0-1.079-.485c-.434 0-.835.213-1.089.505l-8.187 9.88V7.11c.065-.441.409-.758.847-.758h23.154c.448 0 .81.329.837.776l.018 16.856-6.414-6.906z"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/image.svg b/tdrive/frontend/src/app/components/drive/icons/image.svg
deleted file mode 100755
index 477b7a5d..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/image.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M23.251,14.637c1.712,0,3.105-1.389,3.105-3.105c0-1.716-1.394-3.109-3.105-3.109
-		c-1.716,0-3.107,1.393-3.107,3.109C20.144,13.248,21.535,14.637,23.251,14.637z"/>
-	<path fill="#FFFFFF" d="M28.688,4.282H3.312C2.302,4.282,1.5,5.104,1.5,6.113v21.194c0,1.008,0.802,1.831,1.812,1.831h25.376
-		c1.007,0,1.812-0.823,1.812-1.831V6.113C30.5,5.104,29.695,4.282,28.688,4.282z M22.015,17.078
-		c-0.194-0.226-0.493-0.402-0.829-0.402c-0.328,0-0.562,0.156-0.829,0.37l-1.211,1.023c-0.252,0.182-0.452,0.303-0.744,0.303
-		c-0.278,0-0.529-0.102-0.712-0.263c-0.064-0.059-0.182-0.169-0.279-0.268l-3.483-3.768c-0.256-0.297-0.646-0.485-1.079-0.485
-		c-0.434,0-0.835,0.213-1.089,0.505l-8.187,9.88V7.11c0.065-0.441,0.409-0.758,0.847-0.758h23.154c0.448,0,0.81,0.329,0.837,0.776
-		l0.018,16.856L22.015,17.078z"/>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/link.jsx b/tdrive/frontend/src/app/components/drive/icons/link.jsx
deleted file mode 100755
index cf5fad3d..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/link.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <g fill={props.fill || '#FFF'}>
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M16.041 12.217H16h.041zM25.082 8.342h-3.915s2.1 1.373 2.551 3.875H25.082a2.523 2.523 0 0 1 2.543 2.543v2.583c0 1.421-1.122 2.624-2.543 2.624H16.04c-1.421 0-2.624-1.203-2.624-2.624V14.8H9.542v2.543c0 .929.202 1.816.557 2.624 1.017 2.276 3.302 3.875 5.942 3.875h9.042c3.568 0 6.418-2.931 6.418-6.499V14.76a6.39 6.39 0 0 0-6.419-6.418z"
-      />
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M21.942 12.217a6.39 6.39 0 0 0-5.902-3.875H7c-3.569 0-6.5 2.85-6.5 6.418v2.583c0 3.568 2.931 6.499 6.5 6.499h3.833s-2.082-1.373-2.59-3.875H7c-1.421 0-2.624-1.203-2.624-2.624V14.76c0-1.421 1.203-2.543 2.624-2.543h9.041a2.523 2.523 0 0 1 2.543 2.543v2.623h3.875V14.76c0-.904-.186-1.768-.517-2.543z"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/link.svg b/tdrive/frontend/src/app/components/drive/icons/link.svg
deleted file mode 100755
index 2a14d480..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/link.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M16.041,12.217H16l0,0C16.016,12.217,16.024,12.217,16.041,12.217z"/>
-	<path fill="#FFFFFF" d="M25.082,8.342h-3.915c0,0,2.1,1.373,2.551,3.875h1.323h0.041c1.421,0,2.543,1.123,2.543,2.543v2.583
-		c0,1.421-1.122,2.624-2.543,2.624h-9.042c-1.421,0-2.624-1.203-2.624-2.624V14.8H9.542v2.543c0,0.929,0.202,1.816,0.557,2.624
-		c1.017,2.276,3.302,3.875,5.942,3.875h9.042c3.568,0,6.418-2.931,6.418-6.499V14.76C31.5,11.192,28.65,8.342,25.082,8.342z"/>
-	<path fill="#FFFFFF" d="M21.942,12.217c-0.977-2.284-3.237-3.875-5.902-3.875H7c-3.569,0-6.5,2.85-6.5,6.418v2.583
-		c0,3.568,2.931,6.499,6.5,6.499h3.833c0,0-2.082-1.373-2.59-3.875H7c-1.421,0-2.624-1.203-2.624-2.624V14.76
-		c0-1.421,1.203-2.543,2.624-2.543h9h0.041c1.42,0,2.543,1.123,2.543,2.543v2.583c0,0.016,0,0.024,0,0.04h3.875
-		c0-0.016,0-0.024,0-0.04V14.76C22.459,13.856,22.273,12.992,21.942,12.217z"/>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/pdf.jsx b/tdrive/frontend/src/app/components/drive/icons/pdf.jsx
deleted file mode 100755
index b508a39a..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/pdf.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M5.288 28c-.71 0-1.07-.371-1.25-.711-.224-.422-.272-.982-.137-1.58.152-.678.527-1.293 1.177-1.93.801-.781 1.974-1.564 3.305-2.207a26.563 26.563 0 0 1 2.272-.959c.978-1.523 2.363-3.907 3.36-6.527.108-.289.213-.574.312-.863-.307-.71-.498-1.32-.645-1.847-.276-.976-.451-1.854-.524-2.606a9.468 9.468 0 0 1 .039-2.184c.095-.714.259-1.224.51-1.601a2.217 2.217 0 0 1 1.595-.943l.07-.011a1.56 1.56 0 0 1 .766.033c.21.064.414.174.632.305l.005-.013c1.052.496.954 1.39.826 2.52-.018.143-.035.299-.053.471-.143 1.333-.546 3.496-1.259 5.761.049.098.101.199.154.3.535 1.006 1.31 2.164 2.244 3.351.428.539.918 1.117 1.428 1.693a17.197 17.197 0 0 1 2.426.014c.852.07 1.703.207 2.465.396.877.211 1.512.461 2.055.807.699.434 1.238 1.02 1.514 1.646.324.713.338 1.533.031 2.178-.188.404-.604.941-1.51 1.238a3.359 3.359 0 0 1-2 .01c-.641-.193-1.354-.572-2.188-1.16-.809-.574-1.576-1.234-2.486-2.139-.35-.348-.699-.713-1.051-1.084-.568.064-1.203.164-2.003.309-.944.172-2.109.402-3.589.838-.655.191-1.305.398-1.923.619-.078.115-.151.225-.219.328-1.272 1.885-2.513 3.361-3.591 4.279-.831.705-1.601 1.104-2.358 1.232a2.352 2.352 0 0 1-.4.037zm3.281-4.467c-1.186.643-1.881 1.236-2.211 1.559-.472.461-.606.764-.662.982.345-.125.731-.369 1.166-.736.408-.348.981-.91 1.707-1.805zm13.261-3.271c.781.77 1.445 1.338 2.137 1.826.822.58 1.354.811 1.65.9.324.096.619.098.92.004.117-.043.346-.135.412-.279.061-.131.074-.387-.043-.645-.137-.299-.432-.609-.818-.852-.373-.234-.84-.414-1.518-.576a14.937 14.937 0 0 0-2.176-.352c-.185-.011-.374-.024-.564-.026zm-6.357-4.88a36.788 36.788 0 0 1-2.141 4.342 35.008 35.008 0 0 1 3.707-.855c.316-.061.607-.111.883-.154a34.1 34.1 0 0 1-.671-.822 28.7 28.7 0 0 1-1.778-2.511zm.185-9.54l-.022.003c-.037.005-.073.011-.11.015-.065.009-.082.01-.122.025a.382.382 0 0 0-.181.129c-.033.05-.136.25-.21.818a7.788 7.788 0 0 0-.033 1.763c.042.428.124.911.246 1.441.261-1.139.423-2.148.502-2.883.018-.177.037-.337.054-.482.029-.265.061-.539.071-.717-.067-.039-.141-.083-.195-.112zm.328.16l.029.022.121-.267-.15.245z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/pdf.svg b/tdrive/frontend/src/app/components/drive/icons/pdf.svg
deleted file mode 100755
index 366c9b15..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/pdf.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<path fill="#FFFFFF" d="M5.288,28c-0.71,0-1.07-0.371-1.25-0.711c-0.224-0.422-0.272-0.982-0.137-1.58
-	c0.152-0.678,0.527-1.293,1.177-1.93c0.801-0.781,1.974-1.564,3.305-2.207c0.656-0.318,1.432-0.646,2.272-0.959
-	c0.978-1.523,2.363-3.907,3.36-6.527c0.108-0.289,0.213-0.574,0.312-0.863c-0.307-0.71-0.498-1.32-0.645-1.847
-	c-0.276-0.976-0.451-1.854-0.524-2.606c-0.071-0.74-0.058-1.475,0.039-2.184c0.095-0.714,0.259-1.224,0.51-1.601
-	c0.33-0.476,0.761-0.708,1.067-0.82c0.239-0.087,0.421-0.11,0.528-0.123l0.07-0.011c0.133-0.024,0.411-0.074,0.766,0.033
-	c0.21,0.064,0.414,0.174,0.632,0.305l0.005-0.013c1.052,0.496,0.954,1.39,0.826,2.52c-0.018,0.143-0.035,0.299-0.053,0.471
-	c-0.143,1.333-0.546,3.496-1.259,5.761c0.049,0.098,0.101,0.199,0.154,0.3c0.535,1.006,1.31,2.164,2.244,3.351
-	c0.428,0.539,0.918,1.117,1.428,1.693c0.822-0.053,1.641-0.047,2.426,0.014c0.852,0.07,1.703,0.207,2.465,0.396
-	c0.877,0.211,1.512,0.461,2.055,0.807c0.699,0.434,1.238,1.02,1.514,1.646c0.324,0.713,0.338,1.533,0.031,2.178
-	c-0.188,0.404-0.604,0.941-1.51,1.238c-0.65,0.207-1.322,0.209-2,0.01c-0.641-0.193-1.354-0.572-2.188-1.16
-	c-0.809-0.574-1.576-1.234-2.486-2.139c-0.35-0.348-0.699-0.713-1.051-1.084c-0.568,0.064-1.203,0.164-2.003,0.309
-	c-0.944,0.172-2.109,0.402-3.589,0.838c-0.655,0.191-1.305,0.398-1.923,0.619c-0.078,0.115-0.151,0.225-0.219,0.328
-	c-1.272,1.885-2.513,3.361-3.591,4.279c-0.831,0.705-1.601,1.104-2.358,1.232C5.543,27.988,5.411,28,5.288,28z M8.569,23.533
-	c-1.186,0.643-1.881,1.236-2.211,1.559c-0.472,0.461-0.606,0.764-0.662,0.982c0.345-0.125,0.731-0.369,1.166-0.736
-	C7.27,24.99,7.843,24.428,8.569,23.533z M21.83,20.262c0.781,0.77,1.445,1.338,2.137,1.826c0.822,0.58,1.354,0.811,1.65,0.9
-	c0.324,0.096,0.619,0.098,0.92,0.004c0.117-0.043,0.346-0.135,0.412-0.279c0.061-0.131,0.074-0.387-0.043-0.645
-	c-0.137-0.299-0.432-0.609-0.818-0.852c-0.373-0.234-0.84-0.414-1.518-0.576c-0.674-0.164-1.422-0.285-2.176-0.352
-	C22.209,20.277,22.02,20.264,21.83,20.262z M15.473,15.382c-0.655,1.602-1.424,3.094-2.141,4.342
-	c1.533-0.439,2.731-0.684,3.707-0.855c0.316-0.061,0.607-0.111,0.883-0.154c-0.236-0.281-0.459-0.553-0.671-0.822
-	C16.576,17.035,15.973,16.183,15.473,15.382z M15.658,5.842l-0.022,0.003c-0.037,0.005-0.073,0.011-0.11,0.015
-	c-0.065,0.009-0.082,0.01-0.122,0.025c-0.037,0.012-0.128,0.053-0.181,0.129c-0.033,0.05-0.136,0.25-0.21,0.818
-	c-0.078,0.563-0.088,1.172-0.033,1.763c0.042,0.428,0.124,0.911,0.246,1.441c0.261-1.139,0.423-2.148,0.502-2.883
-	c0.018-0.177,0.037-0.337,0.054-0.482c0.029-0.265,0.061-0.539,0.071-0.717C15.786,5.915,15.712,5.871,15.658,5.842z M15.986,6.002
-	c0.01,0.008,0.02,0.016,0.029,0.022l0.121-0.267L15.986,6.002z"/>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/slides.jsx b/tdrive/frontend/src/app/components/drive/icons/slides.jsx
deleted file mode 100755
index 16cca67d..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/slides.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <g fill={props.fill || '#FFF'}>
-      <path scale={(props.scale || 1) * 0.75} d="M1.479 4.082h29.043V20.42H1.479z" />
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M30.521 21.898H1.479A1.479 1.479 0 0 1 0 20.42V4.082a1.48 1.48 0 0 1 1.479-1.479h29.043c.816 0 1.478.662 1.478 1.479V20.42c0 .816-.662 1.478-1.479 1.478zM2.957 18.941h26.086V5.56H2.957v13.381z"
-      />
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M19.747 30.074c-.56 0-1.097-.32-1.345-.863l-2.513-5.484-3.019 5.572a1.478 1.478 0 1 1-2.6-1.408l4.429-8.176a1.466 1.466 0 0 1 1.349-.772c.56.019 1.062.353 1.294.862l3.746 8.174a1.48 1.48 0 0 1-1.341 2.095z"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/slides.svg b/tdrive/frontend/src/app/components/drive/icons/slides.svg
deleted file mode 100755
index 98dea993..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/slides.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<g>
-		<rect x="1.479" y="4.082" fill="#FFFFFF" width="29.043" height="16.338"/>
-		<path fill="#FFFFFF" d="M30.521,21.898H1.479C0.662,21.898,0,21.236,0,20.42V4.082c0-0.816,0.662-1.479,1.479-1.479h29.043
-			C31.338,2.603,32,3.265,32,4.082V20.42C32,21.236,31.338,21.898,30.521,21.898z M2.957,18.941h26.086V5.56H2.957V18.941z"/>
-	</g>
-	<path fill="#FFFFFF" d="M19.747,30.074c-0.56,0-1.097-0.32-1.345-0.863l-2.513-5.484l-3.019,5.572
-		c-0.389,0.719-1.286,0.984-2.004,0.596s-0.985-1.285-0.596-2.004l4.429-8.176c0.267-0.492,0.785-0.795,1.349-0.772
-		c0.56,0.019,1.062,0.353,1.294,0.862l3.746,8.174c0.34,0.742,0.015,1.619-0.729,1.961C20.162,30.031,19.953,30.074,19.747,30.074z"
-		/>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/sound.jsx b/tdrive/frontend/src/app/components/drive/icons/sound.jsx
deleted file mode 100755
index 398d4307..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/sound.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M18.802 3.5H16.67v17.38c-1.181-.449-2.707-.457-4.211.09-2.697.979-4.306 3.369-3.591 5.33.715 1.967 3.481 2.76 6.179 1.777 2.291-.832 3.791-2.68 3.75-4.422l.005-14.214c3.722.586 3.973 5.289 3.531 6.607-.171.5.126.873.688 0C27.032 9.81 18.802 7.057 18.802 3.5z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/sound.svg b/tdrive/frontend/src/app/components/drive/icons/sound.svg
deleted file mode 100755
index 58ca3b76..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/sound.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M18.802,3.5h-2.132v17.38c-1.181-0.449-2.707-0.457-4.211,0.09c-2.697,0.979-4.306,3.369-3.591,5.33
-		c0.715,1.967,3.481,2.76,6.179,1.777c2.291-0.832,3.791-2.68,3.75-4.422l0.005-14.214c3.722,0.586,3.973,5.289,3.531,6.607
-		c-0.171,0.5,0.126,0.873,0.688,0C27.032,9.81,18.802,7.057,18.802,3.5z"/>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/spreadsheet.jsx b/tdrive/frontend/src/app/components/drive/icons/spreadsheet.jsx
deleted file mode 100755
index b4f6523f..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/spreadsheet.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    {...props}
-    viewBox="0 0 32 32"
-  >
-    <g fill={props.fill || '#FFF'}>
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M28.705 28.018H3.293A1.293 1.293 0 0 1 2 26.726V5.274c0-.713.58-1.292 1.293-1.292h25.412c.715 0 1.295.58 1.295 1.292v21.451c0 .715-.58 1.293-1.295 1.293zM4.587 25.431h22.827V6.569H4.587v18.862z"
-      />
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M28.705 20.864H3.293a1.293 1.293 0 0 1 0-2.585h25.412a1.293 1.293 0 1 1 0 2.585zM28.705 13.723H3.293a1.295 1.295 0 0 1 0-2.588h25.412a1.294 1.294 0 1 1 0 2.588z"
-      />
-      <path
-        scale={(props.scale || 1) * 0.75}
-        d="M16 28.018a1.291 1.291 0 0 1-1.293-1.292V5.274a1.295 1.295 0 0 1 2.588 0v21.451c0 .715-.58 1.293-1.295 1.293z"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/spreadsheet.svg b/tdrive/frontend/src/app/components/drive/icons/spreadsheet.svg
deleted file mode 100755
index a0ddedfd..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/spreadsheet.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M28.705,28.018H3.293C2.58,28.018,2,27.44,2,26.726V5.274c0-0.713,0.58-1.292,1.293-1.292h25.412
-		C29.42,3.982,30,4.562,30,5.274v21.451C30,27.44,29.42,28.018,28.705,28.018z M4.587,25.431h22.827V6.569H4.587V25.431z"/>
-	<path fill="#FFFFFF" d="M28.705,20.864H3.293C2.58,20.864,2,20.284,2,19.57c0-0.713,0.58-1.291,1.293-1.291h25.412
-		c0.715,0,1.295,0.578,1.295,1.291C30,20.284,29.42,20.864,28.705,20.864z"/>
-	<path fill="#FFFFFF" d="M28.705,13.723H3.293C2.58,13.723,2,13.143,2,12.428s0.58-1.293,1.293-1.293h25.412
-		c0.715,0,1.295,0.578,1.295,1.293S29.42,13.723,28.705,13.723z"/>
-	<path fill="#FFFFFF" d="M16,28.018c-0.715,0-1.293-0.577-1.293-1.292V5.274c0-0.713,0.578-1.292,1.293-1.292
-		s1.295,0.58,1.295,1.292v21.451C17.295,27.44,16.715,28.018,16,28.018z"/>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/svg.jsx b/tdrive/frontend/src/app/components/drive/icons/svg.jsx
deleted file mode 100755
index 33a46b88..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/svg.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-  >
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M20.591 29.731l-1.004-1.006a11.056 11.056 0 0 0 3.261-7.875c0-2.976-1.157-5.77-3.261-7.873a11.062 11.062 0 0 0-7.874-3.26 11.061 11.061 0 0 0-7.874 3.26l-1.005-1.005a12.482 12.482 0 0 1 8.879-3.676c3.353 0 6.509 1.309 8.877 3.676a12.479 12.479 0 0 1 3.678 8.878 12.48 12.48 0 0 1-3.677 8.881z"
-    />
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M2 11.376v2.559h2.559v-2.559zM18.819 28.006v2.557h2.557v-2.557zM29.452 21.085l-.603.603L10.752 3.606l.602-.603z"
-    />
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M18.819 11.044v2.559h2.557v-2.559z"
-    />
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M21.615 13.84h-3.03v-3.032h3.03v3.032zm-2.56-.475h2.086v-2.083h-2.086v2.083zM11.238 4.175c.475 0 .854-.38.854-.854s-.378-.854-.854-.854c-.473 0-.852.38-.852.854s.379.854.852.854zM29.146 22.179a.848.848 0 0 0 .854-.854.85.85 0 0 0-.854-.854.85.85 0 0 0-.854.854.851.851 0 0 0 .854.854z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/svg.svg b/tdrive/frontend/src/app/components/drive/icons/svg.svg
deleted file mode 100755
index 1347b9b1..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/svg.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<g>
-	<g>
-		<path fill="#FFFFFF" d="M20.591,29.731l-1.004-1.006c2.104-2.104,3.261-4.897,3.261-7.875c0-2.976-1.157-5.77-3.261-7.873
-			c-2.104-2.103-4.899-3.26-7.874-3.26c-2.977,0-5.771,1.158-7.874,3.26l-1.005-1.005c2.369-2.368,5.524-3.676,8.879-3.676
-			c3.353,0,6.509,1.309,8.877,3.676c2.369,2.369,3.678,5.524,3.678,8.878C24.269,24.207,22.96,27.359,20.591,29.731z"/>
-	</g>
-	<g>
-		<polygon fill="#FFFFFF" points="2,11.376 2,13.935 4.559,13.935 4.559,11.376 		"/>
-	</g>
-	<g>
-		<polygon fill="#FFFFFF" points="18.819,28.006 18.819,30.563 21.376,30.563 21.376,28.006 		"/>
-	</g>
-	<g>
-		
-			<rect x="19.675" y="-0.446" transform="matrix(-0.7068 0.7074 -0.7074 -0.7068 43.0427 6.8514)" fill="#FFFFFF" width="0.853" height="25.583"/>
-	</g>
-	<g>
-		<polygon fill="#FFFFFF" points="18.819,11.044 18.819,13.603 21.376,13.603 21.376,11.044 		"/>
-	</g>
-	<g>
-		<path fill="#FFFFFF" d="M21.615,13.84h-3.03v-3.032h3.03V13.84z M19.055,13.365h2.086v-2.083h-2.086V13.365z"/>
-	</g>
-	<g>
-		<path fill="#FFFFFF" d="M11.238,4.175c0.475,0,0.854-0.38,0.854-0.854s-0.378-0.854-0.854-0.854c-0.473,0-0.852,0.38-0.852,0.854
-			S10.765,4.175,11.238,4.175L11.238,4.175z"/>
-	</g>
-	<g>
-		<path fill="#FFFFFF" d="M29.146,22.179c0.476,0,0.854-0.378,0.854-0.854c0-0.475-0.378-0.854-0.854-0.854
-			c-0.474,0-0.854,0.379-0.854,0.854C28.293,21.801,28.673,22.179,29.146,22.179L29.146,22.179z"/>
-	</g>
-</g>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/icons/video.jsx b/tdrive/frontend/src/app/components/drive/icons/video.jsx
deleted file mode 100755
index 4356053b..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/video.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-const SvgComponent = props => (
-  <svg
-    width={(props.scale || 1) * 0.75 * 32}
-    height={(props.scale || 1) * 0.75 * 32}
-    viewBox="0 0 32 32"
-    {...props}
-  >
-    <path
-      scale={(props.scale || 1) * 0.75}
-      fill={props.fill || '#FFF'}
-      d="M6.465 4.002v24l20-12z"
-    />
-  </svg>
-);
-
-export default SvgComponent;
diff --git a/tdrive/frontend/src/app/components/drive/icons/video.svg b/tdrive/frontend/src/app/components/drive/icons/video.svg
deleted file mode 100755
index 3b554029..00000000
--- a/tdrive/frontend/src/app/components/drive/icons/video.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<polygon fill="#FFFFFF" points="6.465,4.002 6.465,28.002 26.465,16.002 "/>
-</svg>
diff --git a/tdrive/frontend/src/app/components/drive/ui/directory.jsx b/tdrive/frontend/src/app/components/drive/ui/directory.jsx
deleted file mode 100755
index 1af75a04..00000000
--- a/tdrive/frontend/src/app/components/drive/ui/directory.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/jsx-key */
-import React from 'react';
-
-import Icon from 'app/components/icon/icon.jsx';
-import FolderIcon from '@material-ui/icons/FolderOutlined';
-import Menu from 'components/menus/menu.jsx';
-import Numbers from 'app/features/global/utils/Numbers';
-import '../drive.scss';
-import 'moment-timezone';
-import { getCompanyApplication as getApplication } from 'app/features/applications/state/company-applications';
-
-export default class Directory extends React.Component {
-  constructor() {
-    super();
-  }
-  render() {
-    var app = {};
-    if (this.props.data.application_id && this.props.data.external_storage) {
-      app = getApplication(this.props.data.application_id);
-    }
-
-    return [
-      <div style={{ display: 'inherit', width: '100%' }}>
-        <div className="icon">
-          {!app.id && <FolderIcon className="m-icon-small" />}
-          {!!app.id && (
-            <div
-              className="app_icon"
-              style={{ backgroundImage: "url('" + app.identity?.icon + "')" }}
-            />
-          )}
-        </div>
-        <div className="text">
-          {this.props.data.name}
-          {!!app.id && <i> ({app.identity?.name})</i>}
-        </div>
-
-        {(this.props.data.acces_info || {}).token && (
-          <Icon type="cloud-share" className="m-icon-small" />
-        )}
-
-        {this.props.details && (
-          <div className="size no-grid">
-            {this.props.data.size ? Numbers.humanFileSize(this.props.data.size, true) : '-'}
-          </div>
-        )}
-        {this.props.menu && this.props.menu.length > 0 && (
-          <Menu menu={this.props.menu} className="options">
-            <Icon type="ellipsis-h" className="m-icon-small" />
-          </Menu>
-        )}
-      </div>,
-    ];
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/ui/file-type.jsx b/tdrive/frontend/src/app/components/drive/ui/file-type.jsx
deleted file mode 100755
index 3a2a764f..00000000
--- a/tdrive/frontend/src/app/components/drive/ui/file-type.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-
-import Archive from '../icons/archive.jsx';
-import Code from '../icons/code.jsx';
-import Document from '../icons/document.jsx';
-import Files from '../icons/file.jsx';
-import Images from '../icons/image.jsx';
-import Link from '../icons/link.jsx';
-import Pdf from '../icons/pdf.jsx';
-import Slide from '../icons/slides.jsx';
-import Sound from '../icons/sound.jsx';
-import Spreadsheet from '../icons/spreadsheet.jsx';
-import Svg from '../icons/svg.jsx';
-import Video from '../icons/video.jsx';
-
-export default class FileType extends Component {
-  /* props : type (string) */
-  constructor() {
-    super();
-  }
-  render() {
-    var type = this.props.type;
-    var TypeIcon = Files;
-    switch (type) {
-      case 'link':
-        TypeIcon = Link;
-        break;
-      case 'code':
-        TypeIcon = Code;
-        break;
-      case 'document':
-        TypeIcon = Document;
-        break;
-      case 'image':
-        TypeIcon = Images;
-        break;
-      case 'pdf':
-        TypeIcon = Pdf;
-        break;
-      case 'slides':
-        TypeIcon = Slide;
-        break;
-      case 'audio':
-        TypeIcon = Sound;
-        break;
-      case 'spreadsheet':
-        TypeIcon = Spreadsheet;
-        break;
-      case 'svg':
-        TypeIcon = Svg;
-        break;
-      case 'video':
-        TypeIcon = Video;
-        break;
-      case 'archive':
-        TypeIcon = Archive;
-        break;
-      default:
-    }
-    return <TypeIcon {...this.props} />;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/ui/file.jsx b/tdrive/frontend/src/app/components/drive/ui/file.jsx
deleted file mode 100755
index c2e308b4..00000000
--- a/tdrive/frontend/src/app/components/drive/ui/file.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/jsx-key */
-import React from 'react';
-import moment from 'moment';
-import 'moment-timezone';
-
-import Icon from 'app/components/icon/icon';
-import Menu from 'components/menus/menu';
-import DriveService from 'app/deprecated/Apps/Drive/Drive';
-import Numbers from 'app/features/global/utils/Numbers';
-import FileType from './file-type';
-import TagPicker from 'components/tag-picker/tag-picker';
-import { addApiUrlIfNeeded } from 'app/features/global/utils/URLUtils';
-import '../drive.scss';
-import { formatTime } from '@features/global/utils/Numbers';
-
-export default class File extends React.Component {
-  constructor() {
-    super();
-  }
-  render() {
-    var date = false;
-    if (this.props.data.modified) {
-      date = new Date(this.props.data.modified * 1000);
-    }
-    if (this.props.data.added && this.props.isVersion) {
-      date = new Date(this.props.data.added * 1000);
-    }
-
-    var date_string = date ? formatTime(date) : '-';
-
-    return [
-      <div
-        key="preview"
-        className={
-          'preview file_type_icon ' +
-          DriveService.getFileType(this.props.data) +
-          ' ' +
-          (this.props.data.has_preview ? '' : 'no_preview')
-        }
-        style={
-          this.props.data.has_preview
-            ? { backgroundImage: addApiUrlIfNeeded(this.props.data.preview_link, true) }
-            : {}
-        }
-      >
-        <div className="tags_list">
-          <TagPicker inline readOnly noPlaceholder value={this.props.data.tags || []} />
-        </div>
-      </div>,
-      <div key="data" className="data">
-        <div className={'file_type_icon'}>
-          <FileType type={DriveService.getFileType(this.props.data)} scale={0.75} fill={'#000'} />
-        </div>
-        <div className="text">
-          {!!this.props.versionLabel && <div className="inline-tag">{this.props.versionLabel}</div>}
-          {this.props.data.name}
-          {!this.props.isVersion && (this.props.data.versions || {}).length > 1 && (
-            <span style={{ opacity: 0.5, marginLeft: 4 }}>
-              ({(this.props.data.versions || {}).length} versions)
-            </span>
-          )}
-          &nbsp;&nbsp;
-          <TagPicker
-            className="no-grid"
-            inline
-            readOnly
-            noPlaceholder
-            value={this.props.data.tags || []}
-          />
-        </div>
-
-        {(this.props.data.acces_info || {}).token && (
-          <Icon type="link-h" className="m-icon-small" />
-        )}
-        {this.props.data.url && <Icon type="external-link-alt" className="m-icon-small" />}
-
-        {/*
-            <div className="created-by no-grid">
-              {this.state.element.created_by || "-"}
-            </div>
-            */}
-        {this.props.details && [
-          <div className="last-modified no-grid">{date_string}</div>,
-          <div className="size no-grid">
-            {this.props.data.size ? Numbers.humanFileSize(this.props.data.size, true) : '-'}
-          </div>,
-        ]}
-        {!this.props.isVersion && (
-          <div className="detail_preview_parent no-grid">
-            <div
-              className={
-                'detail_preview file_type_icon ' +
-                DriveService.getFileType(this.props.data) +
-                ' ' +
-                (this.props.data.has_preview ? '' : 'no_preview')
-              }
-              style={
-                this.props.data.has_preview
-                  ? { backgroundImage: addApiUrlIfNeeded(this.props.data.preview_link, true) }
-                  : {}
-              }
-            />
-          </div>
-        )}
-        {this.props.menu && this.props.menu.length > 0 && (
-          <Menu menu={this.props.menu} className="options">
-            <Icon type="ellipsis-h" className="m-icon-small" />
-          </Menu>
-        )}
-
-        {this.props.removeIcon === true && (
-          <Icon type="times" className="m-icon-small" onClick={this.props.removeOnClick} />
-        )}
-      </div>,
-    ];
-  }
-}
diff --git a/tdrive/frontend/src/app/components/drive/version-details.jsx b/tdrive/frontend/src/app/components/drive/version-details.jsx
deleted file mode 100755
index 4a7bae3e..00000000
--- a/tdrive/frontend/src/app/components/drive/version-details.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import Languages from 'app/features/global/services/languages-service';
-import Icon from 'app/components/icon/icon.jsx';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
-import UploadZone from 'components/uploads/upload-zone';
-import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
-import MediumPopupManager from 'app/components/modal/modal-manager';
-import { ObjectModal, ObjectModalTitle } from 'components/object-modal/deprecated-object-modal.jsx';
-import UIFile from './ui/file.jsx';
-import 'moment-timezone';
-
-import './drive.scss';
-
-export default class VersionDetails extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      workspaces: Workspaces,
-      i18n: Languages,
-    };
-    Languages.addListener(this);
-    DriveService.addListener(this);
-    Collections.get('drive').addListener(this);
-  }
-  componentWillUnmount() {
-    Languages.removeListener(this);
-    DriveService.removeListener(this);
-    Collections.get('drive').removeListener(this);
-  }
-  render() {
-    var countVersion = (this.props.file.versions || []).length;
-    return (
-      <ObjectModal
-        onClose={() => MediumPopupManager.closeAll()}
-        footer={
-          <div className="footerVersionDetails">
-            <div className="addVersion">
-              <div
-                className="addVersionButton"
-                onClick={() => {
-                  if (this.upload_zone) {
-                    this.upload_zone.open();
-                  }
-                }}
-              >
-                <div className="icon">
-                  <Icon type="plus" className="m-icon-small iconWithBackground" />
-                </div>
-                <div className="footerTitle">
-                  {Languages.t('components.drive.new_versions', [], 'Ajouter une nouvelle version')}
-                </div>
-              </div>
-            </div>
-          </div>
-        }
-        title={
-          <div className="title allow_selection">
-            <ObjectModalTitle>
-              {Languages.t('scenes.apps.drive.right_preview.versions', [], 'Versions')}
-            </ObjectModalTitle>
-          </div>
-        }
-      >
-        <div className="versionDetails drive_view list">
-          <UploadZone
-            disabled={WorkspaceUserRights.isNotConnected()}
-            disableClick
-            ref={node => (this.upload_zone = node)}
-            parent={this.props.file.parent_id}
-            driveCollectionKey={{ id: this.props.file.parent_id }}
-            uploadOptions={{
-              workspace_id: this.state.workspaces.currentWorkspaceId,
-              new_version: true,
-              file_id: this.props.file.id,
-            }}
-            allowPaste={true}
-          >
-            {(this.props.file.versions || [])
-              .sort((a, b) => {
-                return b.added - a.added;
-              })
-              .map((version, index) => {
-                var data = {};
-                if (index > 0) {
-                  data.extension = this.props.file.extension;
-                  data.name = version.name;
-                  data.creator = version.creator;
-                  data.size = version.size;
-                } else {
-                  data = JSON.parse(JSON.stringify(this.props.file));
-                }
-                data.added = version.added;
-                return (
-                  <div className="file" key={'version-' + version.id}>
-                    <UIFile
-                      isVersion
-                      versionLabel={
-                        index == 0 ? 'Version actuelle' : 'Version ' + (countVersion - index)
-                      }
-                      data={data}
-                      menu={[
-                        {
-                          type: 'menu',
-                          text: Languages.t(
-                            'scenes.apps.drive.preview_bloc.operations_download',
-                            [],
-                            'Télécharger',
-                          ),
-                          onClick: () => {
-                            var link = DriveService.getLink(this.props.file, version.id, 1);
-                            window.open(link);
-                          },
-                        },
-                      ]}
-                      details={true}
-                    />
-                  </div>
-                );
-              })}
-          </UploadZone>
-        </div>
-      </ObjectModal>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/edit-channel/channel-access.tsx b/tdrive/frontend/src/app/components/edit-channel/channel-access.tsx
deleted file mode 100644
index 7de5e929..00000000
--- a/tdrive/frontend/src/app/components/edit-channel/channel-access.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Button } from 'app/atoms/button/button';
-import { BaseSmall } from 'app/atoms/text';
-import Switch from 'app/components/inputs/switch';
-import { ChannelType } from 'app/features/channels/types/channel';
-import Languages from 'app/features/global/services/languages-service';
-import Block from 'app/molecules/grouped-rows/base';
-import { useState } from 'react';
-
-export const ChannelAccessForm = (props: {
-  channel?: ChannelType;
-  onChange: (change: {
-    visibility: 'private' | 'public';
-    is_default: boolean;
-    is_readonly: boolean;
-  }) => void;
-}) => {
-  const [visibility, setVisibility] = useState<'private' | 'public'>(
-    props.channel?.visibility || ('private' as any),
-  );
-  const [isDefault, setIsDefault] = useState(props.channel?.is_default || false);
-  const [isReadOnly, setIsReadOnly] = useState(props.channel?.is_readonly || false);
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <div className="w-screen max-w-sm p-4 -m-4">
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.app.channelsbar.channel_access.visibility')}
-        subtitle={
-          <BaseSmall className="whitespace-normal leading-3">
-            {Languages.t('scenes.app.channelsbar.channel_access.visibility.info')}
-          </BaseSmall>
-        }
-        suffix={
-          <Switch
-            checked={visibility === 'public'}
-            onChange={() => {
-              if (visibility === 'public') setIsDefault(false);
-              setVisibility(visibility === 'public' ? 'private' : 'public');
-            }}
-          />
-        }
-      />
-
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.app.channelsbar.channel_access.default')}
-        subtitle={
-          <BaseSmall className="whitespace-normal leading-3">
-            {Languages.t('scenes.app.channelsbar.channel_access.default.info')}
-          </BaseSmall>
-        }
-        suffix={
-          <Switch
-            checked={isDefault}
-            onChange={() => {
-              setIsDefault(!isDefault);
-              if (visibility === 'private' && !isDefault) setVisibility('public');
-            }}
-          />
-        }
-      />
-
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.app.channelsbar.channel_access.readonly')}
-        subtitle={
-          <BaseSmall className="whitespace-normal leading-3">
-            {Languages.t('scenes.app.channelsbar.channel_access.readonly.info')}
-          </BaseSmall>
-        }
-        suffix={
-          <Switch
-            checked={isReadOnly}
-            onChange={() => {
-              setIsReadOnly(!isReadOnly);
-            }}
-          />
-        }
-      />
-
-      <div className="text-center mt-4">
-        <Button
-          theme="primary"
-          loading={loading}
-          onClick={() => {
-            setLoading(true);
-            props.onChange({ visibility, is_default: isDefault, is_readonly: isReadOnly });
-            setLoading(false);
-          }}
-        >
-          {Languages.t('scenes.app.channelsbar.channel_access.save')}
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/edit-channel/channel-information.tsx b/tdrive/frontend/src/app/components/edit-channel/channel-information.tsx
deleted file mode 100644
index 51fa20c2..00000000
--- a/tdrive/frontend/src/app/components/edit-channel/channel-information.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import Avatar from 'app/atoms/avatar';
-import { Button } from 'app/atoms/button/button';
-import { Checkbox } from 'app/atoms/input/input-checkbox';
-import { InputLabel } from 'app/atoms/input/input-decoration-label';
-import Select from 'app/atoms/input/input-select';
-import { Input } from 'app/atoms/input/input-text';
-import A from 'app/atoms/link';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { usePublicOrPrivateChannels } from 'app/features/channels/hooks/use-public-or-private-channels';
-import { ChannelType } from 'app/features/channels/types/channel';
-import Languages from 'app/features/global/services/languages-service';
-import { getBase64 } from 'app/features/global/utils/strings';
-import Block from 'app/molecules/grouped-rows/base';
-import _ from 'lodash';
-import { useEffect, useState } from 'react';
-import Emojione from '../emojione/emojione';
-
-const ChannelGroupSelector = (props: { group: string; onChange: (str: string) => void }) => {
-  const clean = (str?: string) => str?.toLocaleLowerCase().trim().replace(/ +/, ' ');
-
-  const [group, setGroup] = useState<string>(clean(props.group) || '');
-  const [newGroup, setNewGroup] = useState<string>('');
-  const { publicChannels, privateChannels } = usePublicOrPrivateChannels();
-  const groups = _.uniq(
-    [...publicChannels, ...privateChannels]
-      .filter(p => p.channel_group)
-      .map(p => clean(p.channel_group) || ''),
-  ).sort();
-
-  useEffect(() => {
-    if (!groups.includes(group) && !newGroup) setNewGroup(group);
-  }, [groups]);
-
-  return (
-    <div className="w-screen max-w-sm p-4 -m-4">
-      <hr className="my-1 -mx-4 mb-3" />
-
-      {groups.map(g => (
-        <Block
-          key={g}
-          className="my-3"
-          avatar={<Avatar nogradient title={g} size="sm" />}
-          title={_.capitalize(g)}
-          suffix={
-            <Checkbox
-              onChange={v => {
-                setGroup(v ? g : '');
-              }}
-              value={g === group}
-            />
-          }
-          subtitle={<></>}
-        />
-      ))}
-
-      <Block
-        avatar={<div className="w-7" />}
-        title={
-          <div className="grow p-1 font-medium">
-            <Input
-              theme="outline"
-              onChange={e => {
-                setNewGroup(e.target.value);
-                setGroup(clean(e.target.value) || '');
-              }}
-              value={newGroup}
-              className=""
-              placeholder={Languages.t('scenes.app.channelsbar.channel_information.group.new')}
-            />
-          </div>
-        }
-        suffix={
-          <Checkbox
-            disabled={!newGroup}
-            onChange={v => {
-              setGroup(v ? newGroup : '');
-            }}
-            value={!!group && clean(newGroup) === clean(group)}
-          />
-        }
-        subtitle={<></>}
-      />
-
-      <div className="text-center mt-4">
-        <Button
-          theme={group ? 'primary' : 'outline'}
-          className="max-w-xs"
-          onClick={() => props.onChange(group)}
-        >
-          <span className="text-ellipsis overflow-hidden whitespace-nowrap">
-            {group
-              ? Languages.t('scenes.app.channelsbar.channel_information.group.save', [
-                  _.capitalize(clean(group)),
-                ])
-              : Languages.t('scenes.app.channelsbar.channel_information.group.save_none')}
-          </span>
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export const ChannelInformationForm = (props: {
-  channel?: ChannelType;
-  onChange: (change: {
-    name: string;
-    icon: string;
-    description: string;
-    channel_group: string;
-  }) => void;
-}) => {
-  const [channelGroupModal, setChannelGroupModal] = useState<string | false>(false);
-
-  const [group, setGroup] = useState<string>(props.channel?.channel_group || '');
-  const [name, setName] = useState(props.channel?.name || '');
-  const [description, setDescription] = useState(props.channel?.description || '');
-  const [icon, setIcon] = useState(props.channel?.icon || '');
-
-  return (
-    <div className="w-screen max-w-sm p-4 -m-4">
-      <Modal open={channelGroupModal !== false} onClose={() => setChannelGroupModal(false)}>
-        <ModalContent title={Languages.t('scenes.app.channelsbar.channel_information.group.title')}>
-          <ChannelGroupSelector
-            group={channelGroupModal || ''}
-            onChange={group => {
-              setChannelGroupModal(false);
-              setGroup(group);
-            }}
-          />
-        </ModalContent>
-      </Modal>
-
-      <div className="text-center my-4">
-        <div className="inline-block overflow-hidden m-0 p-0">
-          <Avatar
-            size="xl"
-            nogradient={!!(icon && (icon?.length || 0) < 20)}
-            icon={icon && (icon?.length || 0) < 20 ? <Emojione type={icon} /> : false}
-            avatar={(icon?.length || 0) > 20 ? icon : ''}
-            title={name}
-          />
-        </div>
-        <div className="mt-2">
-          {!!icon && (
-            <A
-              className="!text-rose-500"
-              onClick={() => {
-                setIcon('');
-              }}
-            >
-              {Languages.t('scenes.app.channelsbar.channel_information.logo.remove')}
-            </A>
-          )}
-          {!icon && (
-            <A
-              onClick={() => {
-                const input = document.createElement('input');
-                input.style.position = 'absolute';
-                input.style.left = '-10000px';
-                input.type = 'file';
-                input.accept = 'image/png, image/jpeg, image/gif, image/webp';
-                input.multiple = false;
-                input.onchange = async () => {
-                  if (input.files?.[0]) {
-                    const b64 = await getBase64(input.files?.[0]);
-                    setIcon(b64);
-                  }
-                  input.parentElement?.removeChild(input);
-                };
-                document.body.appendChild(input);
-                input.click();
-              }}
-            >
-              {Languages.t('scenes.app.channelsbar.channel_information.logo.add')}
-            </A>
-          )}
-        </div>
-      </div>
-
-      <InputLabel
-        label={Languages.t('scenes.app.channelsbar.channel_information.name')}
-        input={
-          <Input
-            className="int-channel-name"
-            theme="outline"
-            placeholder={Languages.t('scenes.app.channelsbar.channel_information.name')}
-            value={name}
-            onChange={e => setName(e.target.value)}
-          />
-        }
-      />
-
-      <InputLabel
-        className="mt-4"
-        label={Languages.t('scenes.app.channelsbar.channel_information.description')}
-        input={
-          <Input
-            className="int-channel-description"
-            theme="outline"
-            placeholder={Languages.t(
-              'scenes.app.channelsbar.channel_information.description.placeholder',
-            )}
-            defaultValue={description}
-            onChange={e => setDescription(e.target.value)}
-            multiline
-          />
-        }
-      />
-
-      <InputLabel
-        className="mt-4"
-        label={Languages.t('scenes.app.channelsbar.channel_information.group')}
-        input={
-          <div
-            className="cursor-pointer"
-            onClick={e => {
-              e.preventDefault();
-              e.stopPropagation();
-              setChannelGroupModal(group || '');
-            }}
-          >
-            <Select className="pointer-events-none" theme="outline">
-              {!group && (
-                <option disabled selected>
-                  {Languages.t('scenes.app.channelsbar.channel_information.group.none')}
-                </option>
-              )}
-              {group && <option>{_.capitalize(group)}</option>}
-            </Select>
-          </div>
-        }
-      />
-
-      <div className="text-center mt-6">
-        <Button
-          className="int-channel-save-information"
-          theme="primary"
-          onClick={() => {
-            props.onChange({ channel_group: group, name, description, icon });
-          }}
-          disabled={!name.trim()}
-        >
-          {Languages.t('scenes.app.channelsbar.channel_information.save')}
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/edit-channel/channel-notifications.tsx b/tdrive/frontend/src/app/components/edit-channel/channel-notifications.tsx
deleted file mode 100644
index 87247108..00000000
--- a/tdrive/frontend/src/app/components/edit-channel/channel-notifications.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Checkbox } from 'app/atoms/input/input-checkbox';
-import { useChannelMemberCurrentUser } from 'app/features/channel-members-search/hooks/member-hook';
-import { ChannelType } from 'app/features/channels/types/channel';
-import Languages from 'app/features/global/services/languages-service';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import Block from 'app/molecules/grouped-rows/base';
-import { useState } from 'react';
-
-export const ChannelNotificationsForm = (props: { channel?: ChannelType; onBack: () => void }) => {
-  const { member, setNotificationPreference } = useChannelMemberCurrentUser(
-    props.channel?.id || '',
-  );
-  const [value, _setValue] = useState(member?.notification_level || 'all');
-
-  const setValue = (value: any) => {
-    _setValue(value);
-    setNotificationPreference(value).finally(() => ToasterService.success('Updated'));
-    props.onBack();
-  };
-
-  return (
-    <div className="w-screen max-w-sm p-4 -m-4">
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.apps.messages.left_bar.stream.notifications.all')}
-        subtitle={<></>}
-        suffix={
-          <Checkbox
-            value={value === 'all'}
-            onChange={() => {
-              setValue('all');
-            }}
-          />
-        }
-      />
-
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.apps.messages.left_bar.stream.notifications.mentions', [
-          '@all',
-          '@here',
-          `@[you]`,
-        ])}
-        subtitle={<></>}
-        suffix={
-          <Checkbox
-            value={value === 'mentions'}
-            onChange={() => {
-              setValue('mentions');
-            }}
-          />
-        }
-      />
-
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.apps.messages.left_bar.stream.notifications.me', [`@[you]`])}
-        subtitle={<></>}
-        suffix={
-          <Checkbox
-            value={value === 'me'}
-            onChange={() => {
-              setValue('me');
-            }}
-          />
-        }
-      />
-
-      <Block
-        className="my-4"
-        avatar={<></>}
-        title={Languages.t('scenes.apps.messages.left_bar.stream.notifications.never')}
-        subtitle={<></>}
-        suffix={
-          <Checkbox
-            value={value === 'none'}
-            onChange={() => {
-              setValue('none');
-            }}
-          />
-        }
-      />
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/edit-channel/channel-settings-menu.tsx b/tdrive/frontend/src/app/components/edit-channel/channel-settings-menu.tsx
deleted file mode 100644
index a632315b..00000000
--- a/tdrive/frontend/src/app/components/edit-channel/channel-settings-menu.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/ban-types */
-import {
-  BellIcon,
-  ChevronRightIcon,
-  HandIcon,
-  LinkIcon,
-  LogoutIcon,
-  PhotographIcon,
-  StarIcon,
-  TrashIcon,
-} from '@heroicons/react/outline';
-import { StarIcon as StarIconSolid } from '@heroicons/react/solid';
-import Avatar from 'app/atoms/avatar';
-import { UsersIcon } from 'app/atoms/icons-agnostic';
-import A from 'app/atoms/link';
-import { Loader } from 'app/atoms/loader';
-import { Base, Info } from 'app/atoms/text';
-import { useChannelMemberCurrentUser } from 'app/features/channel-members-search/hooks/member-hook';
-import ChannelsMineAPIClient from 'app/features/channels/api/channels-mine-api-client';
-import { useFavoriteChannels } from 'app/features/channels/hooks/use-favorite-channels';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { isDirectChannel, isPrivateChannel } from 'app/features/channels/utils/utils';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import Languages from 'app/features/global/services/languages-service';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import { copyToClipboard } from 'app/features/global/utils/CopyClipboard';
-import RouterServices from 'app/features/router/services/router-service';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import workspaceUserRightsService from 'app/features/workspaces/services/workspace-user-rights-service';
-import Block from 'app/molecules/grouped-rows/base';
-import { addUrlTryDesktop } from 'app/components/desktop-redirect';
-import { useState } from 'react';
-
-export const ChannelSettingsMenu = (props: {
-  channel?: ChannelType;
-  onEditChannel?: Function;
-  onAccess?: Function;
-  onMedias?: Function;
-  onNotifications?: Function;
-  onMembers?: Function;
-  onFavorite?: Function;
-  onClose?: Function;
-}) => {
-  const icon = props.channel?.icon || '';
-  const name = props.channel?.name || '';
-
-  const { user } = useCurrentUser();
-  const canEdit =
-    props.channel?.owner === user?.id || workspaceUserRightsService.hasWorkspacePrivilege();
-  const isGuest = workspaceUserRightsService.isInvite();
-  const isDirect = isDirectChannel(props.channel?.visibility || '');
-  const canLeave = !isGuest || isDirect;
-  const canRemove =
-    user?.id === props.channel?.owner || workspaceUserRightsService.hasWorkspacePrivilege();
-
-  return (
-    <div className="w-screen max-w-sm p-4 -m-4">
-      {!isDirect && (
-        <>
-          <Block
-            onClick={() => {
-              canEdit && props.onEditChannel && props.onEditChannel();
-            }}
-            className={
-              '-mx-2 my-2 p-2 rounded-md ' +
-              (canEdit ? 'cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800' : '')
-            }
-            title={<span className="capitalize">{name || ''}</span>}
-            subtitle={
-              canEdit ? (
-                <Info>
-                  <A>{Languages.t('scenes.app.channelsbar.channel_information')}</A>
-                </Info>
-              ) : (
-                <></>
-              )
-            }
-            avatar={<Avatar size="lg" avatar={icon.length > 20 ? icon : ''} title={name || ''} />}
-            suffix={canEdit ? <ChevronRightIcon className="w-5 h-5 text-zinc-500" /> : <></>}
-          />
-          {canRemove && <RemoveBlock channel={props.channel} onLeave={props.onClose} />}
-
-          <hr className="my-2 -mx-4" />
-          <Block
-            onClick={() => {
-              canEdit && props.onAccess && props.onAccess();
-            }}
-            className={
-              '-mx-2 my-1 p-2 rounded-md ' +
-              (canEdit ? 'cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800' : '')
-            }
-            title={
-              <Base className="font-semibold">
-                {Languages.t('scenes.app.channelsbar.channel_access')}
-              </Base>
-            }
-            subtitle={<></>}
-            avatar={<HandIcon className="text-blue-500 w-6 h-6" />}
-            suffix={
-              <div className="flex flex-row items-center justify-center">
-                <Info className="block mr-2">
-                  {props.channel?.visibility === 'public' ? 'Public' : 'Private'}
-                </Info>
-                {canEdit ? <ChevronRightIcon className="w-5 h-5 text-zinc-500" /> : <> </>}
-              </div>
-            }
-          />
-          {!isGuest && !!props.onMembers && (
-            <Block
-              onClick={() => {
-                props.onMembers && props.onMembers();
-              }}
-              className={
-                '-mx-2 my-1 p-2 rounded-md ' +
-                (canEdit ? 'cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800' : '')
-              }
-              title={
-                <Base className="font-semibold">
-                  {Languages.t('scenes.apps.parameters.workspace_sections.members')}
-                </Base>
-              }
-              subtitle={<></>}
-              avatar={<UsersIcon className="text-blue-500 w-6 h-6" />}
-              suffix={<ChevronRightIcon className="w-5 h-5 text-zinc-500" />}
-            />
-          )}
-        </>
-      )}
-      <Block
-        onClick={() => {
-          props.onMedias && props.onMedias();
-        }}
-        className="-mx-2 my-1 p-2 rounded-md cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800"
-        title={
-          <Base className="font-semibold">
-            {Languages.t('components.channel_attachement_list.title')}
-          </Base>
-        }
-        subtitle={<></>}
-        avatar={<PhotographIcon className="text-blue-500 w-6 h-6" />}
-        suffix={<ChevronRightIcon className="w-5 h-5 text-zinc-500" />}
-      />
-      <hr className="my-2 -mx-4" />
-
-      <Block
-        onClick={() => {
-          const url = addUrlTryDesktop(
-            `${document.location.origin}${RouterServices.generateRouteFromState({
-              workspaceId: props.channel?.workspace_id || '',
-              companyId: props.channel?.company_id,
-              channelId: props.channel?.id,
-            })}`,
-          );
-          copyToClipboard(url);
-          ToasterService.success(Languages.t('components.input.copied'));
-        }}
-        className={
-          '-mx-2 my-1 p-2 rounded-md cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800'
-        }
-        title={
-          <Base className="font-semibold">
-            {Languages.t('scenes.app.channelsbar.channel_copy_link')}
-          </Base>
-        }
-        subtitle={<></>}
-        avatar={<LinkIcon className="text-blue-500 w-6 h-6" />}
-        suffix={<></>}
-      />
-      <FavoriteBlock channel={props.channel} />
-      {!isDirect && (
-        <NotificationsBlock
-          channel={props.channel}
-          onClick={() => {
-            props.onNotifications && props.onNotifications();
-          }}
-        />
-      )}
-
-      {canLeave && <LeaveBlock channel={props.channel} onLeave={props.onClose} />}
-      <div className="-mb-2" />
-    </div>
-  );
-};
-
-const RemoveBlock = (props: { channel?: ChannelType; onLeave?: Function }) => {
-  const { refresh: refreshAllChannels } = useFavoriteChannels();
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <Block
-      onClick={async () => {
-        AlertManager.confirm(async () => {
-          setLoading(true);
-          await ChannelsMineAPIClient.removeChannel(
-            props.channel?.company_id || '',
-            props.channel?.workspace_id || '',
-            props.channel?.id || '',
-          );
-          await refreshAllChannels();
-
-          RouterServices.push(
-            RouterServices.generateRouteFromState({
-              companyId: props.channel?.company_id || '',
-              workspaceId: props.channel?.workspace_id || '',
-              channelId: '',
-            }),
-          );
-
-          props.onLeave && props.onLeave();
-        });
-      }}
-      className="-mx-2 my-1 p-2 rounded-md cursor-pointer hover:bg-rose-50 dark:hover:bg-rose-800"
-      title={
-        <Base noColor className="font-semibold text-rose-500">
-          {Languages.t('scenes.app.channelsbar.channel_removing')}
-        </Base>
-      }
-      subtitle={<></>}
-      avatar={
-        loading ? (
-          <Loader className="w-4 h-4 m-1" />
-        ) : (
-          <TrashIcon className="text-rose-500 w-6 h-6" />
-        )
-      }
-    />
-  );
-};
-
-const LeaveBlock = (props: { channel?: ChannelType; onLeave?: Function }) => {
-  const { refresh: refreshAllChannels } = useFavoriteChannels();
-  const { user } = useCurrentUser();
-  const [loading, setLoading] = useState(false);
-
-  const leaveChannel = async (isDirectChannel = false) => {
-    setLoading(true);
-    if (props.channel?.id && props.channel?.company_id && props.channel.workspace_id) {
-      const res = await ChannelsMineAPIClient.removeUser(user?.id || '', {
-        companyId: props.channel.company_id,
-        workspaceId: isDirectChannel ? 'direct' : props.channel.workspace_id,
-        channelId: props.channel.id,
-      });
-
-      if (res?.error?.length && res?.message?.length) {
-        ToasterService.error(`${res.error} - ${res.message}`);
-      } else {
-        await refreshAllChannels();
-
-        RouterServices.push(
-          RouterServices.generateRouteFromState({
-            companyId: props.channel?.company_id || '',
-            workspaceId: props.channel?.workspace_id || '',
-            channelId: '',
-          }),
-        );
-
-        props.onLeave && props.onLeave();
-      }
-      await refreshAllChannels();
-    }
-
-    setLoading(false);
-  };
-
-  return (
-    <Block
-      onClick={async () => {
-        if (props.channel!.visibility) {
-          if (isPrivateChannel(props.channel!.visibility)) {
-            return AlertManager.confirm(() => leaveChannel(), undefined, {
-              title: Languages.t('components.alert.leave_private_channel.title'),
-              text: Languages.t('components.alert.leave_private_channel.description'),
-            });
-          }
-          if (isDirectChannel(props.channel!.visibility)) {
-            return leaveChannel(true);
-          }
-        }
-
-        return leaveChannel();
-      }}
-      className="-mx-2 my-1 p-2 rounded-md cursor-pointer hover:bg-rose-50 dark:hover:bg-rose-800"
-      title={
-        <Base noColor className="font-semibold text-rose-500">
-          {Languages.t('scenes.app.channelsbar.channel_leaving')}
-        </Base>
-      }
-      subtitle={<></>}
-      avatar={
-        loading ? (
-          <Loader className="w-4 h-4 m-1" />
-        ) : (
-          <LogoutIcon className="text-rose-500 w-6 h-6" />
-        )
-      }
-    />
-  );
-};
-
-const NotificationsBlock = (props: { channel?: ChannelType; onClick: Function }) => {
-  const { member } = useChannelMemberCurrentUser(props.channel?.id || '');
-
-  return (
-    <Block
-      onClick={() => {
-        props.onClick();
-      }}
-      className="-mx-2 my-1 p-2 rounded-md cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800"
-      title={
-        <Base className="font-semibold">
-          {Languages.t('scenes.app.channelsbar.currentuser.user_parameter')}
-        </Base>
-      }
-      subtitle={<></>}
-      avatar={<BellIcon className="text-blue-500 w-6 h-6" />}
-      suffix={
-        <div className="flex flex-row items-center justify-center">
-          <Info className="block mr-2">
-            {member?.notification_level === 'all' &&
-              Languages.t('scenes.apps.messages.left_bar.stream.notifications.all')}
-            {member?.notification_level === 'mentions' && '@all, @[you]'}
-            {member?.notification_level === 'me' &&
-              Languages.t('scenes.apps.messages.left_bar.stream.notifications.me', [`@[you]`])}
-            {member?.notification_level === 'none' &&
-              Languages.t('scenes.apps.messages.left_bar.stream.notifications.never')}
-          </Info>
-          <ChevronRightIcon className="w-5 h-5 text-zinc-500" />
-        </div>
-      }
-    />
-  );
-};
-
-const FavoriteBlock = (props: { channel?: ChannelType }) => {
-  const { favorite, setFavorite } = useChannelMemberCurrentUser(props.channel?.id || '');
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <Block
-      onClick={async () => {
-        setLoading(true);
-        await setFavorite(!favorite);
-        setLoading(false);
-      }}
-      className="-mx-2 my-1 p-2 rounded-md cursor-pointer hover:bg-blue-50 dark:hover:bg-zinc-800"
-      title={
-        <Base className="font-semibold">
-          {Languages.t(
-            favorite
-              ? 'scenes.apps.messages.left_bar.stream.remove_from_favorites'
-              : 'scenes.apps.messages.left_bar.stream.add_to_favorites',
-          )}
-        </Base>
-      }
-      subtitle={<></>}
-      avatar={
-        loading ? (
-          <Loader className="text-blue-500 w-4 h-4 m-1" />
-        ) : favorite ? (
-          <StarIconSolid className="text-yellow-500 w-6 h-6" />
-        ) : (
-          <StarIcon className="text-blue-500 w-6 h-6" />
-        )
-      }
-    />
-  );
-};
diff --git a/tdrive/frontend/src/app/components/edit-channel/index.tsx b/tdrive/frontend/src/app/components/edit-channel/index.tsx
deleted file mode 100644
index dc97247a..00000000
--- a/tdrive/frontend/src/app/components/edit-channel/index.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { Transition } from '@headlessui/react';
-import { ChevronLeftIcon } from '@heroicons/react/outline';
-import A from 'app/atoms/link';
-import { Loader } from 'app/atoms/loader';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { useUsersSearchModal } from 'app/features/channel-members-search/state/search-channel-member';
-import ChannelAPIClient from 'app/features/channels/api/channel-api-client';
-import { useChannel } from 'app/features/channels/hooks/use-channel';
-import { useFavoriteChannels } from 'app/features/channels/hooks/use-favorite-channels';
-import { channelAttachmentListState } from 'app/features/channels/state/channel-attachment-list';
-import { ChannelType } from 'app/features/channels/types/channel';
-import useRouteState from 'app/features/router/hooks/use-route-state';
-import { useEffect, useState } from 'react';
-import { atom, useRecoilState, useSetRecoilState } from 'recoil';
-import { slideXTransition, slideXTransitionReverted } from 'src/utils/transitions';
-import { ChannelAccessForm } from './channel-access';
-import { ChannelInformationForm } from './channel-information';
-import { ChannelNotificationsForm } from './channel-notifications';
-import { ChannelSettingsMenu } from './channel-settings-menu';
-import RouterServices from '@features/router/services/router-service';
-import Languages from 'app/features/global/services/languages-service';
-
-const EditChannelModalAtom = atom({
-  key: 'EditChannelModalAtom',
-  default: {
-    open: false,
-    channelId: '',
-  },
-});
-
-export const useOpenChannelModal = () => {
-  const setModal = useSetRecoilState(EditChannelModalAtom);
-  return (channelId: string) => setModal({ open: true, channelId });
-};
-
-export const EditChannelModal = () => {
-  const [channelModal, setChannelModal] = useRecoilState(EditChannelModalAtom);
-
-  return (
-    <Modal
-      open={channelModal.open}
-      onClose={() => setChannelModal({ ...channelModal, open: false })}
-      className="int-channel-edit-modal !max-w-sm"
-    >
-      {!channelModal.channelId && <CreateChannelForm />}
-      {!!channelModal.channelId && <EditChannelForm />}
-    </Modal>
-  );
-};
-
-const EditChannelForm = () => {
-  const [channelModal, setChannelModal] = useRecoilState(EditChannelModalAtom);
-  const [page, setPage] = useState<'information' | 'access' | 'notifications' | 'menu'>('menu');
-  const { setOpen: setParticipantsOpen } = useUsersSearchModal();
-  const [, setChannelAttachmentState] = useRecoilState(channelAttachmentListState);
-  const { refresh } = useFavoriteChannels();
-
-  const { channel } = useChannel(channelModal.channelId);
-
-  return (
-    <ModalContent
-      title={
-        <div className="flex flex-row items-center justify-start">
-          {page !== 'menu' && (
-            <A onClick={() => setPage('menu')}>
-              <ChevronLeftIcon className="w-6 h-6" />
-            </A>
-          )}
-          <span className="ml-2">{Languages.t('scenes.app.channelsbar.modify_channel_menu')}</span>
-        </div>
-      }
-    >
-      <hr className="my-1 -mx-4" />
-
-      <div
-        style={{
-          display: 'grid',
-          gridTemplate: '1fr / 1fr',
-        }}
-      >
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={page === 'menu'}
-          as="div"
-          {...(page === 'menu' ? slideXTransitionReverted : slideXTransition)}
-        >
-          <ChannelSettingsMenu
-            onEditChannel={() => setPage('information')}
-            onAccess={() => setPage('access')}
-            onNotifications={() => setPage('notifications')}
-            onClose={() => {
-              setChannelModal({ ...channelModal, open: false });
-            }}
-            onMembers={() => {
-              setChannelModal({ ...channelModal, open: false });
-              setTimeout(() => setParticipantsOpen(true), 500);
-            }}
-            onMedias={() => {
-              setChannelModal({ ...channelModal, open: false });
-              setTimeout(() => setChannelAttachmentState(true), 500);
-            }}
-            channel={channel}
-          />
-        </Transition>
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={page === 'information'}
-          as="div"
-          {...(page === 'menu' ? slideXTransitionReverted : slideXTransition)}
-        >
-          <ChannelInformationForm
-            onChange={async changes => {
-              setPage('menu');
-              await ChannelAPIClient.save(
-                { ...channel, ...changes },
-                {
-                  companyId: channel.company_id!,
-                  workspaceId: channel.workspace_id!,
-                  channelId: channel.id,
-                },
-              );
-              await refresh();
-            }}
-            channel={channel}
-          />
-        </Transition>
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={page === 'access'}
-          as="div"
-          {...(page === 'menu' ? slideXTransitionReverted : slideXTransition)}
-        >
-          <ChannelAccessForm
-            onChange={async changes => {
-              await ChannelAPIClient.save(
-                { ...channel, ...changes },
-                {
-                  companyId: channel.company_id!,
-                  workspaceId: channel.workspace_id!,
-                  channelId: channel.id,
-                },
-              );
-              await refresh();
-              setPage('menu');
-            }}
-            channel={channel}
-          />
-        </Transition>
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={page === 'notifications'}
-          as="div"
-          {...(page === 'menu' ? slideXTransitionReverted : slideXTransition)}
-        >
-          <ChannelNotificationsForm onBack={() => setPage('menu')} channel={channel} />
-        </Transition>
-      </div>
-    </ModalContent>
-  );
-};
-
-const CreateChannelForm = () => {
-  const setChannelModal = useSetRecoilState(EditChannelModalAtom);
-  const { setOpen: setParticipantsOpen } = useUsersSearchModal();
-  const { companyId, workspaceId } = useRouteState();
-  const { refresh } = useFavoriteChannels();
-
-  const [step, setStep] = useState(0);
-  const [channel, setChannel] = useState<Partial<ChannelType>>({});
-
-  useEffect(() => {
-    if (step === 2) {
-      (async () => {
-        const created = await ChannelAPIClient.save(channel, {
-          companyId: companyId!,
-          workspaceId: workspaceId!,
-        });
-        await refresh();
-        RouterServices.push(RouterServices.generateRouteFromState({ channelId: created.id }));
-        setChannelModal({ open: false, channelId: '' });
-        setTimeout(() => {
-          setParticipantsOpen(true);
-        }, 500);
-      })();
-    }
-  }, [step]);
-
-  return (
-    <ModalContent title={Languages.t('scenes.app.channelsbar.channelsworkspace.create_channel')}>
-      <hr className="my-1 -mx-4" />
-
-      <div
-        style={{
-          display: 'grid',
-          gridTemplate: '1fr / 1fr',
-        }}
-      >
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={step === 0}
-          as="div"
-          {...slideXTransition}
-        >
-          <ChannelInformationForm
-            onChange={changes => {
-              setStep(1);
-              setChannel({ ...channel, ...changes });
-            }}
-          />
-        </Transition>
-
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={step === 1}
-          as="div"
-          {...slideXTransition}
-        >
-          <ChannelAccessForm
-            onChange={async changes => {
-              setStep(2);
-              setChannel({ ...channel, ...changes });
-            }}
-          />
-        </Transition>
-
-        <Transition
-          style={{
-            gridColumn: '1 / 1',
-            gridRow: '1 / 1',
-          }}
-          show={step === 2}
-          as="div"
-          {...slideXTransition}
-        >
-          <div className="flex items-center justify-center w-screen max-w-md h-screen max-h-96">
-            <Loader className="w-6 h-6" />
-          </div>
-        </Transition>
-      </div>
-    </ModalContent>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/editable-text/editable-text.jsx b/tdrive/frontend/src/app/components/editable-text/editable-text.jsx
deleted file mode 100755
index acb509c4..00000000
--- a/tdrive/frontend/src/app/components/editable-text/editable-text.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import './editable-text.scss';
-
-import Input from 'components/inputs/input.jsx';
-
-export default class EditableText extends React.Component {
-  constructor(props) {
-    super();
-    this.props = props;
-
-    this.state = {
-      value: '#FF0000',
-    };
-  }
-  render() {
-    return (
-      <div className="color_input big">
-        <Input
-          value={this.state.value}
-          onChange={evt => this.setState({ value: evt.target.value })}
-        />
-        <div className="color_square" style={{ backgroundColor: this.state.value }} />
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/editable-text/editable-text.scss b/tdrive/frontend/src/app/components/editable-text/editable-text.scss
deleted file mode 100755
index b44898cd..00000000
--- a/tdrive/frontend/src/app/components/editable-text/editable-text.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.color_input {
-  position: relative;
-
-  .color_square {
-    position: absolute;
-    left: 8px;
-    top: 8px;
-    width: 24px;
-    height: 24px;
-    border-radius: var(--border-radius-base);
-  }
-
-  input {
-    background: #888;
-    padding-left: 40px !important;
-    box-sizing: border-box;
-    width: 120px;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/emoji-picker/emoji-picker.jsx b/tdrive/frontend/src/app/components/emoji-picker/emoji-picker.jsx
deleted file mode 100755
index e232d9c8..00000000
--- a/tdrive/frontend/src/app/components/emoji-picker/emoji-picker.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { Picker } from 'emoji-mart';
-import Emojione from 'components/emojione/emojione';
-import { getAsFrontUrl } from 'app/features/global/utils/URLUtils';
-import './emoji-picker.scss';
-import 'emoji-mart/css/emoji-mart.css';
-import Languages from 'app/features/global/services/languages-service';
-import { isArray } from 'lodash';
-
-Picker.defaultProps.backgroundImageFn = function backgroundImageFn(set, sheetSize) {
-  sheetSize = 20;
-  return getAsFrontUrl(
-    '/public/emoji-datasource/'.concat(set, '/sheets-256/').concat(sheetSize, '.png'),
-  );
-};
-export default class EmojiPicker extends React.Component {
-  /*
-        props = {
-            preferedEmoji : Array of emoji's shortname
-            onChange : called when a smiley is selected
-        }
-    */
-  constructor(props) {
-    super();
-    this.props = props;
-    this.state = {
-      suggestions: [],
-      currentTitle: '',
-      availableCategories: [],
-      scrollToRow: 0,
-      loaded: false,
-    };
-    this.currentTitleIndex = 100000;
-    this.clickScrollToRow = 0;
-  }
-  onChange(list) {
-    if (list.length > 0) {
-      if (this.props.onChange) {
-        this.props.onChange(list[0]);
-      }
-      this.setState({ list: [] });
-    }
-  }
-  renderItemChoosen(item) {
-    return (
-      <div className="itemResult itemResultChoosen">
-        <Emojione type={(item || {}).shortname} />
-      </div>
-    );
-  }
-  renderItem(item) {
-    return (
-      <div className="itemResult hoverable">
-        <Emojione type={item.shortname} />
-      </div>
-    );
-  }
-  scrollToCategory(category) {
-    var index = 0;
-    this.state.suggestions.forEach((item, i) => {
-      if (item.value == category) {
-        index = i;
-        return false;
-      }
-    });
-    this.clickScrollToRow = index;
-    if (this.state.scrollToRow != index) {
-      this.setState({ scrollToRow: index });
-    } else {
-      this.list_node.forceUpdateGrid();
-    }
-  }
-  select(emoji) {
-    if (this.picker) {
-      this.picker.onSelect(emoji);
-    } else {
-      this.onChange([emoji]);
-    }
-  }
-  getPrefered() {
-    var pref = this.props.preferedEmoji || [
-      ':thumbsup:',
-      ':thumbsdown:',
-      ':hearts:',
-      ':tada:',
-      ':smile:',
-      ':confused:',
-    ];
-    if (
-      typeof this.props.selected === 'string' &&
-      this.props.selected &&
-      pref.indexOf(this.props.selected) < 0
-    ) {
-      pref.unshift(this.props.selected);
-    }
-    if (isArray(this.props.selected)) {
-      this.props.selected.forEach(s => pref.unshift(s));
-    }
-    return pref;
-  }
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ loaded: true });
-    }, 300);
-  }
-  render() {
-    if (!this.state.loaded) {
-      return <div style={{ height: 356 }}></div>;
-    }
-    return (
-      <div className="menu-cancel-margin">
-        <Picker
-          set="apple"
-          i18n={{
-            search: Languages.t('components.emoji_picker.input_search_placeholder'),
-            notfound: Languages.t('components.emoji_picker.categories.not_found'),
-            categories: {
-              search: Languages.t('components.emoji_picker.categories.search_result'),
-              recent: Languages.t('components.emoji_picker.categories.frequently_used'),
-              people: Languages.t('components.emoji_picker.categories.smileys_and_people'),
-              nature: Languages.t('components.emoji_picker.categories.animals_and_nature'),
-              foods: Languages.t('components.emoji_picker.categories.food_and_drink'),
-              activity: Languages.t('components.emoji_picker.categories.activity'),
-              places: Languages.t('components.emoji_picker.categories.travel_and_places'),
-              objects: Languages.t('components.emoji_picker.categories.objects'),
-              symbols: Languages.t('components.emoji_picker.categories.symbols'),
-              flags: Languages.t('components.emoji_picker.categories.flags'),
-            },
-          }}
-          showPreview={false}
-          showSkinTones={false}
-          autoFocus
-          perLine={6}
-          onSelect={this.props.onChange}
-          color={'var(--primary)'}
-          emojiSize={20}
-        />
-      </div>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/emoji-picker/emoji-picker.scss b/tdrive/frontend/src/app/components/emoji-picker/emoji-picker.scss
deleted file mode 100755
index 98fa496f..00000000
--- a/tdrive/frontend/src/app/components/emoji-picker/emoji-picker.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.emoji-mart {
-  border: none;
-  color: var(--grey-dark);
-  font-size: 14px;
-  width: unset !important;
-  left: 0px;
-  .emoji-mart-emoji {
-    padding: 7px;
-  }
-}
-
-.emoji-mart-search > input {
-  padding-top: 6px;
-  font-size: 14px;
-}
-.emoji-mart-emoji {
-  display: inline-flex;
-  align-items: center;
-}
diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx
index ba47ec81..545fda1e 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx
@@ -10,11 +10,9 @@ import {
   isPendingFileStatusPending,
   isPendingFileStatusSuccess,
 } from '../../../features/files/utils/pending-files';
-import Languages from 'app/features/global/services/languages-service';
-import { useUpload } from 'app/features/files/hooks/use-upload';
-import { PendingFileRecoilType, PendingFileType } from 'app/features/files/types/file';
-
-import '../../file/file.scss';
+import Languages from '@features/global/services/languages-service';
+import { useUpload } from '@features/files/hooks/use-upload';
+import { PendingFileRecoilType, PendingFileType } from '@features/files/types/file';
 
 type PropsType = {
   pendingFileState: PendingFileRecoilType;
diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-files-list.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-files-list.tsx
index 321d9dc0..b66afbcc 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-files-list.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-files-list.tsx
@@ -6,9 +6,9 @@ import PerfectScrollbar from 'react-perfect-scrollbar';
 import moment from 'moment';
 
 import PendingFileRow from './pending-file-row';
-import Languages from 'app/features/global/services/languages-service';
-import { PendingFileRecoilType } from 'app/features/files/types/file';
-import { useUpload } from 'app/features/files/hooks/use-upload';
+import Languages from '@features/global/services/languages-service';
+import { PendingFileRecoilType } from '@features/files/types/file';
+import { useUpload } from '@features/files/hooks/use-upload';
 
 import './styles.scss';
 
diff --git a/tdrive/frontend/src/app/components/file-uploads/uploads-viewer.tsx b/tdrive/frontend/src/app/components/file-uploads/uploads-viewer.tsx
index 9d025701..552e4b45 100644
--- a/tdrive/frontend/src/app/components/file-uploads/uploads-viewer.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/uploads-viewer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useUpload } from 'app/features/files/hooks/use-upload';
+import { useUpload } from '@features/files/hooks/use-upload';
 import PendingFilesList from './pending-file-components/pending-files-list';
 
 const ChatUploadsViewer = (): JSX.Element => {
diff --git a/tdrive/frontend/src/app/components/file/file-component.tsx b/tdrive/frontend/src/app/components/file/file-component.tsx
deleted file mode 100644
index 9d5c617a..00000000
--- a/tdrive/frontend/src/app/components/file/file-component.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect } from 'react';
-import classNames, { Argument } from 'classnames';
-
-import { FileThumbnail, FileDetails, FileActions, FileProgress } from './parts';
-import {
-  isPendingFileStatusCancel,
-  isPendingFileStatusError,
-  isPendingFileStatusSuccess,
-} from 'app/features/files/utils/pending-files';
-import { DataFileType } from './types';
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
-import RouterService from 'app/features/router/services/router-service';
-
-import './file.scss';
-import { PendingFileRecoilType } from 'app/features/files/types/file';
-import Api from 'app/features/global/framework/api-service';
-import FileUploadAPIClient from '../../features/files/api/file-upload-api-client';
-import LargePreview from './parts/large-preview';
-import { MessageFileType } from 'app/features/messages/types/message';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-
-type PropsType = {
-  source: 'internal' | 'drive' | string;
-  externalId: string | any;
-  file: DataFileType;
-  messageFile: MessageFileType;
-  context: 'input' | 'message' | 'drive';
-  progress?: number;
-  status?: PendingFileRecoilType['status'];
-  onRemove?: () => void;
-  className?: string;
-  large?: boolean;
-  xlarge?: boolean;
-};
-
-export default ({
-  source,
-  externalId,
-  file: _file,
-  messageFile,
-  className,
-  context,
-  progress,
-  status,
-  onRemove,
-  large,
-  xlarge,
-}: PropsType) => {
-  const { companyId, workspaceId } = RouterService.getStateFromRoute();
-  const [file, setFile] = useState<DataFileType>(_file);
-  const classNameArguments: Argument[] = [
-    'file-component',
-    className,
-    { 'large-view': large },
-    {
-      'file-component-error':
-        status && (isPendingFileStatusError(status) || isPendingFileStatusCancel(status)),
-      'file-component-uploading': progress != undefined && progress < 1,
-    },
-  ];
-
-  const { open: openViewer } = useFileViewerModal();
-
-  useEffect(() => {
-    if (source === 'drive') {
-      (async () => {
-        if (typeof externalId === 'string') {
-          externalId = { id: externalId, workspace_id: workspaceId };
-        }
-
-        let driveFile = (await Api.post('/ajax/drive/v2/find', {
-          options: {
-            element_id: externalId?.id,
-            workspace_id: externalId?.workspace_id,
-          },
-        })) as any;
-        driveFile = driveFile?.data || {};
-
-        setFile({
-          ...file,
-          thumbnail: driveFile.preview_link,
-          name: driveFile.name,
-          size: driveFile.size,
-          type: FileUploadAPIClient.mimeToType(
-            FileUploadAPIClient.extensionToMime(driveFile.extension),
-          ),
-        });
-      })();
-    } else {
-      setFile(_file);
-    }
-  }, [_file]);
-
-  const onClickFile = async () => {
-    if (source === 'internal') {
-      //Only if upload has ended
-      if ((!status || isPendingFileStatusSuccess(status)) && file.id) openViewer(messageFile);
-    }
-    if (source === 'drive') {
-      if (typeof externalId === 'string') {
-        externalId = { id: externalId, workspace_id: workspaceId };
-      }
-
-      const file = (await Api.post('/ajax/drive/v2/find', {
-        options: {
-          element_id: externalId?.id,
-          workspace_id: externalId?.workspace_id,
-        },
-      })) as any;
-      DriveService.viewDocument(file?.data, context === 'input');
-    }
-  };
-
-  let computedHeight = 200;
-  let computedWidth = file.thumbnail_ratio * 200;
-  const isMediaFile = ['image', 'video'].includes(file.type);
-
-  if (xlarge) {
-    computedWidth = Math.max(
-      160,
-      Math.min(
-        Math.min(messageFile.metadata?.thumbnails?.[0]?.width || 600, 600),
-        file.thumbnail_ratio * document.body.clientHeight * 0.5,
-      ),
-    );
-    computedHeight = Math.max(
-      200,
-      Math.min(
-        Math.min(
-          messageFile.metadata?.thumbnails?.[0]?.height || 10000,
-          document.body.clientHeight * 0.5,
-        ),
-        computedWidth / file.thumbnail_ratio,
-      ),
-    );
-  }
-
-  return (
-    <div
-      className={classNames(classNameArguments)}
-      style={large ? { width: computedWidth, height: computedHeight } : {}}
-      onClick={() => companyId && onClickFile()}
-    >
-      {large && <LargePreview file={file} />}
-      <div
-        className={classNames('file-info-container', {
-          'media-file-info-container': isMediaFile,
-        })}
-      >
-        <FileThumbnail file={file} />
-        <FileDetails file={file} source={source} />
-        <FileActions
-          deletable={context === 'input'}
-          actionMenu={context === 'message' && source === 'internal'}
-          status={status}
-          file={file}
-          messageFile={messageFile}
-          onRemove={onRemove}
-          source={source}
-        />
-      </div>
-      <FileProgress progress={progress} status={status} file={file} />
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/file/file.scss b/tdrive/frontend/src/app/components/file/file.scss
deleted file mode 100644
index 8c1c5432..00000000
--- a/tdrive/frontend/src/app/components/file/file.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-.file-component {
-  border: 1px solid var(--grey-light);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 8px 8px 8px 8px;
-  width: 218px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-  min-height: 50px;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &.large-view {
-    min-height: 200px;
-    max-height: 500px;
-    max-width: 90%;
-    min-width: 160px;
-    position: relative;
-
-    .file-large-preview {
-      position: absolute;
-      height: 100%;
-      top: 0px;
-      left: 0px;
-      right: 0px;
-      background-size: contain;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-
-    &:hover {
-      .file-info-container {
-        opacity: 1;
-        transition: opacity 0s;
-      }
-    }
-
-    .file-info-container {
-      background-color: #fffffff0;
-      position: absolute;
-      border-top: 1px solid var(--grey-light);
-      bottom: 0px;
-      width: 100%;
-
-      .file-thumbnail-container {
-        display: none;
-      }
-    }
-
-    .media-file-info-container {
-      opacity: 0;
-      transition: opacity 0.2s;
-    }
-
-    .file-large-preview-play-container {
-      width: 64px;
-      height: 64px;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 15px;
-    }
-  }
-
-  &.file-component-uploading {
-    border-radius: 8px 8px 0px 0px;
-
-    & .file-info-container {
-      opacity: 0.5;
-    }
-
-    .file-info-container {
-      padding-bottom: 0;
-    }
-
-    .file-progress-bar-container {
-      padding-top: 3px;
-      padding-bottom: 3px;
-      height: 5px;
-    }
-  }
-
-  &.file-component-error {
-    background: var(--error-background);
-  }
-
-  .file-info-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 8px 8px 6px 8px;
-
-    .file-thumbnail-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-
-      .file-thumbnail-component {
-        border-radius: 4px;
-      }
-    }
-
-    .file-component-details {
-      overflow: hidden;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-
-      .ant-tag {
-        height: 15px;
-        line-height: 15px;
-        padding: 0 4px;
-      }
-    }
-  }
-
-  .file-menu {
-    display: flex;
-
-    align-items: center;
-    justify-content: space-between;
-
-    .ant-btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      &:hover {
-        color: var(--black);
-      }
-      color: var(--grey-dark);
-      background-color: transparent;
-    }
-  }
-}
-
-.file-progress-bar-container {
-  display: flex;
-
-  .file-progress-bar {
-    .ant-progress-outer {
-      height: 3px;
-      display: flex;
-
-      .ant-progress-inner {
-        border-radius: 0px;
-
-        .ant-progress-bg {
-          border-radius: 2px;
-          height: 3px !important;
-          transition: all 0.2s;
-        }
-      }
-    }
-  }
-}
diff --git a/tdrive/frontend/src/app/components/file/parts/actions.tsx b/tdrive/frontend/src/app/components/file/parts/actions.tsx
deleted file mode 100644
index fcdd5833..00000000
--- a/tdrive/frontend/src/app/components/file/parts/actions.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useRef } from 'react';
-import { Button } from 'antd';
-import { MoreHorizontal, RotateCw, X } from 'react-feather';
-
-import {
-  isPendingFileStatusPending,
-  isPendingFileStatusPause,
-  isPendingFileStatusSuccess,
-  isPendingFileStatusError,
-  isPendingFileStatusCancel,
-} from 'app/features/files/utils/pending-files';
-import Languages from 'app/features/global/services/languages-service';
-import { useUpload } from 'app/features/files/hooks/use-upload';
-import { DataFileType } from '../types';
-import MenuManager from 'app/components/menus/menus-manager';
-import { PendingFileRecoilType } from 'app/features/files/types/file';
-import { MessageFileType } from 'app/features/messages/types/message';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-import { useEditors } from 'app/views/client/viewer/other/editors-service';
-
-type PropsType = {
-  file: DataFileType;
-  messageFile: MessageFileType;
-  status?: PendingFileRecoilType['status'];
-  deletable?: boolean;
-  actionMenu?: boolean;
-  onRemove?: () => void;
-  source?: string;
-};
-
-export const FileActions = ({
-  file,
-  messageFile,
-  status,
-  deletable,
-  actionMenu,
-  onRemove,
-}: PropsType): JSX.Element => {
-  const { cancelUpload, deleteOneFile, downloadOneFile, retryUpload } = useUpload();
-  const menuRef = useRef<HTMLElement>();
-  const { open: openPreview } = useFileViewerModal();
-  const { candidates } = useEditors(file.name.split('.').pop() || '');
-
-  const onClickDownload = async () => {
-    file.company_id &&
-      (await downloadOneFile({
-        companyId: file.company_id,
-        fileId: file.id,
-        messageFile,
-      }));
-  };
-
-  const onClickOpen = async () => {
-    openPreview(messageFile);
-  };
-
-  const buildMenu = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    e.stopPropagation();
-
-    const menu = [
-      {
-        type: 'menu',
-        text: Languages.t('scenes.apps.drive.download_button'),
-        onClick: onClickDownload,
-      },
-    ];
-
-    if (candidates.length > 0) {
-      const openerName = candidates[0].name || candidates[0].app?.identity.name;
-
-      menu.push({
-        type: 'menu',
-        text: Languages.t(
-          'scenes.apps.drive.viewer.edit_with_button',
-          [openerName],
-          `Edit with ${openerName}`,
-        ),
-        onClick: onClickOpen,
-      });
-    }
-
-    MenuManager.openMenu(menu, (window as any).getBoundingClientRect(menuRef.current), null, {
-      margin: 0,
-    });
-  };
-
-  const onClickCancel = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (status && isPendingFileStatusSuccess(status)) {
-      if (file.id) deleteOneFile(file.id);
-    } else {
-      cancelUpload(file.id);
-    }
-
-    if (onRemove) onRemove();
-  };
-
-  const onClickRetry = () => {
-    retryUpload(file.id);
-  };
-
-  const setActions = () => {
-    if (actionMenu) {
-      return (
-        <Button
-          ref={node => node && (menuRef.current = node)}
-          shape="circle"
-          icon={<MoreHorizontal size={16} />}
-          onClick={buildMenu}
-        />
-      );
-    }
-
-    if (deletable && status) {
-      if (isPendingFileStatusError(status)) {
-        return (
-          <>
-            <Button
-              shape="circle"
-              icon={<RotateCw size={16} color="var(--error)" />}
-              onClick={onClickRetry}
-            />
-            <Button
-              shape="circle"
-              icon={<X size={16} color="var(--error)" />}
-              onClick={onClickCancel}
-            />
-          </>
-        );
-      }
-
-      if (
-        isPendingFileStatusPending(status) ||
-        isPendingFileStatusPause(status) ||
-        isPendingFileStatusSuccess(status)
-      ) {
-        return <Button shape="circle" icon={<X size={16} />} onClick={onClickCancel} />;
-      }
-
-      if (isPendingFileStatusCancel(status)) {
-        return <></>;
-      }
-    }
-  };
-
-  return <div className="file-menu">{setActions()}</div>;
-};
-
-export default FileActions;
diff --git a/tdrive/frontend/src/app/components/file/parts/details.tsx b/tdrive/frontend/src/app/components/file/parts/details.tsx
deleted file mode 100644
index d091b8de..00000000
--- a/tdrive/frontend/src/app/components/file/parts/details.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { Tag, Typography } from 'antd';
-import { capitalize } from 'lodash';
-
-import Numbers from 'app/features/global/utils/Numbers';
-import { DataFileType } from '../types';
-
-type PropsType = {
-  file: DataFileType;
-  source: string;
-};
-
-const setRealFileSize = (file: DataFileType): string => Numbers.humanFileSize(file.size, true);
-
-const setFileType = (file: DataFileType): string => capitalize(file.type.split('/')[0]);
-
-const { Text } = Typography;
-export const FileDetails = ({ file, source }: PropsType) => {
-  let sourceTag: string | null = null;
-  if (source === 'drive') {
-    sourceTag = 'Drive';
-  }
-
-  return (
-    <div className="file-component-details">
-      <Text ellipsis style={{ verticalAlign: 'middle' }}>
-        {file.name}
-      </Text>
-      <Text type="secondary" ellipsis style={{ verticalAlign: 'middle' }}>
-        {!!sourceTag && <Tag color={'orange'}>{sourceTag}</Tag>}
-        {setRealFileSize(file)} {setFileType(file)}
-      </Text>
-    </div>
-  );
-};
-
-export default FileDetails;
diff --git a/tdrive/frontend/src/app/components/file/parts/index.ts b/tdrive/frontend/src/app/components/file/parts/index.ts
deleted file mode 100644
index 8b90d1a3..00000000
--- a/tdrive/frontend/src/app/components/file/parts/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './details';
-export * from './thumbnail';
-export * from './actions';
-export * from './progress';
diff --git a/tdrive/frontend/src/app/components/file/parts/large-preview.tsx b/tdrive/frontend/src/app/components/file/parts/large-preview.tsx
deleted file mode 100644
index 9b862363..00000000
--- a/tdrive/frontend/src/app/components/file/parts/large-preview.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataFileType } from '../types';
-import { Play } from 'react-feather';
-
-type PropsType = {
-  file: DataFileType;
-};
-
-const LargePreview = ({ file: { thumbnail, type } }: PropsType): JSX.Element => {
-  return (
-    <div
-      className="file-large-preview"
-      style={{
-        backgroundImage: `url(${thumbnail})`,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      {type === 'video' && (
-        <div className='file-large-preview-play-container'>
-          <Play
-            size={32} 
-            color={'white'}
-            strokeWidth={3}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default LargePreview;
diff --git a/tdrive/frontend/src/app/components/file/parts/progress.tsx b/tdrive/frontend/src/app/components/file/parts/progress.tsx
deleted file mode 100644
index edabaf95..00000000
--- a/tdrive/frontend/src/app/components/file/parts/progress.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Progress } from 'antd';
-
-import { DataFileType } from '../types';
-import { PendingFileRecoilType } from 'app/features/files/types/file';
-import {
-  isPendingFileStatusPending,
-  isPendingFileStatusPause,
-  isPendingFileStatusSuccess,
-  isPendingFileStatusError,
-  isPendingFileStatusCancel,
-} from 'app/features/files/utils/pending-files';
-
-type PropsType = {
-  file: DataFileType;
-  status?: PendingFileRecoilType['status'];
-  progress?: number;
-};
-
-const setStatus = (status: PendingFileRecoilType['status']): 'normal' | 'exception' | 'active' => {
-  switch (status) {
-    case 'error':
-    case 'pause':
-      return 'exception';
-    case 'pending':
-      return 'active';
-    default:
-      return 'normal';
-  }
-};
-
-export const FileProgress = ({ status, progress }: PropsType): JSX.Element => {
-  const setProgressStrokeColor = (): string => {
-    if (!status) return '';
-
-    if (isPendingFileStatusCancel(status)) return 'var(--error)';
-    if (isPendingFileStatusError(status)) return 'var(--error)';
-    if (isPendingFileStatusPause(status)) return 'var(--warning)';
-    if (isPendingFileStatusPending(status)) return 'var(--progress-bar-color)';
-
-    return 'var(--success)';
-  };
-
-  return status && !isPendingFileStatusSuccess(status) && progress != undefined ? (
-    <div className="file-progress-bar-container">
-      <Progress
-        type="line"
-        className="file-progress-bar"
-        percent={progress * 100}
-        showInfo={false}
-        status={setStatus(status)}
-        strokeColor={setProgressStrokeColor()}
-        trailColor="var(--progress-bar-background)"
-      />
-    </div>
-  ) : (
-    <div className="file-progress-bar-container" />
-  );
-};
-
-export default FileProgress;
diff --git a/tdrive/frontend/src/app/components/file/parts/thumbnail.tsx b/tdrive/frontend/src/app/components/file/parts/thumbnail.tsx
deleted file mode 100644
index 041ac913..00000000
--- a/tdrive/frontend/src/app/components/file/parts/thumbnail.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { FileText, Film, Headphones, Archive, Link, Image } from 'react-feather';
-import { DataFileType } from '../types';
-
-type PropsType = {
-  file: DataFileType;
-};
-
-export const FileThumbnail = ({ file }: PropsType): JSX.Element => {
-  const type = file.type;
-  const canHavePreview = ['image', 'video', 'pdf', 'document', 'slides', 'spreadsheet'].includes(
-    type,
-  );
-
-  return (
-    <div className={classNames('file-thumbnail-container', 'small-right-margin')}>
-      {canHavePreview && file.thumbnail && (
-        <div
-          className="ant-image file-thumbnail-component"
-          style={{
-            width: 32,
-            height: 32,
-            backgroundImage: `url(${file.thumbnail})`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        />
-      )}
-      {type === 'image' && !file.thumbnail && <Image size={20} />}
-      {type === 'video' && !file.thumbnail && <Film size={20} />}
-      {['pdf', 'document', 'slides', 'spreadsheet', 'other'].includes(type) && !file.thumbnail && (
-        <FileText size={20} />
-      )}
-      {type === 'audio' && <Headphones size={20} />}
-      {type === 'archive' && <Archive size={20} />}
-      {type === 'link' && <Link size={20} />}
-    </div>
-  );
-};
-
-export default FileThumbnail;
diff --git a/tdrive/frontend/src/app/components/file/types.ts b/tdrive/frontend/src/app/components/file/types.ts
deleted file mode 100644
index 89c70c54..00000000
--- a/tdrive/frontend/src/app/components/file/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type DataFileType = {
-  id: string;
-  name: string;
-  thumbnail?: string;
-  thumbnail_ratio: number;
-  company_id?: string;
-  size: number;
-  type: string;
-};
diff --git a/tdrive/frontend/src/app/components/forward-message/index.tsx b/tdrive/frontend/src/app/components/forward-message/index.tsx
deleted file mode 100644
index 70b87468..00000000
--- a/tdrive/frontend/src/app/components/forward-message/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Button } from 'app/atoms/button/button';
-import { Input } from 'app/atoms/input/input-text';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import { useState } from 'react';
-import { atom, useRecoilState } from 'recoil';
-import { ChannelSelector } from '../channels-selector';
-import MessageThreadAPIClient from 'features/messages/api/message-thread-api-client';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { NodeMessage } from 'app/features/messages/types/message';
-import Login from 'app/features/auth/login-service';
-import { v1 as uuidv1 } from 'uuid';
-import Languages from '../../features/global/services/languages-service';
-
-export const ForwardMessageAtom = atom<null | {
-  id: string;
-  thread_id: string;
-  channel_id: string;
-  workspace_id: string;
-  company_id: string;
-}>({
-  key: 'ForwardMessageAtom',
-  default: null,
-});
-
-export const ForwardMessageModal = () => {
-  const [message, setMessage] = useRecoilState(ForwardMessageAtom);
-
-  return (
-    <Modal
-      open={!!message}
-      onClose={() => setMessage(null)}
-      style={{ maxWidth: '600px', width: '100vw' }}
-    >
-      <ForwardMessage />
-    </Modal>
-  );
-};
-
-export const ForwardMessage = () => {
-  const [message, setMessage] = useRecoilState(ForwardMessageAtom);
-  const [channels, setChannels] = useState<ChannelType[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [comment, setComment] = useState('');
-
-  return (
-    <ModalContent title={Languages.t('scenes.apps.messages.message.forward.title')}>
-      <ChannelSelector
-        initialChannels={[]}
-        onChange={channels => {
-          setChannels(channels);
-        }}
-      />
-
-      <Input
-        className="w-full mt-2"
-        placeholder={Languages.t('scenes.apps.messages.message.forward.comment')}
-        value={comment}
-        onChange={e => setComment(e.target.value)}
-      />
-      <Button
-        className="w-full mt-2 text-center justify-center"
-        disabled={channels.length === 0}
-        loading={loading}
-        onClick={async () => {
-          setLoading(true);
-          if (message) {
-            for (const channel of channels) {
-              await MessageThreadAPIClient.save(channel.company_id || '', {
-                message: {
-                  thread_id: uuidv1(),
-                  created_at: Date.now(),
-                  user_id: Login.currentUserId,
-                  context: {
-                    _front_id: uuidv1(),
-                  },
-
-                  text: comment,
-                  quote_message: {
-                    ...message,
-                  } as unknown as NodeMessage,
-                } as NodeMessage,
-                participants: [
-                  {
-                    type: 'channel',
-                    id: channel.id || '',
-                    company_id: channel.company_id || '',
-                    workspace_id: channel.workspace_id || '',
-                  },
-                ],
-              });
-            }
-
-            ToasterService.success(Languages.t('scenes.apps.messages.message.forward.send'));
-            setMessage(null);
-          }
-        }}
-      >
-        {Languages.t('scenes.apps.messages.message.forward.confirm', [channels.length])}
-      </Button>
-    </ModalContent>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/highlighted-code/highlighted-code.tsx b/tdrive/frontend/src/app/components/highlighted-code/highlighted-code.tsx
deleted file mode 100755
index b665270c..00000000
--- a/tdrive/frontend/src/app/components/highlighted-code/highlighted-code.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState } from 'react';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/railscasts.css'; //monokai-sublime
-import { Copy } from 'react-feather';
-import { Tooltip } from 'antd';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-
-export default ({ code, className }: { code: string; className?: string }) => {
-  let renderedCode = code.replace(/\t/g, '  ');
-
-  const [expanded, setExpanded] = useState(renderedCode.split('\n').length < 5);
-  const ref = React.createRef<any>();
-
-  useEffect(() => {
-    hljs.highlightElement(ref.current);
-  }, [expanded]);
-
-  renderedCode = renderedCode
-    .split('\n')
-    .slice(0, expanded ? 100000000 : 5)
-    .join('\n');
-
-  const copy = () => {
-    navigator.clipboard.writeText(code).then(function () {
-      ToasterService.success('Content copied!');
-    });
-  };
-
-  return (
-    <div className={className}>
-      <pre>
-        <code ref={ref}>{renderedCode}</code>
-      </pre>
-      {!expanded && (
-        <span
-          className="expander"
-          onClick={() => {
-            setExpanded(true);
-          }}
-        >
-          Click to expand ({code.split('\n').length} lines)
-        </span>
-      )}
-      <span className="copy" onClick={copy}>
-        <Tooltip title={'Copy content'}>
-          <Copy size={16} />
-        </Tooltip>
-      </span>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/input-with-clip-board/input-with-clip-board.jsx b/tdrive/frontend/src/app/components/input-with-clip-board/input-with-clip-board.jsx
index 14ad9e77..51c6f109 100755
--- a/tdrive/frontend/src/app/components/input-with-clip-board/input-with-clip-board.jsx
+++ b/tdrive/frontend/src/app/components/input-with-clip-board/input-with-clip-board.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import Tooltip from 'components/tooltip/tooltip.jsx';
 import InputWithButton from 'components/inputs/input-with-button.jsx';
 
diff --git a/tdrive/frontend/src/app/components/inputs/input-enter.jsx b/tdrive/frontend/src/app/components/inputs/input-enter.jsx
index 903ef1c9..2f8dec22 100755
--- a/tdrive/frontend/src/app/components/inputs/input-enter.jsx
+++ b/tdrive/frontend/src/app/components/inputs/input-enter.jsx
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 
 import Input from './input.jsx';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import './inputs.scss';
 
 export default class InputEnter extends Component {
diff --git a/tdrive/frontend/src/app/components/inputs/input-icon.jsx b/tdrive/frontend/src/app/components/inputs/input-icon.jsx
index 10b29e5b..e31672df 100755
--- a/tdrive/frontend/src/app/components/inputs/input-icon.jsx
+++ b/tdrive/frontend/src/app/components/inputs/input-icon.jsx
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 
 import Input from './input.jsx';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import './inputs.scss';
 
 export default class InputIcon extends Component {
diff --git a/tdrive/frontend/src/app/components/inputs/input-with-button.jsx b/tdrive/frontend/src/app/components/inputs/input-with-button.jsx
index 45159598..1c5abb2e 100644
--- a/tdrive/frontend/src/app/components/inputs/input-with-button.jsx
+++ b/tdrive/frontend/src/app/components/inputs/input-with-button.jsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import './input-with-button.scss';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import Input from './input.jsx';
 
 export default class InputWithButton extends Component {
diff --git a/tdrive/frontend/src/app/components/inputs/input-with-color.jsx b/tdrive/frontend/src/app/components/inputs/input-with-color.jsx
index 61c6829f..9c4893ca 100755
--- a/tdrive/frontend/src/app/components/inputs/input-with-color.jsx
+++ b/tdrive/frontend/src/app/components/inputs/input-with-color.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
 
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import MenusManager from '@components/menus/menus-manager.jsx';
 import ColorPicker from 'components/color-picker/color-picker.jsx';
 import Input from 'components/inputs/input.jsx';
 import './inputs.scss';
diff --git a/tdrive/frontend/src/app/components/inputs/input-with-icon.tsx b/tdrive/frontend/src/app/components/inputs/input-with-icon.tsx
deleted file mode 100755
index 17de3a9d..00000000
--- a/tdrive/frontend/src/app/components/inputs/input-with-icon.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { Input, Col, Row } from 'antd';
-
-import Emojione from 'components/emojione/emojione';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import EmojiPicker from 'components/emoji-picker/emoji-picker.jsx';
-
-import './inputs.scss';
-
-type PropsType = { [key: string]: any };
-type StateType = { [key: string]: any };
-
-export default class InputWithIcon extends React.Component<PropsType, StateType> {
-  outsideClickListener: (event: any) => void = () => undefined;
-  input: any;
-  emojiPickerIsOpen: any;
-  emojipicker_dom: any;
-  allChanEmojies = [
-    ':8ball:',
-    ':dart:',
-    ':joystick:',
-    ':video_game:',
-    ':bar_chart:',
-    ':crystal_ball:',
-    ':speech_balloon:',
-    ':bulb:',
-    ':deciduous_tree:',
-    ':palm_tree:',
-    ':earth_americas:',
-    ':open_file_folder:',
-    ':penguin:',
-    ':seedling:',
-    ':sailboat:',
-    ':fire_engine:',
-    ':scroll:',
-    ':newspaper:',
-    ':factory:',
-    ':package:',
-    ':mailbox:',
-    ':moneybag:',
-    ':smiley_cat:',
-    ':sunglasses:',
-  ];
-  emoji_dom: any;
-
-  UNSAFE_componentWillMount() {
-    this.randomizeEmojies();
-  }
-
-  randomizeEmojies() {
-    this.allChanEmojies.sort((a, b) => {
-      if (b === this.props.value[0]) {
-        return -1;
-      }
-      if (a === this.props.value[0]) {
-        return 1;
-      }
-      return Math.floor(Math.random() * 3) - 1;
-    });
-  }
-
-  outsideMenuListener() {
-    this.closeEmojiPicker();
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.outsideClickListener);
-  }
-
-  componentDidMount() {
-    if (this.props.focusOnDidMount && this.input) {
-      this.input.focus();
-    }
-
-    this.outsideClickListener = event => {
-      if (
-        this.emojiPickerIsOpen &&
-        this.emojipicker_dom &&
-        !this.emojipicker_dom.contains(event.target) &&
-        document.contains(event.target)
-      ) {
-        this.outsideMenuListener();
-      }
-    };
-
-    this.outsideClickListener = this.outsideClickListener.bind(this);
-    document.addEventListener('click', this.outsideClickListener);
-  }
-
-  closeEmojiPicker() {
-    if (!this.emojiPickerIsOpen) {
-      return;
-    }
-
-    if (this.props.menu_level !== undefined) {
-      MenusManager.closeSubMenu(this.props.menu_level);
-    } else {
-      MenusManager.closeMenu();
-    }
-
-    this.emojiPickerIsOpen = false;
-  }
-
-  openEmojiPicker() {
-    if (this.emojiPickerIsOpen) {
-      return;
-    }
-
-    let preferedEmojis = [this.props.value[0]];
-    if (this.props.preferedEmoji) {
-      preferedEmojis = this.props.preferedEmoji;
-    } else {
-      this.randomizeEmojies();
-      for (let i = 0; i < 5; i++) {
-        preferedEmojis[i + 1] = this.allChanEmojies[i];
-      }
-    }
-
-    const menu = [
-      {
-        type: 'react-element',
-        className: 'menu-cancel-margin',
-        reactElement: () => {
-          return (
-            <EmojiPicker
-              refDom={(node: any) => (this.emojipicker_dom = node)}
-              onChange={(emoji: any) => this.selectEmoji(emoji)}
-            />
-          );
-        },
-      },
-    ];
-    const elementRect = (window as any).getBoundingClientRect(this.emoji_dom);
-    elementRect.x = elementRect.x || elementRect.left;
-    elementRect.y = elementRect.y || elementRect.top;
-    if (this.props.menu_level !== undefined) {
-      MenusManager.openSubMenu(menu, elementRect, this.props.menu_level, 'bottom');
-    } else {
-      MenusManager.openMenu(menu, elementRect, 'bottom', {});
-    }
-
-    setTimeout(() => {
-      this.emojiPickerIsOpen = true;
-    }, 200);
-  }
-  selectEmoji(emoji: any) {
-    this.closeEmojiPicker();
-    const value = [emoji.native, this.props.value[1]];
-    this.onChange(value);
-  }
-  onChange(value: any) {
-    if (this.props.onChange) {
-      this.props.onChange(value);
-    }
-  }
-  render() {
-    let icon = this.props.value[0];
-    if (!this.props.value[0]) {
-      this.onChange([this.allChanEmojies[0], this.props.value[1]]);
-      icon = this.allChanEmojies[0];
-    }
-    return (
-      <Input.Group size="small">
-        <Row wrap={false} align="middle" gutter={[8, 0]}>
-          <Col flex="none">
-            <div
-              className="emoji"
-              ref={node => (this.emoji_dom = node)}
-              onClick={() => {
-                this.openEmojiPicker();
-              }}
-            >
-              <Emojione type={icon} size={24} />
-            </div>
-          </Col>
-          <Col flex="auto">
-            {(!this.props.children && (
-              <Input
-                size={'large'}
-                style={{ paddingLeft: 15 }}
-                autoFocus
-                ref={obj => {
-                  this.input = obj;
-                  if (this.props.inputRef) this.props.inputRef(obj);
-                }}
-                type="text"
-                placeholder={this.props.placeholder}
-                value={this.props.value[1]}
-                onPressEnter={this.props.onEnter}
-                onChange={evt => {
-                  if (this.onChange) this.onChange([this.props.value[0], evt.target.value]);
-                }}
-              />
-            )) ||
-              this.props.children}
-          </Col>
-        </Row>
-      </Input.Group>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/inputs/input-with-select.scss b/tdrive/frontend/src/app/components/inputs/input-with-select.scss
deleted file mode 100644
index d16d0954..00000000
--- a/tdrive/frontend/src/app/components/inputs/input-with-select.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.group-container {
-  .ant-btn-icon-only {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    background-color: var(--grey-background);
-    border-radius: var(--border-radius-base) 0px 0px var(--border-radius-base);
-    padding: 0;
-
-    &:hover {
-      background-color: var(--grey-background);
-    }
-  }
-
-  .ant-select {
-    max-width: 120px;
-
-    .ant-select-selector {
-      border-radius: 0 !important;
-    }
-
-    .ant-select-selector,
-    .border-radius-left {
-      border-radius: var(--border-radius-base) 0 0 var(--border-radius-base) !important;
-    }
-  }
-
-  .group-divider {
-    height: 100%;
-    margin: 0;
-    top: 0;
-    background-color: var(--black-alpha-70);
-    opacity: 0.28;
-  }
-
-  .ant-btn .small-margin-left {
-    color: var(--grey-dark);
-    &:hover {
-      color: var(--primary);
-    }
-  }
-
-  .ant-input {
-    border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/inputs/input-with-select.tsx b/tdrive/frontend/src/app/components/inputs/input-with-select.tsx
deleted file mode 100644
index 6ff6e7c9..00000000
--- a/tdrive/frontend/src/app/components/inputs/input-with-select.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Input, Col, Row, Select, Typography, Button, Divider, Tooltip } from 'antd';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { List, X } from 'react-feather';
-import Languages from 'app/features/global/services/languages-service';
-import './input-with-select.scss';
-
-type PropsType = {
-  channel: ChannelType | undefined;
-  onChange: (array: string[]) => void;
-  groups: string[];
-};
-
-const { Group } = Input;
-const { Option } = Select;
-const InputWithSelect = ({ groups, channel, onChange }: PropsType): JSX.Element => {
-  const [group, setGroup] = useState<string>(channel?.channel_group || '');
-  const [channelName, setChannelName] = useState<string>(channel?.name || '');
-  const [searchedGroup, setSearchedGroup] = useState<string>('');
-  const [displaySelector, setDisplaySelector] = useState<boolean>(
-    channel?.channel_group ? true : false,
-  );
-
-  useEffect(() => {
-    onChange([group || '', channelName]);
-  });
-
-  return (
-    <Group className="group-container">
-      <Row style={{ flexWrap: 'nowrap' }}>
-        {!displaySelector && (
-          <Col>
-            <Tooltip
-              placement="top"
-              title={Languages.t('components.inputs.input_with_select.button.tooltip')}
-            >
-              <Button
-                type="default"
-                onClick={() => setDisplaySelector(!displaySelector)}
-                icon={<List size={14} className="small-margin-left" />}
-              />
-            </Tooltip>
-          </Col>
-        )}
-        {displaySelector && (
-          <Col>
-            <Select
-              onBlur={() => ((group || '').length === 0 ? setDisplaySelector(false) : undefined)}
-              notFoundContent={
-                <span className="info" style={{ color: 'var(--grey-dark)' }}>
-                  {Languages.t('components.inputs.input_with_select.select.no_sections')}
-                </span>
-              }
-              dropdownMatchSelectWidth={false}
-              className={displaySelector ? 'border-radius-left' : ''}
-              allowClear
-              clearIcon={<X size={14} color="var(--grey-dark)" />}
-              onClear={() => {
-                setDisplaySelector(false);
-                setGroup('');
-              }}
-              size={'large'}
-              defaultValue={group || undefined}
-              showSearch
-              autoFocus={displaySelector}
-              placeholder={Languages.t('components.inputs.input_with_select.select.placeholder')}
-              onChange={(value: string) => setGroup(value)}
-              onSearch={(value: string) => setSearchedGroup(value)}
-              searchValue={searchedGroup.substr(0, 20)}
-            >
-              {searchedGroup.length > 0 && group !== searchedGroup && (
-                <Option value={searchedGroup}>
-                  {Languages.t('general.create')}{' '}
-                  <Typography.Text strong>{searchedGroup}</Typography.Text>
-                </Option>
-              )}
-              {groups.map((group: string, index: number) => {
-                return (
-                  <Option key={index} value={group}>
-                    {group}
-                  </Option>
-                );
-              })}
-            </Select>
-          </Col>
-        )}
-        <Col>
-          <Divider type="vertical" className="group-divider" />
-        </Col>
-        <Col flex="auto">
-          <Input
-            autoFocus={!displaySelector}
-            size={'large'}
-            maxLength={30}
-            placeholder={Languages.t('components.inputs.input_with_select.input.placeholder')}
-            value={channelName}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setChannelName(e.target.value)}
-          />
-        </Col>
-      </Row>
-    </Group>
-  );
-};
-
-export default InputWithSelect;
diff --git a/tdrive/frontend/src/app/components/invitation/invitation.tsx b/tdrive/frontend/src/app/components/invitation/invitation.tsx
deleted file mode 100644
index 138f89ff..00000000
--- a/tdrive/frontend/src/app/components/invitation/invitation.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'app/atoms/button/button';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import {
-  invitationEmailsState,
-  invitationSentState,
-  invitationState,
-} from 'app/features/invitation/state/invitation';
-import { useCurrentWorkspace } from 'app/features/workspaces/hooks/use-workspaces';
-import { useRecoilState } from 'recoil';
-import Custom_role_invitation from './parts/custom-role-invitation';
-import InvitationChannels from './parts/invitation-channels';
-import InvitationSent from './parts/invitation-sent';
-import { useInvitation } from 'app/features/invitation/hooks/use-invitation';
-import Languages from 'app/features/global/services/languages-service';
-import WorkspaceLink from './parts/workspace-link';
-import InvitationTarget from './parts/invitation-target';
-import AllowAnyoneByEmail from './parts/allow-anyone-by-email';
-import { Info, Subtitle } from 'app/atoms/text';
-
-export default (): React.ReactElement => {
-  const [isOpen, setOpen] = useRecoilState(invitationState);
-  const [invitations] = useRecoilState(invitationEmailsState);
-  const workspace = useCurrentWorkspace();
-  const [isInvitationSent] = useRecoilState(invitationSentState);
-  const { send, reset } = useInvitation();
-  const [sending, setSending] = useState<boolean>(false);
-
-  const handleSend = async () => {
-    setSending(true);
-    try {
-      await send();
-    } catch (error) {
-      console.debug(error);
-    } finally {
-      setSending(false);
-    }
-  };
-
-  return (
-    <Modal
-      open={isOpen}
-      onClose={() => {
-        setOpen(false);
-        reset();
-      }}
-      className="sm:w-[60vw] sm:max-w-2xl"
-      style={{ minHeight: 'calc(70vh - 98px)' }}
-    >
-      <ModalContent
-        textCenter
-        title={
-          isInvitationSent
-            ? ''
-            : Languages.t(
-                'components.invitation.title',
-                [workspace.workspace?.name],
-                `Invite users to ${workspace.workspace?.name}`,
-              )
-        }
-      >
-        {!isInvitationSent ? (
-          <>
-            <AllowAnyoneByEmail />
-
-            <Subtitle className="mt-6 block">Manual invitation</Subtitle>
-            <Info className="block">
-              You can configure exactly where the user will be invited and what role they will have.
-            </Info>
-            <InvitationTarget />
-
-            <Info className="block mt-2 mb-1">
-              Simply send this email to the users you want to invite.
-            </Info>
-            <WorkspaceLink />
-
-            <Info className="block mt-4">Or enter manually the emails here.</Info>
-
-            {/*<Tab
-              tabs={[
-                <div key="custom_role_invitation">
-                  {Languages.t('components.invitation.custom_role_invitation')}
-                </div>,
-                <div key="bulk_invitation">
-                  {Languages.t('components.invitation.bulk_invitation')}
-                </div>,
-              ]}
-              selected={activeTab}
-              onClick={index => setInvitationTab(index)}
-              className="w-full"
-              parentClassName="basis-1/2 justify-center"
-            />
-            {activeTab === InvitationTabs.custom && <Custom_role_invitation />}
-            {activeTab === InvitationTabs.bulk && <Bulk_invitation />}*/}
-            <Custom_role_invitation />
-            <Button
-              className="mt-2 justify-center w-full"
-              disabled={!invitations.length || sending}
-              onClick={() => handleSend()}
-              loading={sending}
-            >
-              {Languages.t('components.invitation.button', [], 'Send invitations')}
-              <div className="font-medium h-5 px-1.5 flex items-center justify-center text-sm rounded-full ml-1 bg-white text-blue-500">
-                {invitations.length}
-              </div>
-            </Button>
-
-            <InvitationChannels />
-          </>
-        ) : (
-          <InvitationSent />
-        )}
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/allow-anyone-by-email.tsx b/tdrive/frontend/src/app/components/invitation/parts/allow-anyone-by-email.tsx
deleted file mode 100644
index ccd9c28a..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/allow-anyone-by-email.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Info, Subtitle } from 'app/atoms/text';
-import Switch from 'app/components/inputs/switch';
-import Languages from 'app/features/global/services/languages-service';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import workspaceApiClient from 'app/features/workspaces/api/workspace-api-client';
-import { useCurrentWorkspace } from 'app/features/workspaces/hooks/use-workspaces';
-import React, { useState } from 'react';
-
-export default (): React.ReactElement => {
-  const { user } = useCurrentUser();
-  const { members_limit_reached } = useInvitationUsers();
-  const { workspace } = useCurrentWorkspace();
-  const [allow, setAllow] = useState<boolean>(!!workspace?.preferences?.invite_domain);
-
-  const currentUserDomain = user?.email.split('@').pop();
-
-  const handleChange = async (value: boolean): Promise<void> => {
-    if (value) {
-      try {
-        await workspaceApiClient.setInvitationDomain(
-          workspace?.company_id as string,
-          workspace?.id as string,
-          currentUserDomain as string,
-        );
-        setAllow(true);
-        ToasterService.success('Invitation domain updated');
-      } catch (error) {
-        ToasterService.error('Failed to set invitation domain');
-      }
-    }
-  };
-
-  return !members_limit_reached ? (
-    <>
-      <Subtitle className="mt-4 block">Automatically invite my business</Subtitle>
-      <Info className="block">
-        If this is enabled, anyone creating a Tdrive account with your business email will
-        automatically be added to this company and this workspace.
-      </Info>
-      <div className="flex flex-row space-x-2 mt-1 bg-zinc-200 px-3 py-2 rounded-md border-transparent w-full h-9">
-        <div className="flex-1">
-          {Languages.t(
-            'components.invitation.allow_anyone_by_email.text',
-            [workspace?.preferences?.invite_domain || currentUserDomain],
-            `Let anyone with @${
-              workspace?.preferences?.invite_domain || currentUserDomain
-            } email join this workspace`,
-          )}
-        </div>
-        <Switch
-          checked={allow}
-          onChange={handleChange}
-          disabled={!!workspace?.preferences?.invite_domain}
-        />
-      </div>
-    </>
-  ) : (
-    <></>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/bulk-invitation.tsx b/tdrive/frontend/src/app/components/invitation/parts/bulk-invitation.tsx
deleted file mode 100644
index b0a8d307..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/bulk-invitation.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import InvitationInputBulk from './invitation-input-bulk';
-
-export default (): React.ReactElement => {
-  return (
-    <div className="flex flex-col">
-      <InvitationInputBulk />
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/custom-role-invitation.tsx b/tdrive/frontend/src/app/components/invitation/parts/custom-role-invitation.tsx
deleted file mode 100644
index 979bdf01..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/custom-role-invitation.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import InvitationInputList from './invitation-input-list';
-
-export default (): React.ReactElement => {
-  return (
-    <div className="flex flex-col mt-2">
-      <InvitationInputList />
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/invitation-channels.tsx b/tdrive/frontend/src/app/components/invitation/parts/invitation-channels.tsx
deleted file mode 100644
index 0360bb5d..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/invitation-channels.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Button } from 'app/atoms/button/button';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { ChannelSelector } from 'app/components/channels-selector';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { useInvitationChannels } from 'app/features/invitation/hooks/use-invitation-channels';
-import { uniqBy } from 'lodash';
-import Languages from 'app/features/global/services/languages-service';
-
-export default (): React.ReactElement => {
-  const { selectedChannels, closeSelection, setChannels, open } = useInvitationChannels();
-
-  const handleSelectionChange = (channels: ChannelType[]) => {
-    setChannels(uniqBy(channels, 'id'));
-  };
-
-  return (
-    <Modal open={open} onClose={() => closeSelection()} className="sm:w-[20vw] sm:max-w-xl">
-      <ModalContent textCenter title="Choose channels">
-        <ChannelSelector
-          initialChannels={selectedChannels}
-          onChange={handleSelectionChange}
-          lockDefaultChannels={true}
-        />
-
-        <Button
-          theme="primary"
-          disabled={!selectedChannels.length}
-          onClick={() => closeSelection()}
-          className="w-full justify-center"
-        >
-          {Languages.t(
-            'components.invitation.invitation_channels.button',
-            [],
-            'Invite to channels',
-          )}
-          <div className="font-medium h-5 px-1.5 flex items-center justify-center text-sm rounded-full ml-1 bg-white text-blue-500">
-            {selectedChannels.length}
-          </div>
-        </Button>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/invitation-input-bulk.tsx b/tdrive/frontend/src/app/components/invitation/parts/invitation-input-bulk.tsx
deleted file mode 100644
index a7e7525d..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/invitation-input-bulk.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import {
-  invitationEmailsState,
-  invitationTypeState,
-  InvitedUser,
-} from 'app/features/invitation/state/invitation';
-import { useRecoilState } from 'recoil';
-import ChipInput from 'material-ui-chip-input';
-import { RemoveIcon } from 'app/atoms/icons-colored';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import ReachedLimit from './reached-limit';
-
-const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
-
-export default (): React.ReactElement => {
-  const [invitations, setInvitations] = useRecoilState(invitationEmailsState);
-  const [role] = useRecoilState(invitationTypeState);
-  const { user } = useCurrentUser();
-  const { can_add_invitations, members_limit_reached } = useInvitationUsers();
-
-  const emails = (invitations || []).map(invitation => invitation.email);
-  const currentUserEmailDomain = user?.email.split('@').pop();
-
-  const handleChange = (chips: string[]) => {
-    const newInvitations: InvitedUser[] = chips
-      .filter(chip => !invitations.find(invitation => invitation.email === chip))
-      .map(chip => ({ email: chip, role }));
-    const updatedInvitations = [...invitations, ...newInvitations];
-
-    setInvitations(updatedInvitations);
-  };
-
-  const validate = (chip: string): boolean => {
-    return emailRegex.test(chip) && currentUserEmailDomain === chip.split('@').pop();
-  };
-
-  const handleDelete = (chip: string) => {
-    const updatedInvitations = invitations.filter(({ email }) => email !== chip);
-
-    setInvitations(updatedInvitations);
-  };
-
-  const rederChip = (
-    { chip, handleDelete }: { chip: string; handleDelete: React.EventHandler<any> },
-    key: string,
-  ): React.ReactElement => {
-    return (
-      <div
-        key={key}
-        className="flex justify-center items-center m-2 my-2 px-3 py-2 space-x-2 h-9 rounded-md bg-white"
-      >
-        <RemoveIcon onClick={handleDelete} className="cursor-pointer" />
-        <div className="flex-initial max-w-full leading-none text-xs font-normal">{chip}</div>
-      </div>
-    );
-  };
-
-  return (
-    <PerfectScrollbar
-      className="-mb-4 overflow-hidden px-2"
-      style={{ maxHeight: 'calc(42vh - 98px)', minHeight: 'calc(42vh - 98px)' }}
-      options={{ suppressScrollX: true, suppressScrollY: false }}
-    >
-      {members_limit_reached && <ReachedLimit />}
-      <ChipInput
-        value={emails}
-        disableUnderline={true}
-        fullWidth={true}
-        blurBehavior="ignore"
-        newChipKeyCodes={[13, 188, 54, 190, 32]}
-        onBeforeAdd={validate}
-        variant="standard"
-        className="bg-zinc-200 border-none hover:border-none rounded-md py-1"
-        chipRenderer={rederChip}
-        onChange={handleChange}
-        onDelete={handleDelete}
-        clearInputValueOnChange={false}
-        disabled={!can_add_invitations}
-      />
-    </PerfectScrollbar>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/invitation-input-list.tsx b/tdrive/frontend/src/app/components/invitation/parts/invitation-input-list.tsx
deleted file mode 100644
index a33a1d83..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/invitation-input-list.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Button } from 'app/atoms/button/button';
-import { RemoveIcon } from 'app/atoms/icons-colored';
-import { Input } from 'app/atoms/input/input-text';
-import {
-  invitationEmailsState,
-  InvitationType,
-  invitationTypeState,
-} from 'app/features/invitation/state/invitation';
-import React, { useState } from 'react';
-import { useRecoilState } from 'recoil';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import ReachedLimit from './reached-limit';
-import Languages from 'app/features/global/services/languages-service';
-import { PlusIcon } from '@heroicons/react/outline';
-import Select from 'app/atoms/input/input-select';
-
-export default (): React.ReactElement => {
-  const [invitations, setInvitations] = useRecoilState(invitationEmailsState);
-  const [currentInput, setCurrentInput] = useState<string>('');
-  const [notValidEmail, setNotValidEmail] = useState<boolean>(false);
-  const [invitationTargetType] = useRecoilState(invitationTypeState);
-  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-  const { can_add_invitations, members_limit_reached, allowed_members, allowed_guests } =
-    useInvitationUsers();
-
-  const emailExists = (target: string): boolean =>
-    !!invitations.find(invitation => invitation.email === target);
-
-  const handleEnter = (event: unknown): void => {
-    if ((event as KeyboardEvent).key === 'Enter') {
-      handleAdd();
-    }
-  };
-
-  const handleAdd = (): void => {
-    const role = invitationTargetType;
-    if (emailRegex.test(currentInput) && !emailExists(currentInput)) {
-      setInvitations([...invitations, { email: currentInput, role }]);
-      setCurrentInput('');
-      setNotValidEmail(false);
-    } else {
-      setNotValidEmail(true);
-    }
-  };
-
-  const removeEmail = (targetEmail: string): void => {
-    setInvitations(invitations.filter(invitation => invitation.email !== targetEmail));
-  };
-
-  const handleInput = (event: any): void => {
-    setCurrentInput(event.target.value);
-    setNotValidEmail(!emailRegex.test(event.target.value) || emailExists(event.target.value));
-  };
-
-  const handleRoleChange = (email: string, role: InvitationType): void => {
-    if (role === InvitationType.guest && allowed_guests <= 0) return;
-    if (role === InvitationType.member && allowed_members <= 0) return;
-
-    const changedInvitations = invitations.map(invitation => {
-      if (invitation.email === email) {
-        return {
-          email,
-          role,
-        };
-      }
-
-      return invitation;
-    });
-
-    setInvitations(changedInvitations);
-  };
-
-  return (
-    <div className="flex flex-col border-transparent w-full">
-      {can_add_invitations ? (
-        <div className="flex flex-row">
-          <Input
-            className="rounded-r-none grow"
-            theme="outline"
-            placeholder={Languages.t('components.invitation.invitation_input_list.placeholder')}
-            value={currentInput}
-            onKeyDown={handleEnter}
-            onChange={handleInput}
-            hasError={notValidEmail}
-          />
-          <Button
-            theme="primary"
-            disabled={notValidEmail || !currentInput.length}
-            onClick={handleAdd}
-            className="justify-center rounded-l-none"
-          >
-            <PlusIcon className="h-4 w-4 mr-1.5 -ml-1" />
-            {Languages.t('components.invitation.invitation_input_list.add')}
-          </Button>
-        </div>
-      ) : members_limit_reached ? (
-        <ReachedLimit />
-      ) : (
-        <></>
-      )}
-      <PerfectScrollbar
-        className="-mb-2 py-2 overflow-hidden -mx-2 px-2"
-        style={{ maxHeight: 'calc(30vh - 100px)', minHeight: 'calc(30vh - 100px)' }}
-        options={{ suppressScrollX: true, suppressScrollY: false }}
-      >
-        {invitations.map(invitation => (
-          <div
-            className="flex flex-row border-transparent items-center rounded-md py-0.5 my-0.5"
-            key={invitation.email}
-          >
-            <RemoveIcon
-              className="cursor-pointer shrink-0 mr-2"
-              onClick={() => removeEmail(invitation.email)}
-            />
-            <Input
-              theme="outline"
-              className="rounded-r-none grow w-full -mr-px"
-              disabled={true}
-              value={invitation.email}
-            />
-            <Select
-              theme="outline"
-              className="rounded-l-none w-auto"
-              onChange={e =>
-                handleRoleChange(invitation.email, e.target.value as unknown as InvitationType)
-              }
-              value={invitation.role}
-              disabled={
-                (invitation.role === InvitationType.guest && allowed_members <= 0) ||
-                (invitation.role === InvitationType.member && allowed_guests <= 0)
-              }
-            >
-              <option value={InvitationType.member}>
-                {Languages.t('components.invitation.invitation_input_list.member', [], 'Member')}
-              </option>
-              <option value={InvitationType.guest}>
-                {Languages.t('components.invitation.invitation_input_list.guest', [], 'Guest')}
-              </option>
-            </Select>
-          </div>
-        ))}
-      </PerfectScrollbar>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/invitation-sent.tsx b/tdrive/frontend/src/app/components/invitation/parts/invitation-sent.tsx
deleted file mode 100644
index d1313351..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/invitation-sent.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { SentIcon } from 'app/atoms/icons-colored';
-import { Title, Base } from 'app/atoms/text';
-import Link from 'app/atoms/link';
-import React from 'react';
-import { Button } from 'app/atoms/button/button';
-import { useInvitation } from 'app/features/invitation/hooks/use-invitation';
-import Languages from 'app/features/global/services/languages-service';
-
-export default (): React.ReactElement => {
-  const { reset } = useInvitation();
-
-  return (
-    <div className="flex flex-col text-center h-full" style={{ minHeight: 'calc(66vh - 92px)' }}>
-      <div className="flex justify-center text-center w-full">
-        <SentIcon className="h-52	w-52" />
-      </div>
-      <div className="text-center w-full py-2 mx-4 px-6">
-        <Title className="text-4xl">
-          {Languages.t(
-            'components.invitation.invitation_sent.title',
-            [],
-            'Invitations have successfully been sent',
-          )}
-        </Title>
-      </div>
-      <div className="text-center w-full py-3 mx-4 px-6">
-        <Base>
-          {Languages.t(
-            'components.invitation.invitation_sent.subtitle_status',
-            [],
-            'You can track invitaion status in:',
-          )}
-
-          {Languages.t(
-            'components.invitation.invitation_sent.subtitle_location',
-            [],
-            'Workspace settings > Member management',
-          )}
-        </Base>
-      </div>
-      <div className="text-center w-full py-3">
-        <Link>
-          {Languages.t('components.invitation.invitation_sent.link', [], 'Check invitation status')}
-        </Link>
-      </div>
-      <div className="flex grow h-full flex-col-reverse">
-        <Button className="mt-2 justify-center w-full" onClick={() => reset()}>
-          {Languages.t('components.invitation.invitation_sent.button', [], 'Send more invitations')}
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/invitation-target.tsx b/tdrive/frontend/src/app/components/invitation/parts/invitation-target.tsx
deleted file mode 100644
index 8cdad06f..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/invitation-target.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { BaseSmall } from 'app/atoms/text';
-import Switch from 'app/components/inputs/switch';
-import Languages from 'app/features/global/services/languages-service';
-import { useInvitationChannels } from 'app/features/invitation/hooks/use-invitation-channels';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import {
-  invitationEmailsState,
-  InvitationType,
-  invitationTypeState,
-} from 'app/features/invitation/state/invitation';
-import React from 'react';
-import { useRecoilState } from 'recoil';
-
-export default (): React.ReactElement => {
-  const [invitationType, setInvitationType] = useRecoilState(invitationTypeState);
-  const { openSelection, selectedChannels } = useInvitationChannels();
-  const [invitations, setInvitations] = useRecoilState(invitationEmailsState);
-  const { allowed_guests, allowed_members } = useInvitationUsers();
-
-  const changeInvitationType = (type: InvitationType) => {
-    setInvitationType(type);
-
-    if (type === InvitationType.guest && allowed_guests <= 0) return;
-    if (type === InvitationType.member && allowed_members <= 0) return;
-    setInvitations(invitations.map(({ email }) => ({ email, role: type })));
-  };
-
-  return (
-    <div className="flex flex-row space-x-3 rounded-md border-transparent w-full pt-2">
-      <div className="bg-zinc-200 rounded-md py-2 px-3 flex flex-row justify-center items-center">
-        <BaseSmall>
-          {Languages.t('components.invitation.invitation_target.invite_as_guests')}
-        </BaseSmall>
-        <Switch
-          checked={invitationType === InvitationType.guest}
-          className="ml-2"
-          onChange={e => changeInvitationType(e ? InvitationType.guest : InvitationType.member)}
-        />
-      </div>
-      <div className="flex-grow bg-zinc-200 rounded-md py-2 ml-2 px-3 justify-center align-middle">
-        <div
-          className="cursor-pointer flex relative justify-center border-transparent hover:text-blue-600 transition-colors text-blue-500 font-semibold "
-          onClick={() => openSelection()}
-        >
-          {Languages.t('components.invitation.invitation_target.channels_button')}
-          <div className="font-medium h-5 px-1.5 flex items-center justify-center text-sm rounded-full ml-1 text-white bg-blue-500">
-            {selectedChannels.length}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/reached-limit.tsx b/tdrive/frontend/src/app/components/invitation/parts/reached-limit.tsx
deleted file mode 100644
index e3a2a688..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/reached-limit.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Text from 'app/atoms/text';
-import Languages from 'app/features/global/services/languages-service';
-import React from 'react';
-
-export default (): React.ReactElement => {
-  return (
-    <Text type="base" className="text-rose-500" noColor={true}>
-      {Languages.t(
-        'components.invitation.reached_limit.text',
-        [],
-        'you reached the maximum number of users inside your company. Increase your subscription or add these users as guests.',
-      )}
-    </Text>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/invitation/parts/workspace-link.tsx b/tdrive/frontend/src/app/components/invitation/parts/workspace-link.tsx
deleted file mode 100644
index 6fa94f1d..00000000
--- a/tdrive/frontend/src/app/components/invitation/parts/workspace-link.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Button } from 'app/atoms/button/button';
-import React, { useState } from 'react';
-import { CopyIcon } from '@atoms/icons-agnostic';
-import { useInvitation } from 'app/features/invitation/hooks/use-invitation';
-import Languages from 'app/features/global/services/languages-service';
-import { Input } from 'app/atoms/input/input-text';
-import { InputDecorationIcon } from 'app/atoms/input/input-decoration-icon';
-import { LinkIcon } from '@heroicons/react/outline';
-import { copyToClipboard } from 'app/features/global/utils/CopyClipboard';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-
-export default (): React.ReactElement => {
-  const { generateInvitationLink } = useInvitation();
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const copyLink = async () => {
-    setLoading(true);
-    const link = await generateInvitationLink();
-
-    if (link) {
-      copyToClipboard(link);
-      ToasterService.success('Link copied to clipboard');
-    }
-    setLoading(false);
-  };
-
-  return (
-    <div className="flex flex-row  w-full">
-      <InputDecorationIcon
-        className="grow  grow w-full"
-        input={({ className }) => (
-          <Input
-            className={className + ' rounded-r-none pointer-events-none'}
-            theme="plain"
-            readOnly
-            value={Languages.t(
-              'components.invitation.workspace_link.text',
-              [],
-              'Workspace invitation link',
-            )}
-          />
-        )}
-        prefix={LinkIcon}
-      />
-      <Button
-        className="h-7 2 rounded-l-none -ml-px"
-        theme="primary"
-        icon={CopyIcon}
-        onClick={() => copyLink()}
-        loading={loading}
-        disabled={loading}
-      >
-        {Languages.t('components.invitation.workspace_link.copy', [], 'Copy')}
-      </Button>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/loader/application-loader.tsx b/tdrive/frontend/src/app/components/loader/application-loader.tsx
index c5331542..f7472d2e 100644
--- a/tdrive/frontend/src/app/components/loader/application-loader.tsx
+++ b/tdrive/frontend/src/app/components/loader/application-loader.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
 type PropsType = {
   message?: string;
diff --git a/tdrive/frontend/src/app/components/locked-features-components/feature-toggles-hooks.tsx b/tdrive/frontend/src/app/components/locked-features-components/feature-toggles-hooks.tsx
index 1dc531b5..d14827fd 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/feature-toggles-hooks.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/feature-toggles-hooks.tsx
@@ -2,9 +2,9 @@
 import { useEffect } from 'react';
 import FeatureTogglesService, {
   FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
+} from '@features/global/services/feature-toggles-service';
 import { FeatureToggles, Feature, withFeatures } from '@paralleldrive/react-feature-toggles';
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
+import { useCurrentCompany } from '@features/companies/hooks/use-companies';
 
 export const useFeatureToggles = () => {
   const { activeFeatureNames } = FeatureTogglesService;
diff --git a/tdrive/frontend/src/app/components/locked-features-components/locked-drive-popup/locked-drive-popup.tsx b/tdrive/frontend/src/app/components/locked-features-components/locked-drive-popup/locked-drive-popup.tsx
index 2c318485..6fe813b0 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/locked-drive-popup/locked-drive-popup.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/locked-drive-popup/locked-drive-popup.tsx
@@ -1,74 +1,72 @@
 import React from 'react';
-import ObjectModal from 'app/components/object-modal/object-modal';
+import ObjectModal from '@components/object-modal/object-modal';
 import { Button, Row, Typography } from 'antd';
-import ModalManager from 'app/components/modal/modal-manager';
-import Languages from 'app/features/global/services/languages-service';
-import consoleService from 'app/features/console/services/console-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import ModalManager from '@components/modal/modal-manager';
+import Languages from '@features/global/services/languages-service';
+import consoleService from '@features/console/services/console-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 const { Title, Text } = Typography;
 export default () => {
   const companyId = useRouterCompany();
   return (
-  <ObjectModal
-    titleCenter
-    titleLevel={2}
-    title={Languages.t('components.locked_features.locked_drive_popup.title')}
-    titleTypographyStyle={{ textAlign: 'center', marginBottom: 32 }}
-    style={{ padding: 32 }}
-    contentStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
-    footer={
-      <div
-        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32 }}
-      >
-        <Button
-          type="primary"
-          size="large"
-          style={{ marginTop: 8 }}
-          onClick={() =>
-            window.open(
-              consoleService.getCompanySubscriptionUrl(companyId),
-              'blank',
-            )
-          }
+    <ObjectModal
+      titleCenter
+      titleLevel={2}
+      title={Languages.t('components.locked_features.locked_drive_popup.title')}
+      titleTypographyStyle={{ textAlign: 'center', marginBottom: 32 }}
+      style={{ padding: 32 }}
+      contentStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
+      footer={
+        <div
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32 }}
         >
-          {Languages.t('components.locked_features.locked_guests_popup.learn_more_button')}
-        </Button>
-        <Text style={{ margin: '16px 0 ' }} strong>
-          {Languages.t('components.locked_features.locked_guests_popup.or')}
-        </Text>
-        <Button
-          type="ghost"
-          style={{ height: 36, width: 163 }}
-          onClick={() => ModalManager.closeAll()}
-        >
-          {Languages.t('components.locked_features.locked_guests_popup.skip_for_now_button')}
-        </Button>
-      </div>
-    }
-    hideFooterDivider
-    footerAlign="center"
-    footerStyle={{ marginBottom: 16 }}
-  >
-    <Row justify="center" align="middle" className="bottom-margin">
-      <Title
-        level={3}
-        children={Languages.t('components.locked_features.locked_drive_popup.subtitle')}
-        style={{
-          textAlign: 'center',
-          margin: 0,
-        }}
-      />
-    </Row>
+          <Button
+            type="primary"
+            size="large"
+            style={{ marginTop: 8 }}
+            onClick={() =>
+              window.open(consoleService.getCompanySubscriptionUrl(companyId), 'blank')
+            }
+          >
+            {Languages.t('components.locked_features.locked_guests_popup.learn_more_button')}
+          </Button>
+          <Text style={{ margin: '16px 0 ' }} strong>
+            {Languages.t('components.locked_features.locked_guests_popup.or')}
+          </Text>
+          <Button
+            type="ghost"
+            style={{ height: 36, width: 163 }}
+            onClick={() => ModalManager.closeAll()}
+          >
+            {Languages.t('components.locked_features.locked_guests_popup.skip_for_now_button')}
+          </Button>
+        </div>
+      }
+      hideFooterDivider
+      footerAlign="center"
+      footerStyle={{ marginBottom: 16 }}
+    >
+      <Row justify="center" align="middle" className="bottom-margin">
+        <Title
+          level={3}
+          children={Languages.t('components.locked_features.locked_drive_popup.subtitle')}
+          style={{
+            textAlign: 'center',
+            margin: 0,
+          }}
+        />
+      </Row>
 
-    <Row justify="center">
-      <Text
-        style={{
-          textAlign: 'center',
-          width: '404px',
-        }}
-        children={Languages.t('components.locked_features.locked_only_office_popup.text')}
-      />
-    </Row>
-  </ObjectModal>
-)};
+      <Row justify="center">
+        <Text
+          style={{
+            textAlign: 'center',
+            width: '404px',
+          }}
+          children={Languages.t('components.locked_features.locked_only_office_popup.text')}
+        />
+      </Row>
+    </ObjectModal>
+  );
+};
diff --git a/tdrive/frontend/src/app/components/locked-features-components/locked-guests-popup/locked-guests-popup.tsx b/tdrive/frontend/src/app/components/locked-features-components/locked-guests-popup/locked-guests-popup.tsx
index 6da2cb7d..6aff6a01 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/locked-guests-popup/locked-guests-popup.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/locked-guests-popup/locked-guests-popup.tsx
@@ -1,9 +1,9 @@
 import { Button, Row, Typography } from 'antd';
-import ObjectModal from 'app/components/object-modal/object-modal';
+import ObjectModal from '@components/object-modal/object-modal';
 import React from 'react';
-import ModalManager from 'app/components/modal/modal-manager';
-import Languages from 'app/features/global/services/languages-service';
-import Emojione from 'app/components/emojione/emojione';
+import ModalManager from '@components/modal/modal-manager';
+import Languages from '@features/global/services/languages-service';
+import Emojione from '@components/emojione/emojione';
 
 type PropsType = {
   companySubscriptionUrl: string;
diff --git a/tdrive/frontend/src/app/components/locked-features-components/locked-history-banner/locked-history-banner.tsx b/tdrive/frontend/src/app/components/locked-features-components/locked-history-banner/locked-history-banner.tsx
index 545dca6b..bfcc8cbc 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/locked-history-banner/locked-history-banner.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/locked-history-banner/locked-history-banner.tsx
@@ -1,22 +1,18 @@
 import React from 'react';
 import { Typography, Button } from 'antd';
-import Banner from 'app/components/banner/banner';
-import Emojione from 'app/components/emojione/emojione';
-import Languages from 'app/features/global/services/languages-service';
+import Banner from '@components/banner/banner';
+import Emojione from '@components/emojione/emojione';
+import Languages from '@features/global/services/languages-service';
 import './locked-history-banner.scss';
-import consoleService from 'app/features/console/services/console-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import consoleService from '@features/console/services/console-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 const { Title, Text } = Typography;
 const LockedHistoryBanner = (): JSX.Element => {
-
   const companyId = useRouterCompany();
 
   const onClickBtn = () =>
-    window.open(
-      consoleService.getCompanySubscriptionUrl(companyId),
-      'blank',
-    );
+    window.open(consoleService.getCompanySubscriptionUrl(companyId), 'blank');
 
   return (
     <Banner
diff --git a/tdrive/frontend/src/app/components/locked-features-components/locked-invite-alert/index.tsx b/tdrive/frontend/src/app/components/locked-features-components/locked-invite-alert/index.tsx
index 28a36216..65d7b541 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/locked-invite-alert/index.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/locked-invite-alert/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Typography, Alert } from 'antd';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import { AlertTriangle } from 'react-feather';
-import { CompanyLimitsEnum, CompanyType } from 'app/features/companies/types/company';
-import consoleService from 'app/features/console/services/console-service';
+import { CompanyLimitsEnum, CompanyType } from '@features/companies/types/company';
+import consoleService from '@features/console/services/console-service';
 
 type PropsType = { company: Partial<CompanyType>; magicLink?: boolean };
 
@@ -11,10 +11,7 @@ const { Text, Link } = Typography;
 const LockedInviteAlert = (props: PropsType): JSX.Element => {
   const limit = props?.company?.plan?.limits?.[CompanyLimitsEnum.COMPANY_MEMBERS_LIMIT] || 0;
   const onClickBtn = () =>
-    window.open(
-      consoleService.getCompanySubscriptionUrl(props.company.id || ""),
-      'blank',
-    );
+    window.open(consoleService.getCompanySubscriptionUrl(props.company.id || ''), 'blank');
 
   return (
     <Alert
diff --git a/tdrive/frontend/src/app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup.tsx b/tdrive/frontend/src/app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup.tsx
index c1f25d67..96b12694 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup.tsx
@@ -1,75 +1,73 @@
 import React from 'react';
-import ObjectModal from 'app/components/object-modal/object-modal';
+import ObjectModal from '@components/object-modal/object-modal';
 import { Button, Row, Typography } from 'antd';
-import ModalManager from 'app/components/modal/modal-manager';
-import Languages from 'app/features/global/services/languages-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import consoleService from 'app/features/console/services/console-service';
+import ModalManager from '@components/modal/modal-manager';
+import Languages from '@features/global/services/languages-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import consoleService from '@features/console/services/console-service';
 
 const { Title, Text } = Typography;
 export default () => {
   const companyId = useRouterCompany();
   return (
-  <ObjectModal
-    titleCenter
-    titleLevel={2}
-    title={Languages.t('components.locked_features.locked_only_office_popup.title')}
-    titleTypographyStyle={{ textAlign: 'center', marginBottom: 32 }}
-    style={{ padding: 32 }}
-    contentStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
-    footer={
-      <div
-        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32 }}
-      >
-        <Button
-          type="primary"
-          size="large"
-          style={{ marginTop: 8 }}
-          onClick={() =>
-            window.open(
-              consoleService.getCompanySubscriptionUrl(companyId),
-              'blank',
-            )
-          }
+    <ObjectModal
+      titleCenter
+      titleLevel={2}
+      title={Languages.t('components.locked_features.locked_only_office_popup.title')}
+      titleTypographyStyle={{ textAlign: 'center', marginBottom: 32 }}
+      style={{ padding: 32 }}
+      contentStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
+      footer={
+        <div
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32 }}
         >
-          {Languages.t('components.locked_features.locked_guests_popup.learn_more_button')}
-        </Button>
-        <Text style={{ margin: '16px 0 ' }} strong>
-          {Languages.t('components.locked_features.locked_guests_popup.or')}
-        </Text>
-        <Button
-          type="ghost"
-          style={{ height: 36, width: 163 }}
-          onClick={() => ModalManager.closeAll()}
-        >
-          {Languages.t('components.locked_features.locked_guests_popup.skip_for_now_button')}
-        </Button>
-      </div>
-    }
-    hideFooterDivider
-    footerAlign="center"
-    footerStyle={{ marginBottom: 16 }}
-  >
-    <Row justify="center" align="middle" className="bottom-margin">
-      <Title
-        level={3}
-        children={Languages.t('components.locked_features.locked_only_office_popup.subtitle')}
-        style={{
-          textAlign: 'center',
-          margin: 0,
-          height: 54,
-        }}
-      />
-    </Row>
+          <Button
+            type="primary"
+            size="large"
+            style={{ marginTop: 8 }}
+            onClick={() =>
+              window.open(consoleService.getCompanySubscriptionUrl(companyId), 'blank')
+            }
+          >
+            {Languages.t('components.locked_features.locked_guests_popup.learn_more_button')}
+          </Button>
+          <Text style={{ margin: '16px 0 ' }} strong>
+            {Languages.t('components.locked_features.locked_guests_popup.or')}
+          </Text>
+          <Button
+            type="ghost"
+            style={{ height: 36, width: 163 }}
+            onClick={() => ModalManager.closeAll()}
+          >
+            {Languages.t('components.locked_features.locked_guests_popup.skip_for_now_button')}
+          </Button>
+        </div>
+      }
+      hideFooterDivider
+      footerAlign="center"
+      footerStyle={{ marginBottom: 16 }}
+    >
+      <Row justify="center" align="middle" className="bottom-margin">
+        <Title
+          level={3}
+          children={Languages.t('components.locked_features.locked_only_office_popup.subtitle')}
+          style={{
+            textAlign: 'center',
+            margin: 0,
+            height: 54,
+          }}
+        />
+      </Row>
 
-    <Row justify="center">
-      <Text
-        style={{
-          textAlign: 'center',
-          width: '404px',
-        }}
-        children={Languages.t('components.locked_features.locked_only_office_popup.text')}
-      />
-    </Row>
-  </ObjectModal>
-)};
+      <Row justify="center">
+        <Text
+          style={{
+            textAlign: 'center',
+            width: '404px',
+          }}
+          children={Languages.t('components.locked_features.locked_only_office_popup.text')}
+        />
+      </Row>
+    </ObjectModal>
+  );
+};
diff --git a/tdrive/frontend/src/app/components/locked-features-components/locked-workspace-popup/locked-workspace-popup.tsx b/tdrive/frontend/src/app/components/locked-features-components/locked-workspace-popup/locked-workspace-popup.tsx
index e78882de..50cb1e90 100644
--- a/tdrive/frontend/src/app/components/locked-features-components/locked-workspace-popup/locked-workspace-popup.tsx
+++ b/tdrive/frontend/src/app/components/locked-features-components/locked-workspace-popup/locked-workspace-popup.tsx
@@ -1,74 +1,72 @@
 import React from 'react';
-import ObjectModal from 'app/components/object-modal/object-modal';
+import ObjectModal from '@components/object-modal/object-modal';
 import { Button, Row, Typography } from 'antd';
-import ModalManager from 'app/components/modal/modal-manager';
-import Languages from 'app/features/global/services/languages-service';
-import consoleService from 'app/features/console/services/console-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import ModalManager from '@components/modal/modal-manager';
+import Languages from '@features/global/services/languages-service';
+import consoleService from '@features/console/services/console-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 const { Title, Text } = Typography;
 export default () => {
   const companyId = useRouterCompany();
   return (
-  <ObjectModal
-    titleCenter
-    titleLevel={2}
-    title={Languages.t('components.locked_features.locked_workspace_popup.title')}
-    titleTypographyStyle={{ textAlign: 'center', marginBottom: 32 }}
-    style={{ padding: 32 }}
-    contentStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
-    footer={
-      <div
-        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32 }}
-      >
-        <Button
-          type="primary"
-          size="large"
-          style={{ marginTop: 8 }}
-          onClick={() =>
-            window.open(
-              consoleService.getCompanySubscriptionUrl(companyId),
-              'blank',
-            )
-          }
+    <ObjectModal
+      titleCenter
+      titleLevel={2}
+      title={Languages.t('components.locked_features.locked_workspace_popup.title')}
+      titleTypographyStyle={{ textAlign: 'center', marginBottom: 32 }}
+      style={{ padding: 32 }}
+      contentStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
+      footer={
+        <div
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32 }}
         >
-          {Languages.t('components.locked_features.locked_guests_popup.learn_more_button')}
-        </Button>
-        <Text style={{ margin: '16px 0 ' }} strong>
-          {Languages.t('components.locked_features.locked_guests_popup.or')}
-        </Text>
-        <Button
-          type="ghost"
-          style={{ height: 36, width: 163 }}
-          onClick={() => ModalManager.closeAll()}
-        >
-          {Languages.t('components.locked_features.locked_guests_popup.skip_for_now_button')}
-        </Button>
-      </div>
-    }
-    hideFooterDivider
-    footerAlign="center"
-    footerStyle={{ marginBottom: 16 }}
-  >
-    <Row justify="center" align="middle" className="bottom-margin">
-      <Title
-        level={3}
-        children={Languages.t('components.locked_features.locked_workspace_popup.subtitle')}
-        style={{
-          textAlign: 'center',
-          margin: 0,
-        }}
-      />
-    </Row>
+          <Button
+            type="primary"
+            size="large"
+            style={{ marginTop: 8 }}
+            onClick={() =>
+              window.open(consoleService.getCompanySubscriptionUrl(companyId), 'blank')
+            }
+          >
+            {Languages.t('components.locked_features.locked_guests_popup.learn_more_button')}
+          </Button>
+          <Text style={{ margin: '16px 0 ' }} strong>
+            {Languages.t('components.locked_features.locked_guests_popup.or')}
+          </Text>
+          <Button
+            type="ghost"
+            style={{ height: 36, width: 163 }}
+            onClick={() => ModalManager.closeAll()}
+          >
+            {Languages.t('components.locked_features.locked_guests_popup.skip_for_now_button')}
+          </Button>
+        </div>
+      }
+      hideFooterDivider
+      footerAlign="center"
+      footerStyle={{ marginBottom: 16 }}
+    >
+      <Row justify="center" align="middle" className="bottom-margin">
+        <Title
+          level={3}
+          children={Languages.t('components.locked_features.locked_workspace_popup.subtitle')}
+          style={{
+            textAlign: 'center',
+            margin: 0,
+          }}
+        />
+      </Row>
 
-    <Row justify="center">
-      <Text
-        style={{
-          textAlign: 'center',
-          width: '404px',
-        }}
-        children={Languages.t('components.locked_features.locked_workspace_popup.text')}
-      />
-    </Row>
-  </ObjectModal>
-)};
+      <Row justify="center">
+        <Text
+          style={{
+            textAlign: 'center',
+            width: '404px',
+          }}
+          children={Languages.t('components.locked_features.locked_workspace_popup.text')}
+        />
+      </Row>
+    </ObjectModal>
+  );
+};
diff --git a/tdrive/frontend/src/app/components/main-plus/main-plus.jsx b/tdrive/frontend/src/app/components/main-plus/main-plus.jsx
deleted file mode 100755
index 311ec5ee..00000000
--- a/tdrive/frontend/src/app/components/main-plus/main-plus.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import Icon from 'app/components/icon/icon.jsx';
-import Menu from 'components/menus/menu.jsx';
-import './main-plus.scss';
-
-export default class MainPlus extends Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    if (this.props.onClick) {
-      return (
-        <div className="main_plus_button" onClick={this.props.onClick}>
-          <Icon type="plus" className="m-icon-small" />
-        </div>
-      );
-    }
-    return (
-      <Menu menu={this.props.menu} className="main_plus_button" position={'top'}>
-        <Icon type="plus" className="m-icon-small" />
-      </Menu>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/main-plus/main-plus.scss b/tdrive/frontend/src/app/components/main-plus/main-plus.scss
deleted file mode 100755
index e69de29b..00000000
diff --git a/tdrive/frontend/src/app/components/member/user-parts.tsx b/tdrive/frontend/src/app/components/member/user-parts.tsx
index 1d26108d..f5f395c2 100644
--- a/tdrive/frontend/src/app/components/member/user-parts.tsx
+++ b/tdrive/frontend/src/app/components/member/user-parts.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { Avatar, Badge, Tag } from 'antd';
 import { DashOutlined } from '@ant-design/icons';
 import { User } from 'react-feather';
-import Languages from 'app/features/global/services/languages-service';
-import RouterServices from 'app/features/router/services/router-service';
-import { UserType } from 'app/features/users/types/user';
-import UserService from 'app/features/users/services/current-user-service';
-import UsersService from 'app/features/users/services/current-user-service';
+import Languages from '@features/global/services/languages-service';
+import RouterServices from '@features/router/services/router-service';
+import { UserType } from '@features/users/types/user';
+import UserService from '@features/users/services/current-user-service';
+import UsersService from '@features/users/services/current-user-service';
 import UserIcon from 'components/user/user';
-import { getUser } from 'app/features/users/hooks/use-user-list';
+import { getUser } from '@features/users/hooks/use-user-list';
 
 export type UserPartsType = {
   avatar: JSX.Element;
diff --git a/tdrive/frontend/src/app/components/menus/menu-component.jsx b/tdrive/frontend/src/app/components/menus/menu-component.jsx
index 2433a2f2..c7197bc2 100755
--- a/tdrive/frontend/src/app/components/menus/menu-component.jsx
+++ b/tdrive/frontend/src/app/components/menus/menu-component.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import Emojione from 'components/emojione/emojione';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import MenusManager from '@components/menus/menus-manager.jsx';
 import './menu.scss';
 
 /*
diff --git a/tdrive/frontend/src/app/components/menus/menu.jsx b/tdrive/frontend/src/app/components/menus/menu.jsx
index 7ec8fc63..a7c5de0e 100755
--- a/tdrive/frontend/src/app/components/menus/menu.jsx
+++ b/tdrive/frontend/src/app/components/menus/menu.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import MenusManager from '@components/menus/menus-manager.jsx';
 
 /*
   One menu
diff --git a/tdrive/frontend/src/app/components/menus/menus-body-layer.jsx b/tdrive/frontend/src/app/components/menus/menus-body-layer.jsx
index 79455183..0f998ecc 100755
--- a/tdrive/frontend/src/app/components/menus/menus-body-layer.jsx
+++ b/tdrive/frontend/src/app/components/menus/menus-body-layer.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import MenusManager from '@components/menus/menus-manager.jsx';
 import MenuComponent from './menu-component.jsx';
 import OutsideClickHandler from 'react-outside-click-handler';
 
diff --git a/tdrive/frontend/src/app/components/menus/menus-manager.jsx b/tdrive/frontend/src/app/components/menus/menus-manager.jsx
index d5c4d655..c2670851 100755
--- a/tdrive/frontend/src/app/components/menus/menus-manager.jsx
+++ b/tdrive/frontend/src/app/components/menus/menus-manager.jsx
@@ -1,6 +1,6 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Number from 'app/features/global/utils/Numbers';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import Number from '@features/global/utils/Numbers';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 /**
  *  Menus manager service, choose where to generate menu
diff --git a/tdrive/frontend/src/app/components/message-seen-by/message-seen-by.tsx b/tdrive/frontend/src/app/components/message-seen-by/message-seen-by.tsx
deleted file mode 100644
index 11099696..00000000
--- a/tdrive/frontend/src/app/components/message-seen-by/message-seen-by.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import UserBlock from 'app/molecules/grouped-rows/user';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import messageApiClient from 'app/features/messages/api/message-api-client';
-import { UserType } from 'app/features/users/types/user';
-import React, { useEffect, useState } from 'react';
-import Avatar from 'app/atoms/avatar';
-import { useMessageSeenBy } from 'app/features/messages/hooks/use-message-seen-by';
-import Loader from '../loader/loader';
-import Languages from 'app/features/global/services/languages-service';
-import { Base } from 'app/atoms/text';
-
-export default (): React.ReactElement => {
-  const { isOpen, closeSeenBy, seenMessage } = useMessageSeenBy();
-  const [users, setUsers] = useState<UserType[]>();
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (isOpen && seenMessage) {
-      const { company_id, message_id, thread_id, workspace_id } = seenMessage;
-
-      setLoading(true);
-      messageApiClient.seenBy(message_id, thread_id, company_id, workspace_id).then(users => {
-        setLoading(false);
-        setUsers(users);
-      });
-    }
-  }, [open, seenMessage]);
-
-  return (
-    <Modal open={isOpen} onClose={() => closeSeenBy()} className="sm:w-[60vw] sm:max-w-2xl">
-      <ModalContent
-        textCenter
-        title={Languages.t('components.message_seen_by.title', [], "Users who've seen the message")}
-      >
-        {loading ? (
-          <div className="flex h-full justify-center items-center px-2">
-            <Loader className="h-8 w-8 m-auto" />
-          </div>
-        ) : (
-          <div className="flex">
-            <div className="w-[60vw] rounded-sm px-2 m-2">
-              {users && users.length ? (
-                users.map(user => (
-                  <UserBlock
-                    avatar={
-                      <Avatar title={user.full_name ?? user.username} avatar={user.thumbnail} />
-                    }
-                    title={user.full_name ?? user.username}
-                    subtitle={user.email}
-                    key={user.id}
-                  />
-                ))
-              ) : (
-                <Base className='pt-4'>
-                  {Languages.t(
-                    'components.message_seen_by.none_seen_it',
-                    [],
-                    'No one has seen the message yet',
-                  )}
-                </Base>
-              )}
-            </div>
-          </div>
-        )}
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/mobile-redirect/index.tsx b/tdrive/frontend/src/app/components/mobile-redirect/index.tsx
index 948177c7..c9ba0f9b 100644
--- a/tdrive/frontend/src/app/components/mobile-redirect/index.tsx
+++ b/tdrive/frontend/src/app/components/mobile-redirect/index.tsx
@@ -5,7 +5,7 @@ import { Smartphone, X } from 'react-feather';
 import './style.scss';
 import { Button } from 'antd';
 import InitService from '../../features/global/services/init-service';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
 
 const environment = configuration;
 
diff --git a/tdrive/frontend/src/app/components/modal/modal-component.tsx b/tdrive/frontend/src/app/components/modal/modal-component.tsx
index af0bd85d..bc69bec4 100755
--- a/tdrive/frontend/src/app/components/modal/modal-component.tsx
+++ b/tdrive/frontend/src/app/components/modal/modal-component.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { Modal } from 'antd';
 import './modal-component.scss';
-import ModalManager from 'app/components/modal/modal-manager';
+import ModalManager from '@components/modal/modal-manager';
 
 let component: any = null;
 export default () => {
diff --git a/tdrive/frontend/src/app/components/modal/modal-manager.ts b/tdrive/frontend/src/app/components/modal/modal-manager.ts
index 765044d3..06debf5a 100755
--- a/tdrive/frontend/src/app/components/modal/modal-manager.ts
+++ b/tdrive/frontend/src/app/components/modal/modal-manager.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Observable from 'app/deprecated/Observable/Observable';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import Observable from '@deprecated/Observable/Observable';
+import MenusManager from '@components/menus/menus-manager.jsx';
 
 class ModalManagerService extends Observable {
   static service: ModalManagerService = new ModalManagerService();
diff --git a/tdrive/frontend/src/app/components/new-version/new-version-component.tsx b/tdrive/frontend/src/app/components/new-version/new-version-component.tsx
index 9895d1b4..9a8455db 100644
--- a/tdrive/frontend/src/app/components/new-version/new-version-component.tsx
+++ b/tdrive/frontend/src/app/components/new-version/new-version-component.tsx
@@ -1,14 +1,14 @@
 import React, { useMemo, useState } from 'react';
 import { Col, Row, Typography } from 'antd';
 
-import Api from 'app/features/global/framework/api-service';
-import Banner from 'app/components/banner/banner';
-import Emojione from 'app/components/emojione/emojione';
-import Languages from 'app/features/global/services/languages-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import ModalManager from 'app/components/modal/modal-manager';
+import Api from '@features/global/framework/api-service';
+import Banner from '@components/banner/banner';
+import Emojione from '@components/emojione/emojione';
+import Languages from '@features/global/services/languages-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import ModalManager from '@components/modal/modal-manager';
 import NewVersionModal from './new-version-modal';
-import { ServerInfoType } from 'app/features/global/services/init-service';
+import { ServerInfoType } from '@features/global/services/init-service';
 
 let lastScrape = 0;
 
diff --git a/tdrive/frontend/src/app/components/new-version/new-version-modal.tsx b/tdrive/frontend/src/app/components/new-version/new-version-modal.tsx
index f4415f29..c6f89ac2 100644
--- a/tdrive/frontend/src/app/components/new-version/new-version-modal.tsx
+++ b/tdrive/frontend/src/app/components/new-version/new-version-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ObjectModal from '../object-modal/object-modal';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import Emojione from '../emojione/emojione';
 import { Button } from 'antd';
 
diff --git a/tdrive/frontend/src/app/components/object-modal/deprecated-object-modal.jsx b/tdrive/frontend/src/app/components/object-modal/deprecated-object-modal.jsx
index 86cf5075..5e517a47 100755
--- a/tdrive/frontend/src/app/components/object-modal/deprecated-object-modal.jsx
+++ b/tdrive/frontend/src/app/components/object-modal/deprecated-object-modal.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import Tabs from 'components/tabs/tabs.jsx';
 import './deprecated-object-modal.scss';
diff --git a/tdrive/frontend/src/app/components/object-modal/object-modal.tsx b/tdrive/frontend/src/app/components/object-modal/object-modal.tsx
index 62238ec0..697b1e3c 100644
--- a/tdrive/frontend/src/app/components/object-modal/object-modal.tsx
+++ b/tdrive/frontend/src/app/components/object-modal/object-modal.tsx
@@ -4,8 +4,8 @@ import React, { FC } from 'react';
 import classNames from 'classnames';
 import { Divider, Layout, Typography, Col, Row } from 'antd';
 
-import ModalManager from 'app/components/modal/modal-manager';
-import Icon from 'app/components/icon/icon.jsx';
+import ModalManager from '@components/modal/modal-manager';
+import Icon from '@components/icon/icon.jsx';
 
 import './object-modal.scss';
 
diff --git a/tdrive/frontend/src/app/components/on-boarding/account-status-component.tsx b/tdrive/frontend/src/app/components/on-boarding/account-status-component.tsx
deleted file mode 100644
index 674e5622..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/account-status-component.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-
-import Banner from 'app/components/banner/banner';
-import { Button, Typography } from 'antd';
-import Languages from 'app/features/global/services/languages-service';
-import ModalManager from 'app/components/modal/modal-manager';
-import UnverifiedAccount from './popups/unverified-account';
-import BlockedAccount from './popups/blocked-account';
-import InitService from 'app/features/global/services/init-service';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-
-const AccountStatusComponent = (): JSX.Element => {
-  const { user } = useCurrentUser();
-  const maxUnverifiedDays =
-    InitService.server_infos?.configuration?.accounts?.remote?.max_unverified_days || 7;
-  const oneDay = 1000 * 60 * 60 * 24;
-  const periodLimit = (user?.created_at || 0) + maxUnverifiedDays * oneDay;
-  const daysLeft = Math.ceil((periodLimit - Date.now()) / oneDay);
-
-  if (!user || InitService.server_infos?.configuration?.accounts?.type !== 'remote') {
-    return <></>;
-  }
-
-  const showBlockedModal = () => {
-    if (InitService.server_infos?.configuration?.accounts?.type === 'remote')
-      return ModalManager.open(
-        <BlockedAccount email={user?.email} />,
-        {
-          position: 'center',
-          size: { width: '600px' },
-        },
-        false,
-      );
-  };
-
-  const showUnverifiedModal = () => {
-    if (InitService.server_infos?.configuration?.accounts?.type === 'remote')
-      return ModalManager.open(
-        <UnverifiedAccount daysLeft={daysLeft} limit={maxUnverifiedDays} email={user.email} />,
-        {
-          position: 'center',
-          size: { width: '600px' },
-        },
-      );
-  };
-
-  if (!user.is_verified && daysLeft <= 0) {
-    showBlockedModal();
-  }
-
-  const showBanner = !user.is_verified;
-  return (
-    <>
-      {showBanner && (
-        <Banner
-          type="important"
-          content={
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <Typography.Title level={5} style={{ marginBottom: 0, color: 'var(--white)' }}>
-                {Languages.t('components.account_verification_status_sentence', [
-                  Languages.t('components.account_verication_status_unverified'),
-                ])}
-              </Typography.Title>
-              <Button
-                style={{ marginLeft: 17, height: 32, color: 'var(--red)' }}
-                onClick={showUnverifiedModal}
-              >
-                {Languages.t('general.verify')}
-              </Button>
-            </div>
-          }
-        />
-      )}
-    </>
-  );
-};
-
-export default AccountStatusComponent;
diff --git a/tdrive/frontend/src/app/components/on-boarding/company-billing-banner.tsx b/tdrive/frontend/src/app/components/on-boarding/company-billing-banner.tsx
deleted file mode 100644
index 9f676d83..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/company-billing-banner.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { Row, Typography } from 'antd';
-import Banner from '../banner/banner';
-import { CompanyType } from 'app/features/companies/types/company';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import Languages from 'app/features/global/services/languages-service';
-import { AlertTriangle } from 'react-feather';
-import consoleService from 'app/features/console/services/console-service';
-
-type PropsType = {
-  companyId: string;
-};
-
-const { Link } = Typography;
-export default ({ companyId }: PropsType): JSX.Element => {
-  const companySubscriptionUrl = consoleService.getCompanySubscriptionUrl(companyId);
-  const userGroups: { [key: string]: CompanyType } = Groups.user_groups;
-  const currentUserGroup = userGroups[companyId];
-  const isCurrentUserAdminOrOwner =
-    currentUserGroup?.role === 'admin' || currentUserGroup?.role === 'owner';
-
-  const onClickLink = () => window.open(companySubscriptionUrl, 'blank');
-
-  const shouldDisplayBanner = currentUserGroup?.plan?.billing?.status === 'warning';
-  return shouldDisplayBanner ? (
-    <Banner type="important">
-      <Row align="middle">
-        <AlertTriangle size={24} />
-        <div className="small-x-margin">
-          {Languages.t(
-            isCurrentUserAdminOrOwner
-              ? 'components.on_boarding.company_billing_banner.admin_or_owner_text'
-              : 'components.on_boarding.company_billing_banner.guest_or_member_text',
-          )}
-        </div>
-        {isCurrentUserAdminOrOwner && (
-          <Link onClick={onClickLink}>
-            {Languages.t('components.on_boarding.company_billing_banner.link')}
-          </Link>
-        )}
-      </Row>
-    </Banner>
-  ) : (
-    <></>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/on-boarding/company-status-component.tsx b/tdrive/frontend/src/app/components/on-boarding/company-status-component.tsx
deleted file mode 100644
index 2d6eb2f0..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/company-status-component.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useEffect } from 'react';
-import ModalManager from 'app/components/modal/modal-manager';
-import UserService from 'app/features/users/services/current-user-service';
-import WelcomeOnTdrive from './popups/welcome-on-tdrive';
-import DepreciatedCollections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import InitService from 'app/features/global/services/init-service';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import { CompanyType } from 'app/features/companies/types/company';
-import BlockedCompany from './popups/blocked-company';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-
-const CompanyStatusComponent = (): JSX.Element => {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const user = UserService.getCurrentUser();
-  const onboarding: string | null = localStorage.getItem(`onboarding_${companyId}`);
-  const workspace = DepreciatedCollections.get('workspaces').find(workspaceId);
-
-  useEffect(() => {
-    if (InitService.server_infos?.configuration?.accounts?.type === 'remote') {
-      isNewAccount();
-    }
-
-    isBlockedCompany();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [companyId]);
-
-  const isNewCompany = (): boolean => {
-    const oneDay = 1000 * 60 * 60 * 24;
-    const createdDay = workspace?.group?.stats?.created_at;
-    const currentDay = Date.now();
-    const currentPeriod = Math.round(Math.round(currentDay - createdDay) / oneDay);
-
-    return currentPeriod <= 7 ? true : false;
-  };
-
-  const isNewAccount = () => {
-    if (!workspace?.id) return;
-
-    const isNewUser: boolean =
-      onboarding !== 'completed' &&
-      workspace?.group?.stats?.total_members <= 1 &&
-      isNewCompany() &&
-      !user?.is_verified;
-
-    if (isNewUser) {
-      localStorage.setItem(`onboarding_${companyId}`, 'completed');
-      return ModalManager.open(<WelcomeOnTdrive email={user.email} />, {
-        position: 'center',
-        size: { width: '600px' },
-      });
-    }
-  };
-
-  const isBlockedCompany = () => {
-    if (!companyId) return;
-    const userGroups: { [key: string]: CompanyType } = Groups.user_groups;
-    const currentGroup = userGroups[companyId];
-
-    if (currentGroup?.plan?.billing?.status === 'error') {
-      return ModalManager.open(
-        <BlockedCompany />,
-        {
-          position: 'center',
-          size: { width: '600px' },
-        },
-        false,
-      );
-    }
-  };
-
-  return <></>;
-};
-
-export default CompanyStatusComponent;
diff --git a/tdrive/frontend/src/app/components/on-boarding/popups/add-mails-in-workspace.tsx b/tdrive/frontend/src/app/components/on-boarding/popups/add-mails-in-workspace.tsx
deleted file mode 100644
index 9a7dbff7..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/popups/add-mails-in-workspace.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Col, Row, Typography } from 'antd';
-import AutoHeight from '../../auto-height/auto-height';
-import ObjectModal from '../../object-modal/object-modal';
-import Languages from 'app/features/global/services/languages-service';
-import ModalManager from 'app/components/modal/modal-manager';
-import ConsoleService from 'app/features/console/services/console-service';
-import RouterServices from 'app/features/router/services/router-service';
-import WorkspacesUsers from 'app/features/workspace-members/services/workspace-members-service';
-
-export default (): JSX.Element => {
-  const { companyId, workspaceId } = RouterServices.getStateFromRoute();
-  const [emails, _setEmails] = useState<string[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const setEmails = (str: string) =>
-    _setEmails(WorkspacesUsers.fullStringToEmails(str) as string[]);
-
-  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => setEmails(e.target.value);
-
-  const onClickButton = async () => {
-    setLoading(true);
-
-    return await ConsoleService.addMailsInWorkspace({
-      workspace_id: workspaceId || '',
-      company_id: companyId || '',
-      emails,
-    }).finally(() => {
-      setLoading(false);
-      return ModalManager.close();
-    });
-  };
-
-  return (
-    <ObjectModal
-      title={Languages.t('components.add_mails_workspace.title_1')}
-      closable
-      style={{ height: 600 }}
-      titleLevel={2}
-      titleCenter
-      hideFooterDivider
-      footerAlign="center"
-      footer={
-        <Row className="x-margin" justify="center">
-          <Button onClick={onClickButton} type="primary" size="large" loading={loading}>
-            {Languages.t('components.add_mails_workspace.button')}
-          </Button>
-        </Row>
-      }
-    >
-      <Row
-        className="x-margin"
-        style={{ padding: '0 16px', marginTop: 16, marginBottom: 62 }}
-        justify="center"
-      >
-        <Typography.Text
-          style={{ textAlign: 'center', width: '464px', fontSize: 17, height: '44px' }}
-        >
-          {Languages.t('components.add_mails_workspace.title_2')}
-        </Typography.Text>
-      </Row>
-
-      <Row className="x-margin" style={{ marginBottom: 12, paddingTop: 32 }} justify="center">
-        <Col style={{ width: 400 }}>
-          <AutoHeight
-            minHeight="110px"
-            maxHeight="300px"
-            onChange={onChange}
-            placeholder={Languages.t('components.add_mails_workspace.text_area_placeholder')}
-          />
-        </Col>
-      </Row>
-
-      <Row className="x-margin" style={{ display: 'flex', justifyContent: 'center' }}>
-        <Typography.Text type="secondary" style={{ width: 380, fontSize: 13, height: 32 }}>
-          {Languages.t('scenes.app.popup.adduser.adresses_message')}
-        </Typography.Text>
-      </Row>
-    </ObjectModal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/on-boarding/popups/blocked-account.tsx b/tdrive/frontend/src/app/components/on-boarding/popups/blocked-account.tsx
deleted file mode 100644
index b40dca93..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/popups/blocked-account.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useState } from 'react';
-import { Button, Row, Typography } from 'antd';
-import ObjectModal from '../../object-modal/object-modal';
-import Languages from 'app/features/global/services/languages-service';
-import ConsoleService from 'app/features/console/services/console-service';
-import LoginService from 'app/features/auth/login-service';
-
-type PropsType = {
-  email: string;
-};
-
-export default ({ email }: PropsType): JSX.Element => {
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const onClickButton = () => {
-    setLoading(true);
-    return ConsoleService.verifyMail().finally(() => setLoading(false));
-  };
-
-  return (
-    <ObjectModal
-      title={Languages.t('components.account_verification_status_sentence', [
-        Languages.t('components.account_verication_status_blocked'),
-      ])}
-      titleColor="var(--white)"
-      titleCenter
-      headerStyle={{ backgroundColor: 'var(--red)', color: 'var(--white)', height: 76 }}
-      hideFooterDivider
-      footerAlign="center"
-      footer={
-        <>
-          <Button type="ghost" size="small" onClick={onClickButton} loading={loading}>
-            {Languages.t('general.re_send')}
-          </Button>
-
-          <Row justify="center" style={{ marginTop: 16 }}>
-            <a className="blue_link" onClick={() => LoginService.logout()}>
-              {Languages.t('scenes.apps.account.account.logout')}
-            </a>
-          </Row>
-        </>
-      }
-    >
-      <Row justify="center" style={{ marginTop: 36 }}>
-        <Typography.Title
-          level={3}
-          style={{
-            textAlign: 'center',
-            margin: 0,
-            width: 493,
-          }}
-        >
-          {Languages.t('components.blocked_account.trial_period_over')}
-        </Typography.Title>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 24 }}>
-        <Typography.Text
-          style={{
-            textAlign: 'center',
-            height: 22,
-          }}
-        >
-          {Languages.t('components.unverified_account.verification_details')}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 12 }}>
-        <Typography.Text
-          strong
-          style={{
-            textAlign: 'center',
-            height: '22px',
-          }}
-        >
-          {email}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 32, marginBottom: 8 }}>
-        <Typography.Text
-          style={{
-            textAlign: 'center',
-            fontSize: 15,
-            height: '22px',
-          }}
-        >
-          {Languages.t('components.unverified_account.re_send_email')}
-        </Typography.Text>
-      </Row>
-    </ObjectModal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/on-boarding/popups/blocked-company.tsx b/tdrive/frontend/src/app/components/on-boarding/popups/blocked-company.tsx
deleted file mode 100644
index a3c1e653..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/popups/blocked-company.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from 'react';
-import { Button, Row, Typography, Select } from 'antd';
-import ObjectModal from '../../object-modal/object-modal';
-import Languages from 'app/features/global/services/languages-service';
-import LoginService from 'app/features/auth/login-service';
-import { CompanyType } from 'app/features/companies/types/company';
-import { capitalize } from 'lodash';
-import ModalManager from 'app/components/modal/modal-manager';
-import UserService from 'app/features/users/services/current-user-service';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import { AlertTriangle } from 'react-feather';
-import consoleService from 'app/features/console/services/console-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-
-type SwitchCompanyPropsType = {
-  placeholder?: string;
-  companiesIds: string[];
-};
-
-const { Option } = Select;
-const { Text, Title } = Typography;
-const SwitchCompany = ({ placeholder, companiesIds }: SwitchCompanyPropsType): JSX.Element => {
-  const userGroups: { [key: string]: CompanyType } = Groups.user_groups;
-  const companies = companiesIds
-    .map(id => userGroups[id])
-    .filter(company => company.plan?.billing?.status !== 'error');
-
-  const onSelect = (companyId: string) => {
-    Groups.select(userGroups[companyId]);
-    return ModalManager.close();
-  };
-
-  const onClickBtn = () => LoginService.logout();
-
-  return (
-    (!!companies.length && (
-      <Select
-        placeholder={placeholder || 'Select a company'}
-        onSelect={onSelect}
-        style={{ width: 224 }}
-      >
-        {companies.map(company => (
-          <Option key={company.id} value={company.id}>
-            {capitalize(company.name)}
-          </Option>
-        ))}
-      </Select>
-    )) || (
-      <Button
-        type="primary"
-        style={{ height: 36, width: 163, backgroundColor: 'var(--red)' }}
-        onClick={onClickBtn}
-      >
-        {Languages.t('scenes.app.channelsbar.currentuser.logout')}
-      </Button>
-    )
-  );
-};
-
-export default (): JSX.Element => {
-  const companyId = useRouterCompany();
-  const onClickButton = () =>
-    window.open(
-      consoleService.getCompanySubscriptionUrl(companyId),
-      'blank',
-    );
-
-  return (
-    <ObjectModal
-      title={
-        <div style={{ display: 'flex' }}>
-          <AlertTriangle size={24} />
-          <span className="small-left-margin">
-            {Languages.t('components.on_boarding.popups.blocked_company.title')}
-          </span>
-        </div>
-      }
-      titleColor="var(--white)"
-      titleCenter
-      headerStyle={{ backgroundColor: 'var(--red)', color: 'var(--white)', height: 76 }}
-      hideFooterDivider
-      footerAlign="center"
-      footerStyle={{ marginBottom: 24 }}
-      footer={
-        <Row justify="space-between" align="middle">
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              marginTop: 32,
-            }}
-          >
-            <Button type="ghost" size="large" onClick={onClickButton}>
-              {Languages.t(
-                'components.on_boarding.popups.blocked_company.company_subscription_plan_button',
-              )}
-            </Button>
-            <Text style={{ margin: '8px 0 ' }} strong>
-              {Languages.t('components.on_boarding.popups.blocked_company.or')}
-            </Text>
-            <SwitchCompany
-              placeholder={Languages.t(
-                'components.on_boarding.popups.blocked_company.company_selector',
-              )}
-              companiesIds={[...(UserService.getCurrentUser()?.groups_id || [])]}
-            />
-          </div>
-        </Row>
-      }
-    >
-      <Row justify="center" style={{ marginTop: 36 }}>
-        <Title
-          level={3}
-          style={{
-            textAlign: 'center',
-            margin: 0,
-            width: 493,
-          }}
-        >
-          {Languages.t('components.on_boarding.popups.blocked_company.description')}
-        </Title>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 32, marginBottom: 8 }}>
-        <Text
-          style={{
-            textAlign: 'center',
-            fontSize: 15,
-            height: '22px',
-          }}
-        >
-          {Languages.t('components.on_boarding.popups.blocked_company.learn_more_text')}
-        </Text>
-      </Row>
-    </ObjectModal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/on-boarding/popups/unverified-account.tsx b/tdrive/frontend/src/app/components/on-boarding/popups/unverified-account.tsx
deleted file mode 100644
index 2f7186ef..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/popups/unverified-account.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Row, Typography } from 'antd';
-import ObjectModal from '../../object-modal/object-modal';
-import Languages from 'app/features/global/services/languages-service';
-import ConsoleService from 'app/features/console/services/console-service';
-
-type PropsType = {
-  daysLeft: number;
-  limit: number;
-  email: string;
-};
-
-export default ({ daysLeft, email, limit }: PropsType): JSX.Element => {
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const onClickButton = () => {
-    setLoading(true);
-    return ConsoleService.verifyMail().finally(() => setLoading(false));
-  };
-
-  return (
-    <ObjectModal
-      closable
-      title={Languages.t('components.account_verification_status_sentence', [
-        Languages.t('components.account_verication_status_unverified'),
-      ])}
-      titleColor="var(--white)"
-      titleCenter
-      headerStyle={{ backgroundColor: 'var(--red)', color: 'var(--white)', height: 76 }}
-      hideFooterDivider
-      footerAlign="center"
-      footer={
-        <Button type="ghost" size="small" onClick={onClickButton} loading={loading}>
-          {Languages.t('general.re_send')}
-        </Button>
-      }
-    >
-      <Row justify="center" style={{ marginTop: 32, height: 68 }}>
-        <Typography.Text
-          type="danger"
-          style={{
-            width: 435,
-            textAlign: 'center',
-            margin: 0,
-          }}
-        >
-          {Languages.t('components.unverified_account.typography_text_danger', [daysLeft, limit])}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 12, height: 22 }}>
-        <Typography.Text
-          style={{
-            textAlign: 'center',
-          }}
-        >
-          {Languages.t('components.unverified_account.verification_details')}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 12 }}>
-        <Typography.Text
-          strong
-          style={{
-            textAlign: 'center',
-            height: '22px',
-          }}
-        >
-          {email}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginTop: 32, marginBottom: 8 }}>
-        <Typography.Text
-          style={{
-            textAlign: 'center',
-            fontSize: 15,
-            height: '22px',
-          }}
-        >
-          {Languages.t('components.unverified_account.re_send_email')}
-        </Typography.Text>
-      </Row>
-    </ObjectModal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/on-boarding/popups/welcome-on-tdrive.tsx b/tdrive/frontend/src/app/components/on-boarding/popups/welcome-on-tdrive.tsx
deleted file mode 100644
index 2413dff2..00000000
--- a/tdrive/frontend/src/app/components/on-boarding/popups/welcome-on-tdrive.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Button, Row, Typography } from 'antd';
-import React, { useState } from 'react';
-import Emojione from '../../emojione/emojione';
-import ObjectModal from '../../object-modal/object-modal';
-import Languages from 'app/features/global/services/languages-service';
-import ModalManager from 'app/components/modal/modal-manager';
-import AddMailsInWorkspace from './add-mails-in-workspace';
-import ConsoleService from 'app/features/console/services/console-service';
-
-type PropsType = {
-  email: string;
-};
-
-export default ({ email }: PropsType) => {
-  const [loading, setLoading] = useState<boolean>(false);
-  const openAddMembers = () =>
-    ModalManager.open(<AddMailsInWorkspace />, {
-      position: 'center',
-      size: { width: '600px' },
-    });
-
-  const onClickButton = () => {
-    setLoading(true);
-    return ConsoleService.verifyMail().finally(() => setLoading(false));
-  };
-
-  return (
-    <ObjectModal
-      title={
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {Languages.t('components.verify_mail.title_1')}
-          <Emojione type=":partying_face:" s128 />
-        </div>
-      }
-      closable
-      style={{ height: 600 }}
-      titleLevel={2}
-      titleCenter
-      footerAlign="center"
-      hideFooterDivider
-      footer={
-        <Button onClick={openAddMembers} type="primary" size="large">
-          {Languages.t('components.verify_mail.button')}
-        </Button>
-      }
-    >
-      <Row justify="center" style={{ margin: '12px 0 54px 0', height: '25px' }}>
-        <Typography.Title
-          level={3}
-          style={{
-            textAlign: 'center',
-            margin: 0,
-          }}
-        >
-          {Languages.t('components.verify_mail.title_2')}
-        </Typography.Title>
-      </Row>
-      <Row justify="center" style={{ marginBottom: '12px', height: '44px' }}>
-        <Typography.Text
-          style={{
-            textAlign: 'center',
-            width: '396px',
-            height: '44px',
-          }}
-        >
-          {Languages.t('components.verify_mail.text')}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginBottom: 32 }}>
-        <Typography.Text
-          strong
-          style={{
-            textAlign: 'center',
-            height: '22px',
-          }}
-        >
-          {email}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginBottom: 32, height: '44px' }}>
-        <Typography.Paragraph
-          style={{
-            width: '393px',
-            textAlign: 'center',
-            height: '44px',
-          }}
-        >
-          {Languages.t('components.verify_mail.paragraph')}
-        </Typography.Paragraph>
-      </Row>
-
-      <Row justify="center" style={{ marginBottom: 8 }}>
-        <Typography.Text
-          style={{
-            textAlign: 'center',
-            fontSize: 15,
-            height: '22px',
-          }}
-        >
-          {Languages.t('components.unverified_account.re_send_email')}
-        </Typography.Text>
-      </Row>
-
-      <Row justify="center" style={{ marginBottom: 104 }}>
-        <Button type="ghost" size="small" onClick={onClickButton} loading={loading}>
-          {Languages.t('general.re_send')}
-        </Button>
-      </Row>
-    </ObjectModal>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/online-user-status/online-user-status.tsx b/tdrive/frontend/src/app/components/online-user-status/online-user-status.tsx
index 6447ffb0..1501813a 100644
--- a/tdrive/frontend/src/app/components/online-user-status/online-user-status.tsx
+++ b/tdrive/frontend/src/app/components/online-user-status/online-user-status.tsx
@@ -2,11 +2,11 @@
 import React, { Suspense } from 'react';
 import classNames from 'classnames';
 
-import { UserType } from 'app/features/users/types/user';
-import { useOnlineUser } from 'app/features/users/hooks/use-online-user';
+import { UserType } from '@features/users/types/user';
+import { useOnlineUser } from '@features/users/hooks/use-online-user';
 
 import './online-user-status.scss';
-import { useUser } from 'app/features/users/hooks/use-user';
+import { useUser } from '@features/users/hooks/use-user';
 
 type PropsType = {
   user: UserType;
diff --git a/tdrive/frontend/src/app/components/open-desktop-popup/open-desktop-popup.tsx b/tdrive/frontend/src/app/components/open-desktop-popup/open-desktop-popup.tsx
index a5a25f51..a697bc92 100644
--- a/tdrive/frontend/src/app/components/open-desktop-popup/open-desktop-popup.tsx
+++ b/tdrive/frontend/src/app/components/open-desktop-popup/open-desktop-popup.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Logo } from 'app/atoms/logo';
-import { Subtitle } from 'app/atoms/text';
-import A from 'app/atoms/link';
+import { Logo } from '@atoms/logo';
+import { Subtitle } from '@atoms/text';
+import A from '@atoms/link';
 import { useRecoilState } from 'recoil';
-import { useWebState } from 'app/features/global/state/atoms/use-web';
-import Languages from 'app/features/global/services/languages-service';
+import { useWebState } from '@features/global/state/atoms/use-web';
+import Languages from '@features/global/services/languages-service';
 
 export const OpenDesktopPopup = (): React.ReactElement => {
   const [showLink, setShowLink] = useState(true);
diff --git a/tdrive/frontend/src/app/components/parameters/attribute.jsx b/tdrive/frontend/src/app/components/parameters/attribute.jsx
index 3bbe597c..a928b0d8 100755
--- a/tdrive/frontend/src/app/components/parameters/attribute.jsx
+++ b/tdrive/frontend/src/app/components/parameters/attribute.jsx
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import Number from 'app/features/global/utils/Numbers';
+import Number from '@features/global/utils/Numbers';
 import AttributesManager from './attributes-manager.js';
 import './parameters.scss';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
 export default class Attribute extends React.Component {
   constructor(props) {
diff --git a/tdrive/frontend/src/app/components/parameters/attributes-manager.js b/tdrive/frontend/src/app/components/parameters/attributes-manager.js
index 76886190..5bea4d24 100755
--- a/tdrive/frontend/src/app/components/parameters/attributes-manager.js
+++ b/tdrive/frontend/src/app/components/parameters/attributes-manager.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
 
 /*
   Menus manager service, choose where to generate menu
diff --git a/tdrive/frontend/src/app/components/picker/picker.jsx b/tdrive/frontend/src/app/components/picker/picker.jsx
index fb89ab3a..a59175d9 100755
--- a/tdrive/frontend/src/app/components/picker/picker.jsx
+++ b/tdrive/frontend/src/app/components/picker/picker.jsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-key */
 import React, { Component } from 'react';
 import AutoComplete from 'components/auto-complete/auto-complete';
-import Icon from 'app/components/icon/icon.jsx';
-import Languages from 'app/features/global/services/languages-service';
+import Icon from '@components/icon/icon.jsx';
+import Languages from '@features/global/services/languages-service';
 import './picker.scss';
 
 export default class Picker extends React.Component {
diff --git a/tdrive/frontend/src/app/components/popup-component/popup-component.jsx b/tdrive/frontend/src/app/components/popup-component/popup-component.jsx
index 8e80b718..5862874f 100755
--- a/tdrive/frontend/src/app/components/popup-component/popup-component.jsx
+++ b/tdrive/frontend/src/app/components/popup-component/popup-component.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import './popup-component.scss';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
+import popupManager from '@deprecated/popupManager/popupManager.js';
 import CloseIcon from '@material-ui/icons/CloseOutlined';
 
 export default class PopupComponent extends React.Component {
diff --git a/tdrive/frontend/src/app/components/reminder-selector/reminder-selector.jsx b/tdrive/frontend/src/app/components/reminder-selector/reminder-selector.jsx
index 414620b0..59d222e9 100755
--- a/tdrive/frontend/src/app/components/reminder-selector/reminder-selector.jsx
+++ b/tdrive/frontend/src/app/components/reminder-selector/reminder-selector.jsx
@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import Button from 'components/buttons/button.jsx';
 import Input from 'components/inputs/input.jsx';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import Select from 'components/select/select.jsx';
 import './reminder-selector.scss';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
 export default class ReminderSelector extends React.Component {
   constructor(props) {
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor-data-parser.ts b/tdrive/frontend/src/app/components/rich-text-editor/editor-data-parser.ts
deleted file mode 100644
index 28cf3b7e..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor-data-parser.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ContentState, EditorState, convertToRaw, convertFromRaw } from 'draft-js';
-import { markdownToDraft, DraftToMarkdownOptions } from 'markdown-draft-js';
-import draftToMarkdown from './markdown/draft-to-markdown';
-import { EditorTextFormat } from './editor';
-import { EditorSuggestionPlugin } from './plugins';
-import { EntityItemsOptions } from './markdown/types';
-
-export default class EditorDataParser {
-  private entityItems: EntityItemsOptions = {};
-  private styleItems: DraftToMarkdownOptions['styleItems'] = {};
-
-  constructor(private plugins: EditorSuggestionPlugin<any>[] = []) {
-    this.plugins.forEach(plugin => {
-      if (plugin.serializer) {
-        this.entityItems![plugin.resourceType] = {
-          open: (entity, block) => plugin.serializer?.open(entity, block) || '',
-          close: (entity, block) => plugin.serializer?.close(entity, block) || '',
-        };
-      }
-    });
-
-    // adding custom support for underline since it is not natively available in markdown
-    this.styleItems!['UNDERLINE'] = {
-      open: () => '__',
-      close: () => '__',
-    };
-  }
-
-  toString(editorState: EditorState, format: EditorTextFormat): string {
-    const contentState = editorState.getCurrentContent();
-
-    switch (format) {
-      case 'markdown': {
-        let markdown = draftToMarkdown(convertToRaw(contentState), {
-          entityItems: this.entityItems,
-          styleItems: this.styleItems,
-          escapeMarkdownCharacters: false,
-          preserveNewlines: true,
-          // types definition are not up to date...
-        } as DraftToMarkdownOptions).trim();
-
-        // when empty the stateToMarkdown lib returns a zero-width-space character in first position
-        if (markdown.length === 1 && markdown.charCodeAt(0) === 8203) {
-          markdown = '';
-        }
-
-        return this.replaceElements(markdown);
-      }
-
-      case 'raw': {
-        return JSON.stringify(convertToRaw(contentState));
-      }
-
-      default: {
-        throw new Error(`${format} format not supported`);
-      }
-    }
-  }
-
-  fromString(markup: string, format: EditorTextFormat): ContentState {
-    switch (format) {
-      case 'markdown': {
-        return convertFromRaw(markdownToDraft(markup, { preserveNewlines: true }));
-      }
-      case 'raw': {
-        return convertFromRaw(JSON.parse(markup));
-      }
-      default: {
-        throw new Error(`${format} format not supported`);
-      }
-    }
-  }
-
-  private replaceElements(content: string): string {
-    this.plugins.forEach(plugin => {
-      if (plugin.serializer && plugin.serializer.replace) {
-        content = plugin.serializer.replace(content);
-      }
-    });
-    return content;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor-state-service.ts b/tdrive/frontend/src/app/components/rich-text-editor/editor-state-service.ts
deleted file mode 100644
index 101748c4..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor-state-service.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { EditorState, CompositeDecorator, ContentState } from "draft-js";
-import EditorDataParser from "./editor-data-parser";
-import { getPlugins } from "./plugins";
-
-class EditorStateService {
-  private states: Map<string, EditorState>;
-
-  constructor() {
-    this.states = new Map();
-  }
-
-  /**
-   * Get editor state for given ID is already exists, else create a new one
-   * 
-   * @param editorId
-   * @returns 
-   */
-  get(editorId: string, options?: { plugins?: Array<string>, initialContent?: ContentState, clearIfExists?: boolean }): EditorState {
-    if (!editorId) {
-      throw new Error("Editor id is required");
-    }
-
-    let editor = this.states.get(editorId);
-
-    if (editor && options?.clearIfExists) {
-      editor = this.clear(editorId).states.get(editorId);
-    }
-
-    if (!editor) {
-      editor = this.createEditor(options?.plugins, options?.initialContent);
-      this.states.set(editorId, editor);
-    }
-
-    return editor;
-  }
-
-  set(editorId: string, editorState: EditorState): this {
-    this.states.set(editorId, editorState);
-
-    return this;
-  }
-
-  clear(editorId: string): this {
-    this.states.delete(editorId);
-
-    return this;
-  }
-
-  createEditor(plugins?: Array<string>, initialContent?: ContentState): EditorState {
-    const editorPlugins = getPlugins(plugins);
-    const decorators = new CompositeDecorator(editorPlugins.map(p => p.decorator));
-
-    if (initialContent) {
-      return EditorState.createWithContent(initialContent, decorators);
-    }
-
-    return EditorState.createEmpty(decorators);
-  }
-
-  getDataParser(plugins?: Array<string>): EditorDataParser {
-    return new EditorDataParser(getPlugins(plugins));
-  }
-}
-
-const instance = new EditorStateService();
-
-export default instance;
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar-config.ts b/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar-config.ts
deleted file mode 100644
index a2e0bd6e..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar-config.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-export type StyleConfig = {
-  /**
-   * Draft.js style to apply
-   */
-  style: string;
-  /**
-   * Label to display when i18n is not defined
-   */
-  label: string;
-  /**
-   * i18n key
-   */
-  i18n?: string;
-  className?: string;
-};
-
-export type StyleConfigList = Array<StyleConfig>;
-
-export type GroupName = 'INLINE_STYLE_BUTTONS' | 'BLOCK_ALIGNMENT_BUTTONS' | 'BLOCK_TYPE_BUTTONS' | 'LINK_BUTTONS' | 'BLOCK_TYPE_DROPDOWN' | 'HISTORY_BUTTONS' | 'IMAGE_BUTTON';
-
-export type ToolbarConfig = {
-  display: Array<GroupName>;
-  extraProps?: Object;
-  INLINE_STYLE_BUTTONS: StyleConfigList;
-  BLOCK_ALIGNMENT_BUTTONS: StyleConfigList;
-  BLOCK_TYPE_DROPDOWN: StyleConfigList;
-  BLOCK_TYPE_BUTTONS: StyleConfigList;
-};
-
-export const INLINE_STYLE_BUTTONS: StyleConfigList = [
-  { label: 'Bold', style: 'BOLD', i18n: 'components.richtexteditor.toolbar.bold' },
-  { label: 'Underline', style: 'UNDERLINE', i18n: 'components.richtexteditor.toolbar.underline' },
-  { label: 'Italic', style: 'ITALIC', i18n: 'components.richtexteditor.toolbar.italic' },
-  { label: 'Strikethrough', style: 'STRIKETHROUGH', i18n: 'components.richtexteditor.toolbar.strikethrough' },
-  { label: 'Code', style: 'CODE', i18n: 'components.richtexteditor.toolbar.code' },
-];
-
-export const BLOCK_ALIGNMENT_BUTTONS: StyleConfigList = [
-  {label: 'Align Left', style: 'ALIGN_LEFT'},
-  {label: 'Align Center', style: 'ALIGN_CENTER'},
-  {label: 'Align Right', style: 'ALIGN_RIGHT'},
-  {label: 'Align Justify', style: 'ALIGN_JUSTIFY'},
-];
-
-export const BLOCK_TYPE_DROPDOWN: StyleConfigList = [
-  {label: 'Normal', style: 'unstyled'},
-  {label: 'Heading Large', style: 'header-one'},
-  {label: 'Heading Medium', style: 'header-two'},
-  {label: 'Heading Small', style: 'header-three'},
-  {label: 'Code Block', style: 'code-block'},
-];
-export const BLOCK_TYPE_BUTTONS: StyleConfigList = [
-  {label: 'UL', style: 'unordered-list-item', i18n: 'components.richtexteditor.toolbar.unordered-list'},
-  {label: 'OL', style: 'ordered-list-item', i18n: 'components.richtexteditor.toolbar.ordered-list'},
-  {label: 'Blockquote', style: 'blockquote', i18n: 'components.richtexteditor.toolbar.blockquote'},
-  {label: 'Code Block', style: 'code-block', i18n: 'components.richtexteditor.toolbar.code-block'},
-];
-
-const EditorToolbarConfig: ToolbarConfig = {
-  //display: ['INLINE_STYLE_BUTTONS', 'BLOCK_ALIGNMENT_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'LINK_BUTTONS', 'IMAGE_BUTTON', 'BLOCK_TYPE_DROPDOWN', 'HISTORY_BUTTONS'],
-  display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_BUTTONS'],
-  INLINE_STYLE_BUTTONS,
-  BLOCK_ALIGNMENT_BUTTONS,
-  BLOCK_TYPE_DROPDOWN,
-  BLOCK_TYPE_BUTTONS,
-};
-
-export default EditorToolbarConfig;
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.scss b/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.scss
deleted file mode 100644
index d58d705f..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.editor-toolbar {
-  display: flex;
-  flex-direction: row;
-  padding-left: 5px;
-  margin-right: -4px;
-
-  .button-group:first-child {
-    padding-left: 0;
-    border-left: none;
-  }
-
-  .inline,
-  .block {
-    color: var(--grey-dark);
-
-    &.active {
-      color: var(--black);
-      background: var(--primary-background);
-    }
-  }
-
-  .button-group {
-    border-left: 1px solid var(--grey-light);
-    padding-left: 4px;
-    padding-right: 4px;
-
-    display: flex;
-    align-items: center;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.tsx b/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.tsx
deleted file mode 100644
index a91c0bf7..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor-toolbar.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React, { ReactNode } from 'react';
-import classNames from 'classnames';
-import { EditorState, RichUtils } from 'draft-js';
-import { Bold, Underline, Italic, Code } from 'react-feather';
-import { Button, Tooltip } from 'antd';
-import {
-  StrikethroughOutlined,
-  OrderedListOutlined,
-  UnorderedListOutlined,
-  MenuUnfoldOutlined,
-  CodeOutlined,
-} from '@ant-design/icons';
-import Languages from 'app/features/global/services/languages-service';
-import DefaultToolbarConfig, {
-  GroupName,
-  StyleConfig,
-  ToolbarConfig,
-} from './editor-toolbar-config';
-import './editor-toolbar.scss';
-
-// Todo: Check this https://github.com/sstur/react-rte/blob/master/src/lib/EditorToolbar.js
-// https://dev.to/rose/rich-text-editing-on-the-web-formatting-text-and-keyboard-shortcuts-in-draft-js-4g9f
-
-type ChangeHandler = (state: EditorState) => unknown;
-
-type EditorToolbarProps = {
-  toobarConfig?: ToolbarConfig;
-  editorState: EditorState;
-  onChange: ChangeHandler;
-  buttonSize?: number;
-};
-
-export default (props: EditorToolbarProps) => {
-  const toolbarConfig = props.toobarConfig || DefaultToolbarConfig;
-  const buttonSize = props.buttonSize || 16;
-  const buttonGroups = toolbarConfig.display.map(groupName => {
-    switch (groupName) {
-      case 'INLINE_STYLE_BUTTONS': {
-        return _renderInlineStyleButtons(groupName, toolbarConfig);
-      }
-      case 'BLOCK_TYPE_BUTTONS': {
-        return _renderBlockTypeButtons(groupName, toolbarConfig);
-      }
-      default:
-        return null;
-    }
-  });
-
-  return <div className="editor-toolbar">{buttonGroups}</div>;
-
-  function _renderBlockTypeButtons(groupName: GroupName, config: ToolbarConfig) {
-    const { editorState } = props;
-    const selection = editorState.getSelection();
-    const blockType = editorState
-      .getCurrentContent()
-      .getBlockForKey(selection.getStartKey())
-      .getType();
-    const buttons = (config.BLOCK_TYPE_BUTTONS || []).map((type, index) => (
-      <Tooltip
-        placement="top"
-        title={Languages.t(type.i18n || '', [], type.label)}
-        key={`${index}`}
-      >
-        <Button
-          key={`${index}`}
-          size="small"
-          type="text"
-          onMouseDown={e => {
-            e.preventDefault();
-            _toggleBlockType(type.style);
-          }}
-          className={classNames('block', { active: type.style === blockType })}
-          icon={getBlockIcon(type)}
-        />
-      </Tooltip>
-    ));
-
-    return (
-      <div key={groupName} className="button-group">
-        {buttons}
-      </div>
-    );
-  }
-
-  function _renderInlineStyleButtons(groupName: GroupName, config: ToolbarConfig) {
-    const { editorState } = props;
-    const currentStyle = editorState.getCurrentInlineStyle();
-    const buttons = (config.INLINE_STYLE_BUTTONS || []).map((type, index) => (
-      <Tooltip
-        placement="top"
-        title={Languages.t(type.i18n || '', [], type.label)}
-        key={`${index}`}
-      >
-        <Button
-          key={`${index}`}
-          size="small"
-          type="text"
-          onMouseDown={e => {
-            e.preventDefault();
-            _toggleInlineStyle(type.style);
-          }}
-          className={classNames(
-            'inline',
-            { active: currentStyle.has(type.style) },
-            { 'not-active': !currentStyle.has(type.style) },
-          )}
-          icon={getIcon(type)}
-        />
-      </Tooltip>
-    ));
-
-    return (
-      <div key={groupName} className="button-group">
-        {buttons}
-      </div>
-    );
-  }
-
-  function getIcon(style: StyleConfig): ReactNode {
-    switch (style.style) {
-      case 'BOLD':
-        return <Bold size={buttonSize} />;
-      case 'ITALIC':
-        return <Italic size={buttonSize} />;
-      case 'UNDERLINE':
-        return <Underline size={buttonSize} />;
-      case 'STRIKETHROUGH':
-        return <StrikethroughOutlined style={{ fontSize: buttonSize }} />;
-      case 'CODE':
-        return <Code size={buttonSize} />;
-      default:
-        return <></>;
-    }
-  }
-
-  function getBlockIcon(style: StyleConfig): ReactNode {
-    switch (style.style) {
-      case 'unordered-list-item':
-        return <UnorderedListOutlined style={{ fontSize: buttonSize }} />;
-      case 'ordered-list-item':
-        return <OrderedListOutlined style={{ fontSize: buttonSize }} />;
-      case 'blockquote':
-        return <MenuUnfoldOutlined style={{ fontSize: buttonSize }} />;
-      case 'code-block':
-        return <CodeOutlined style={{ fontSize: buttonSize }} />;
-      default:
-        return <></>;
-    }
-  }
-
-  function _toggleInlineStyle(inlineStyle: string) {
-    props.onChange(RichUtils.toggleInlineStyle(props.editorState, inlineStyle));
-  }
-
-  function _toggleBlockType(blockType: string): void {
-    props.onChange(RichUtils.toggleBlockType(props.editorState, blockType));
-  }
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor-utils.ts b/tdrive/frontend/src/app/components/rich-text-editor/editor-utils.ts
deleted file mode 100644
index 5fb307b3..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor-utils.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-import { ContentBlock, EditorState, Modifier } from 'draft-js';
-import { getSelectedBlock, getSelectionEntity, getEntityRange } from 'draftjs-utils';
-
-export type SearchMatchType = {
-  // the input text we searched in
-  input: string | null;
-  // the text which has been found
-  text: string | null;
-  // the start index to 'text' in 'input'
-  start: number;
-  // the end index to 'text' in 'input'
-  end: number;
-  // where the current cursor was in the input string
-  focusOffset: number;
-};
-
-export function getCurrentBlock(editorState: EditorState): ContentBlock {
-  return editorState.getCurrentContent().getBlockForKey(editorState.getSelection().getStartKey());
-}
-
-/**
- * Add a block after the current one with given type and initial content
- *
- * @param editorState
- * @param newType
- * @param initialContent
- */
-export const splitBlockWithType = (
-  editorState: EditorState,
-  type = 'unstyled',
-  splitOffset: number,
-  deleteAfter: boolean,
-): EditorState => {
-  let contentState = editorState.getCurrentContent();
-  const selection = editorState.getSelection();
-  let updatedSelection = selection.merge({
-    anchorOffset: splitOffset,
-    focusOffset: splitOffset,
-  });
-
-  let newEditorState = EditorState.acceptSelection(editorState, updatedSelection);
-
-  contentState = Modifier.splitBlock(contentState, updatedSelection);
-  newEditorState = EditorState.push(editorState, contentState, 'split-block');
-  newEditorState = resetBlockWithType(newEditorState, type, '');
-
-  if (deleteAfter) {
-    let contentState = newEditorState.getCurrentContent();
-    const selectedBlock = getSelectedBlock(newEditorState);
-
-    updatedSelection = newEditorState.getSelection().merge({
-      anchorOffset: 0,
-      focusOffset: selectedBlock.getText().length,
-    });
-
-    contentState = Modifier.replaceText(
-      newEditorState.getCurrentContent(),
-      updatedSelection,
-      '',
-      newEditorState.getCurrentInlineStyle(),
-    );
-
-    newEditorState = EditorState.push(editorState, contentState, 'insert-characters');
-  }
-
-  return newEditorState;
-};
-
-/**
- * Will reset the current block with the given type and the initial content
- * Note that it will remove all the text already existing
- *
- * @param editorState
- * @param newType
- * @param initialContent
- * @returns
- */
-export const resetBlockWithType = (
-  editorState: EditorState,
-  newType = 'unstyled',
-  initialContent = '',
-): EditorState => {
-  let contentState = editorState.getCurrentContent();
-  const focusOffset = editorState.getSelection().getFocusOffset();
-  const updatedSelection = editorState.getSelection().merge({
-    anchorOffset: 0,
-    focusOffset,
-  });
-  const newEditorState = EditorState.acceptSelection(editorState, updatedSelection);
-  contentState = Modifier.replaceText(
-    newEditorState.getCurrentContent(),
-    updatedSelection,
-    initialContent,
-    newEditorState.getCurrentInlineStyle(),
-  );
-
-  contentState = Modifier.setBlockType(contentState, updatedSelection, newType);
-
-  return EditorState.push(editorState, contentState, 'change-block-type');
-};
-
-export function isMatching(trigger: string | RegExp, textToMatch: string | null) {
-  if (typeof trigger === 'string') {
-    return getTriggerRange(trigger, textToMatch);
-  } else if (trigger instanceof RegExp) {
-    return getTriggerMatchRange(trigger, textToMatch);
-  }
-}
-
-export function getTriggerMatchRange(regexp: RegExp, text: string | null) {
-  if (!text || /\s+$/.test(text)) {
-    return null;
-  }
-
-  const start = text.match(regexp);
-
-  if (!start) {
-    return;
-  }
-
-  return {
-    text: start[1],
-  };
-}
-
-export function getTriggerRange(term: string, text: string | null) {
-  if (!text || /\s+$/.test(text)) return null;
-
-  const start = text.lastIndexOf(term);
-  if (start === -1) {
-    return null;
-  }
-
-  return {
-    text: text.substring(start),
-  };
-}
-
-export function getTextToMatch(
-  editorState: EditorState,
-  separator = ' ',
-  returnFullTextForEntitiesTypes: Array<string> = [],
-): SearchMatchType | undefined {
-  const selection = editorState.getSelection();
-  const selectedBlock: ContentBlock = getSelectedBlock(editorState);
-  const entity = getSelectionEntity(editorState);
-  let result: SearchMatchType = {
-    input: null,
-    text: null,
-    start: -1,
-    end: -1,
-    focusOffset: 0,
-  };
-
-  if (
-    entity &&
-    returnFullTextForEntitiesTypes.includes(
-      editorState.getCurrentContent().getEntity(entity).getType(),
-    )
-  ) {
-    result = {
-      input: getEntityRange(editorState, entity).text,
-      text: getEntityRange(editorState, entity).text,
-      start: -1,
-      end: -1,
-      focusOffset: -1,
-    };
-  } else {
-    const selectedBlockText = selectedBlock.getText();
-    const focusOffset = selection.getFocusOffset();
-
-    // get the index of the previous separator before the focusOffset (ie before the current cursor position)
-    let previousSeparator = selectedBlockText.lastIndexOf(separator, focusOffset);
-    let softLineIndex = selectedBlockText.lastIndexOf('\n', focusOffset);
-    previousSeparator = softLineIndex >= previousSeparator ? softLineIndex : previousSeparator;
-
-    // get the index of the next separator after the focusOffset (ie after the current cirsor position)
-    let endOfTextIndex = 0;
-    const nextSeparator = selectedBlockText.indexOf(separator, focusOffset);
-    softLineIndex = selectedBlockText.indexOf('\n', focusOffset);
-
-    if (nextSeparator === -1 && softLineIndex === -1) {
-      // can not find separator nor soft line: this is the end of the string
-      endOfTextIndex = selectedBlockText.length;
-    } else if (nextSeparator === -1 && softLineIndex !== -1) {
-      // we are in a case where the text does not contains separator but the line ends by a soft return
-      endOfTextIndex = softLineIndex;
-    } else if (nextSeparator !== -1 && softLineIndex === -1) {
-      // no soft line, found separator
-      // keep next separator
-      endOfTextIndex = nextSeparator;
-    } else if (nextSeparator !== -1 && softLineIndex !== -1) {
-      // found separator and soft return, keep the one which has higher priority
-      endOfTextIndex = softLineIndex >= nextSeparator ? nextSeparator : softLineIndex;
-    }
-
-    const text = selectedBlockText.substring(
-      previousSeparator === -1 ? 0 : previousSeparator,
-      endOfTextIndex,
-    );
-
-    result = {
-      input: selectedBlockText,
-      text,
-      start: previousSeparator,
-      end: endOfTextIndex,
-      focusOffset: focusOffset,
-    };
-  }
-
-  return result;
-}
-
-export function getInsertRange(
-  editorState: EditorState,
-  firstCharacter: string,
-): { start: number; end: number } {
-  const selection = editorState.getSelection();
-  const content = editorState.getCurrentContent();
-  const anchorKey = selection.getAnchorKey();
-  const end = selection.getAnchorOffset();
-  const block = content.getBlockForKey(anchorKey);
-  const text = block.getText();
-  const start = text.substring(0, end).lastIndexOf(firstCharacter);
-
-  return {
-    start,
-    end,
-  };
-}
-
-export const getSelection = (root: Window = window): Selection | null => {
-  let selection: Selection | null = null;
-  if (root.getSelection) {
-    selection = root.getSelection();
-  } else if (root.document.getSelection) {
-    selection = root.document.getSelection();
-  }
-  return selection;
-};
-
-export function getSelectionRange(): Range | null {
-  const selection = getSelection();
-
-  if (!selection) {
-    return null;
-  }
-
-  if (selection?.rangeCount === 0) {
-    return null;
-  }
-
-  return selection?.getRangeAt(0);
-}
-
-export function getCaretCoordinates(): DOMRect | null {
-  const selection = getSelectionRange();
-
-  if (!selection) {
-    return null;
-  }
-
-  return selection.getBoundingClientRect();
-}
-
-export function insertText(text: string, editorState: EditorState): EditorState {
-  const selection = editorState.getSelection();
-  const cs = Modifier.insertText(editorState.getCurrentContent(), selection, text);
-  const newEditorState = EditorState.push(editorState, cs, 'insert-characters');
-
-  return newEditorState;
-}
-
-export function replaceText(text: string, editorState: EditorState): EditorState {
-  const selection = editorState.getSelection();
-  const cs = Modifier.replaceText(editorState.getCurrentContent(), selection, text);
-  const newEditorState = EditorState.push(editorState, cs, 'insert-characters');
-
-  return newEditorState;
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor.scss b/tdrive/frontend/src/app/components/rich-text-editor/editor.scss
deleted file mode 100644
index 60faa694..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.public-DraftEditorPlaceholder-inner {
-  color: var(--grey-dark);
-  position: absolute;
-  pointer-events: none;
-  overflow: hidden;
-  white-space: nowrap !important;
-  text-overflow: ellipsis;
-  max-width: 90%;
-}
-
-.editor {
-  .public-DraftStyleDefault-ol, .public-DraftStyleDefault-ul {
-    margin: 0px;
-  }
-}
-
-.public-DraftStyleDefault-pre {
-  margin-bottom: 0;
-}
-
-.public-DraftEditor-content {
-  // looks like contenteditable have some defaults from browser which are hard to harmonize around all the editor places...
-  overflow-wrap: anywhere !important;
-}
-
-.editor-hide-placeholder .public-DraftEditorPlaceholder-root {
-  display: none;
-}
-
-.editor-blockquote,
-blockquote {
-  background-color: var(--grey-background);
-  border-left: 3px solid var(--grey-dark);
-  padding-left: 5px;
-  margin-bottom: 5px;
-  margin-top: 5px;
-}
-
-.editor-code-block,
-code {
-  border-radius: 3px;
-  vertical-align: middle;
-  margin-bottom: 0;
-  color: #e6e1dc;
-  background: #232323;
-  font-family: monospace;
-  padding: 0 5px;
-  white-space: pre-wrap;
-  max-height: 400px;
-  overflow: auto;
-  box-sizing: border-box;
-  line-break: anywhere;
-}
-
-.scrollable-editor {
-  // While we do not have header and footer variables, sum is around 150px...
-  max-height: calc(60vh - 150px);
-  overflow-y: scroll;
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/editor.tsx b/tdrive/frontend/src/app/components/rich-text-editor/editor.tsx
deleted file mode 100644
index 1c2b2949..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/editor.tsx
+++ /dev/null
@@ -1,703 +0,0 @@
-/* eslint-disable no-control-regex */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
-import React, { createRef, KeyboardEvent } from 'react';
-import classNames from 'classnames';
-import Draft, {
-  Editor,
-  EditorState,
-  Modifier,
-  RichUtils,
-  DraftEditorCommand,
-  DraftHandleValue,
-  KeyBindingUtil,
-  ContentBlock,
-  DraftStyleMap,
-  SelectionState,
-} from 'draft-js';
-import { getSelectionEntity } from 'draftjs-utils';
-import EditorDataParser from './editor-data-parser';
-import RichTextEditorStateService from 'app/components/rich-text-editor/editor-state-service';
-import { SuggestionList } from './plugins/suggestion/suggestion-list';
-import {
-  getCaretCoordinates,
-  getCurrentBlock,
-  getTextToMatch,
-  insertText,
-  isMatching,
-  replaceText,
-  resetBlockWithType,
-  splitBlockWithType,
-} from './editor-utils';
-import { EditorSuggestionPlugin, SupportedSuggestionTypes, getPlugins } from './plugins';
-import './editor.scss';
-import { TextCountService } from 'app/components/rich-text-editor/text-count';
-import useOnScreen from 'app/features/global/hooks/use-on-screen';
-import Logger from 'app/features/global/framework/logger-service';
-import 'draft-js/dist/Draft.css';
-
-const { isSoftNewlineEvent } = KeyBindingUtil;
-
-export type EditorTextFormat = 'raw' | 'markdown';
-type SyntheticKeyboardEvent = KeyboardEvent<{}> & { code: string };
-
-type CurrentSuggestion<T> = {
-  /**
-   * The position of the caret the suggestion is linked to
-   */
-  position: DOMRect | null;
-  /**
-   * The text which has been searched for the current suggestion
-   */
-  searchText: string;
-  /**
-   * The items for the current suggestion
-   */
-  items: Array<T>;
-
-  /** Is the list loading content from backend */
-  loading: boolean;
-
-  /**
-   * unique id for the current suggestion results
-   */
-  id: string;
-};
-
-type EditorProps = {
-  editorState: EditorState;
-  plugins: Array<string>;
-  onSubmit?: (content: string, editorState?: EditorState) => void;
-  onChange?: (editorState: EditorState) => void;
-  onTab?: () => void;
-  onFilePaste?: (files: Blob[]) => void;
-  clearOnSubmit: boolean;
-  outputFormat: EditorTextFormat;
-  placeholder?: string;
-  onUpArrow?: (e: SyntheticKeyboardEvent) => void;
-  onSubmitBlocked?: (reason: string, details?: string) => void;
-};
-
-type EditorViewState = {
-  activeSuggestion: CurrentSuggestion<SupportedSuggestionTypes> | null;
-  suggestionType: string;
-  suggestionIndex: number;
-  displaySuggestion: boolean;
-  editorPosition: DOMRect | null;
-  isVisible: boolean;
-};
-
-// NOTE: dirty hack to not have to change the whole Editor component to a functional component
-// If one day Editor is a functional component, remove this one and use the on screen hook correctly
-// Since the editor can be used in an infinite scroll, this is not so easy to pass down the scrolling event without polluting everything...
-const OnScreenElement = (props: { onScreen: (status: boolean) => void }): JSX.Element => {
-  const ref = createRef<HTMLDivElement>();
-  props.onScreen(useOnScreen(ref));
-  return <div ref={ref} style={{ width: 0, height: 0 }}></div>;
-};
-
-export class EditorView extends React.Component<EditorProps, EditorViewState> {
-  outputFormat: EditorTextFormat;
-  editor!: Editor | null;
-  plugins: Map<EditorSuggestionPlugin<any>['resourceType'], EditorSuggestionPlugin<any>> =
-    new Map();
-  customStyleMap: DraftStyleMap;
-  editorDataParser: EditorDataParser;
-  returnFullTextForEntitiesTypes: Array<string>;
-  logger: Logger.Logger;
-
-  constructor(props: EditorProps) {
-    super(props);
-
-    getPlugins(this.props.plugins || []).forEach(p => this.enablePlugin(p));
-    this.outputFormat = this.props.outputFormat || 'markdown';
-    this.state = this.getInitialState();
-    this.customStyleMap = {
-      CODE: {
-        borderRadius: 3,
-        background: '#232323',
-        color: '#e6e1dc',
-        padding: '0 5px',
-        fontFamily: 'monospace',
-        paddingBottom: '1px',
-      },
-    };
-
-    this.logger = Logger.getLogger(`Apps/Components/RichTextEditor`);
-
-    this.returnFullTextForEntitiesTypes = Array.from(this.plugins.values())
-      .filter(plugin => plugin.returnFullTextForSuggestion)
-      .map(plugin => plugin.resourceType);
-    this.editorDataParser = RichTextEditorStateService.getDataParser(this.props.plugins);
-    this.onChange = this.onChange.bind(this);
-    this.keyBindingFn = this.keyBindingFn.bind(this);
-    this.handleKeyCommand = this.handleKeyCommand.bind(this);
-    this.handleReturn = this.handleReturn.bind(this);
-    this.handleBeforeInput = this.handleBeforeInput.bind(this);
-    this.onDownArrow = this.onDownArrow.bind(this);
-    this.onUpArrow = this.onUpArrow.bind(this);
-    this.onEscape = this.onEscape.bind(this);
-    this.onTab = this.onTab.bind(this);
-    this.handlePastedFiles = this.handlePastedFiles.bind(this);
-    this.handleBlockStyle = this.handleBlockStyle.bind(this);
-    this.shouldHidePlaceHolder = this.shouldHidePlaceHolder.bind(this);
-    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
-    this.focus = this.focus.bind(this);
-    this.updateVisible = this.updateVisible.bind(this);
-  }
-
-  //To fix https://github.com/facebook/draft-js/issues/1320#issuecomment-472776784
-  componentDidCatch(error: any, errorInfo: any) {
-    this.forceUpdate();
-    this.logger.log(error, errorInfo);
-  }
-
-  private enablePlugin(plugin: EditorSuggestionPlugin<any>): void {
-    this.plugins.set(plugin.resourceType, plugin);
-  }
-
-  private getInitialState(): EditorViewState {
-    return {
-      activeSuggestion: null,
-      suggestionIndex: 0,
-      suggestionType: '',
-      displaySuggestion: false,
-      editorPosition: null,
-      isVisible: true,
-    };
-  }
-
-  private resetState(callback?: () => void | undefined): void {
-    this.setState(this.getInitialState(), callback);
-  }
-
-  private resetStateAndFocus(): void {
-    this.resetState(() => {
-      requestAnimationFrame(() => this.focus());
-    });
-  }
-
-  private isDisplayingSuggestions(): boolean {
-    return this.state.displaySuggestion && !!this.state.activeSuggestion?.items.length;
-  }
-
-  handleKeyCommand(command: DraftEditorCommand, editorState: EditorState): DraftHandleValue {
-    const newState = RichUtils.handleKeyCommand(editorState, command);
-
-    if (newState) {
-      this.onChange(newState);
-      return 'handled';
-    }
-
-    return 'not-handled';
-  }
-
-  /**
-   * Handle return before a new block is added to the editor state
-   */
-  handleReturn(e: SyntheticKeyboardEvent, editorState: EditorState): DraftHandleValue {
-    // when displaying suggestion, enter will select the current one
-    if (this.isDisplayingSuggestions()) {
-      const result = this.onSuggestionSelected(
-        this.state.activeSuggestion?.items[this.state.suggestionIndex],
-      );
-
-      if (result) {
-        return 'handled';
-      }
-    }
-
-    if (!e.altKey && !e.metaKey && !e.ctrlKey) {
-      const selection = editorState.getSelection();
-      const currentBlock = getCurrentBlock(editorState);
-      const blockType = currentBlock.getType();
-
-      // When on a list,  if the current block length is 0 while pressing Shift+Enter 2 times will
-      // add a new unstyled block otherwise, we split the block with the current style type
-      // Pressing Enter will submit the message
-      if (['unordered-list-item', 'ordered-list-item'].includes(blockType)) {
-        if (e.shiftKey) {
-          this.onChange(
-            currentBlock.getText().length === 0
-              ? resetBlockWithType(editorState, 'unstyled')
-              : splitBlockWithType(editorState, blockType, selection.getStartOffset(), false),
-          );
-        } else {
-          this.submit(editorState);
-        }
-        return 'handled';
-      }
-
-      // Shift+Enter adds a soft new line
-      if (this._handleReturnSoftNewline(e, editorState)) {
-        return 'handled';
-      }
-
-      if (selection.isCollapsed()) {
-        if (['unstyled', 'code-block', 'blockquote'].includes(blockType)) {
-          this.submit(editorState);
-          return 'handled';
-        }
-      }
-    }
-    return 'not-handled';
-  }
-
-  submit(editorState: EditorState): boolean {
-    if (TextCountService.getStats(editorState).isTooLong) {
-      this.props.onSubmitBlocked && this.props.onSubmitBlocked('toolong');
-      return false;
-    }
-
-    this.props.onSubmit &&
-      this.props.onSubmit(this.editorDataParser.toString(editorState, this.outputFormat));
-    if (this.props.clearOnSubmit) {
-      this.resetStateAndFocus();
-    }
-
-    return true;
-  }
-
-  /**
-   * Handle shift + enter
-   *
-   * @param e
-   * @param editorState
-   * @returns
-   */
-  _handleReturnSoftNewline(e: SyntheticKeyboardEvent, editorState: EditorState): boolean {
-    if (isSoftNewlineEvent(e)) {
-      const selection = editorState.getSelection();
-      const currentBlock = getCurrentBlock(editorState);
-
-      if (selection.isCollapsed()) {
-        if (['blockquote', 'code-block'].includes(currentBlock.getType())) {
-          this.onChange(RichUtils.insertSoftNewline(editorState));
-        } else {
-          this.onChange(
-            splitBlockWithType(editorState, 'unstyled', selection.getStartOffset(), false),
-          );
-        }
-      } else {
-        const content = editorState.getCurrentContent();
-        let newContent = Modifier.removeRange(content, selection, 'forward');
-        const newSelection = newContent.getSelectionAfter();
-        const block = newContent.getBlockForKey(newSelection.getStartKey());
-        newContent = Modifier.insertText(
-          newContent,
-          newSelection,
-          '\n',
-          block.getInlineStyleAt(newSelection.getStartOffset()),
-        );
-        this.onChange(EditorState.push(editorState, newContent, 'insert-fragment'));
-      }
-      return true;
-    }
-    return false;
-  }
-
-  focus() {
-    this.editor?.focus();
-  }
-
-  onChange(editorState: EditorState) {
-    this.props.onChange && this.props.onChange(editorState);
-    setTimeout(() => {
-      this.updateSuggestionsState();
-    });
-  }
-
-  keyBindingFn(e: any) {
-    return Draft.getDefaultKeyBinding(e);
-  }
-
-  updateSuggestionsState(): void {
-    const currentEntityKey = getSelectionEntity(this.props.editorState);
-    const currentEntityType =
-      currentEntityKey &&
-      this.props.editorState.getCurrentContent().getEntity(currentEntityKey).getType();
-
-    const searchMatch = getTextToMatch(
-      this.props.editorState,
-      ' ',
-      this.returnFullTextForEntitiesTypes,
-    );
-    if (!searchMatch || !searchMatch.text) {
-      return;
-    }
-
-    const triggered = Array.from(this.plugins.values()).some(plugin => {
-      // skip suggestion when current entity type is defined to be skipped
-      // for example, when in a mention entity, we do not want to show suggestion from text
-      // just because
-      // 1. A mention has been searched from `@doe`
-      // 2. It has been selected by the user and is now displayed as `@John Doe` in the editor
-      // 3. Moving cursor in the entity `@John Doe` of type `MENTION` will return a textToMatch = `@John Doe` (which is different from the first search)
-      // If not handled, it can lead to unpredictable state, where we can suggest other things than expected and also other suggestion types...
-      if (currentEntityType && (plugin.skipSuggestionForTypes || []).includes(currentEntityType)) {
-        return false;
-      }
-
-      const trigger = isMatching(plugin.trigger, searchMatch.text);
-
-      if (trigger && trigger.text) {
-        plugin.resolver(trigger.text, ({ items, loading }) => {
-          const position = getCaretCoordinates();
-          const activeSuggestion = {
-            position,
-            searchText: trigger.text,
-            items,
-            loading: loading || false,
-            // unicity is for a given position and a given start index in the search terms
-            id: `y=${position?.y},index=${searchMatch.start}`,
-          };
-          this.setState({
-            activeSuggestion,
-            suggestionType: plugin.resourceType,
-            suggestionIndex: 0,
-          });
-        });
-        return true;
-      }
-
-      return false;
-    });
-
-    if (triggered) {
-      this.setState({ displaySuggestion: true });
-    } else {
-      this.resetState();
-    }
-  }
-
-  onSuggestionSelected(suggestion: SupportedSuggestionTypes | undefined): boolean {
-    if (!suggestion) {
-      return false;
-    }
-
-    const type = this.state.suggestionType;
-    const plugin = this.plugins.get(type);
-    if (!plugin) {
-      return false;
-    }
-
-    if (!plugin.onSelected) {
-      return false;
-    }
-
-    const editorState = plugin.onSelected(suggestion, this.props.editorState);
-    this.resetStateAndFocus();
-    this.onChange(editorState);
-
-    return true;
-  }
-
-  renderSuggestion(props: any, type: string): JSX.Element {
-    const plugin = this.plugins.get(type);
-
-    if (!plugin) {
-      return <></>;
-    }
-
-    if (!plugin.renderSuggestion) {
-      return <></>;
-    }
-
-    return plugin.renderSuggestion(props);
-  }
-
-  insertCommand(type: string, data: SupportedSuggestionTypes): void {
-    const plugin = this.plugins.get(type);
-
-    if (!plugin || !plugin.insert) {
-      return;
-    }
-
-    this.onChange(plugin.insert(data, this.props.editorState));
-    this.resetStateAndFocus();
-  }
-
-  onDownArrow(e: SyntheticKeyboardEvent): void {
-    if (this.isDisplayingSuggestions()) {
-      e.preventDefault();
-      this.setState({
-        suggestionIndex: this.state.suggestionIndex - 1 < 0 ? 0 : this.state.suggestionIndex - 1,
-      });
-    } else {
-      const currentBlock = getCurrentBlock(this.props.editorState);
-      const selection = this.props.editorState.getSelection();
-
-      if (
-        ['blockquote', 'code-block'].includes(currentBlock.getType()) &&
-        currentBlock.getLength() === selection.getStartOffset()
-      ) {
-        // if current block is code or quote, we can create a new block after it if there are no block
-        const nextBlock = this.props.editorState
-          .getCurrentContent()
-          .getBlockAfter(currentBlock.getKey());
-
-        if (nextBlock) {
-          const selection = new SelectionState({
-            anchorKey: nextBlock.getKey(),
-            anchorOffset: 0,
-            focusKey: nextBlock.getKey(),
-            focusOffset: 0,
-          });
-          this.onChange(EditorState.forceSelection(this.props.editorState, selection));
-        } else {
-          this.onChange(
-            splitBlockWithType(
-              this.props.editorState,
-              'unstyled',
-              selection.getStartOffset(),
-              false,
-            ),
-          );
-        }
-      }
-    }
-  }
-
-  onUpArrow(e: SyntheticKeyboardEvent): void {
-    if (this.isDisplayingSuggestions()) {
-      e.preventDefault();
-      const suggestionsLength = this.state.activeSuggestion?.items.length || 0;
-      const suggestionIndex =
-        this.state.suggestionIndex === suggestionsLength - 1
-          ? suggestionsLength - 1
-          : this.state.suggestionIndex + 1;
-      this.setState({ suggestionIndex });
-    }
-    this.props.onUpArrow && this.props.onUpArrow(e);
-  }
-
-  onEscape(e: SyntheticKeyboardEvent): void {
-    if (this.isDisplayingSuggestions()) {
-      e.preventDefault();
-      this.resetStateAndFocus();
-    }
-  }
-
-  onTab(e: SyntheticKeyboardEvent): void {
-    e.preventDefault();
-
-    this.changeIndent(e, e.shiftKey ? 'decrease' : 'increase');
-
-    if (this.isDisplayingSuggestions()) {
-      const result = this.onSuggestionSelected(
-        this.state.activeSuggestion?.items[this.state.suggestionIndex],
-      );
-
-      if (result) {
-        this.resetStateAndFocus();
-      }
-    }
-
-    this.props.onTab && this.props.onTab();
-  }
-
-  changeIndent = (e: SyntheticKeyboardEvent, indentDirection: 'increase' | 'decrease') => {
-    const currentBlockType = RichUtils.getCurrentBlockType(this.props.editorState);
-    const tabChar = '\u2003';
-    const isBlockListType =
-      currentBlockType === 'ordered-list-item' || currentBlockType === 'unordered-list-item';
-    const maxDepth = 4;
-
-    if (!isBlockListType) {
-      if (indentDirection === 'increase') {
-        this.onChange(insertText(tabChar, this.props.editorState));
-      }
-
-      if (indentDirection === 'decrease') {
-        // FIX ME find a way to decrease unstyled/code-block block indentation
-        this.onChange(replaceText('', this.props.editorState));
-      }
-    } else {
-      this.onChange(RichUtils.onTab(e, this.props.editorState, maxDepth));
-    }
-  };
-
-  handlePastedFiles(files: Blob[]): DraftHandleValue {
-    if (this.props.onFilePaste) {
-      this.props.onFilePaste(files);
-      return 'handled';
-    }
-
-    return 'not-handled';
-  }
-
-  handleBeforeInput(inputString: string, editorState: EditorState): DraftHandleValue {
-    const mapping: { [index: string]: string } = {
-      '*.': 'unordered-list-item',
-      '* ': 'unordered-list-item',
-      '- ': 'unordered-list-item',
-      '1.': 'ordered-list-item',
-    };
-
-    const selection = editorState.getSelection();
-    const block = getCurrentBlock(editorState);
-    const currentBlockType = block.getType();
-    const blockLength = block.getLength();
-    const blockText = block.getText();
-    const regex = new RegExp('\r|\n', 'gm');
-
-    if (currentBlockType.indexOf('atomic') === 0) {
-      return 'not-handled';
-    }
-
-    let textToMatch = '';
-    let resetBlock = false;
-    let insertIndex = 0;
-
-    if (selection.getAnchorOffset() === 1 && blockLength === 1) {
-      // first line of the block, reset block with new one
-      resetBlock = true;
-      textToMatch = blockText[0] + inputString;
-    } else {
-      // check if we are at a new line
-      const matches = [...blockText.matchAll(regex)];
-
-      if (matches.length) {
-        const lastMatch = matches[matches.length - 1];
-        if (lastMatch) {
-          insertIndex = (lastMatch.index ? lastMatch.index : 0) + 1;
-          const afterLastSoftLine = blockText.substring(insertIndex, blockText.length);
-          textToMatch = `${afterLastSoftLine}${inputString}`;
-        }
-      }
-    }
-
-    if (textToMatch === '') {
-      return 'not-handled';
-    }
-
-    const blockTo = mapping[textToMatch];
-
-    if (!blockTo) {
-      return 'not-handled';
-    }
-
-    const finalType = blockTo.split(':');
-
-    if (finalType.length < 1 || finalType.length > 3) {
-      return 'not-handled';
-    }
-
-    let mappingBlockType = finalType[0];
-
-    if (finalType.length === 1) {
-      if (currentBlockType === finalType[0]) {
-        return 'not-handled';
-      }
-    } else if (finalType.length === 2) {
-      if (currentBlockType === finalType[1]) {
-        return 'not-handled';
-      }
-      if (currentBlockType === finalType[0]) {
-        mappingBlockType = finalType[1];
-      }
-    } else if (finalType.length === 3) {
-      if (currentBlockType === finalType[2]) {
-        return 'not-handled';
-      }
-      if (currentBlockType === finalType[0]) {
-        mappingBlockType = finalType[1];
-      } else {
-        mappingBlockType = finalType[2];
-      }
-    }
-
-    if (resetBlock) {
-      this.onChange(resetBlockWithType(editorState, mappingBlockType, ''));
-    } else {
-      this.onChange(splitBlockWithType(editorState, mappingBlockType, insertIndex, true));
-    }
-
-    return 'handled';
-  }
-
-  handleBlockStyle(contentBlock: ContentBlock): string {
-    const type = contentBlock.getType();
-
-    if (type === 'blockquote') {
-      return 'editor-blockquote';
-    }
-
-    if (type === 'code-block') {
-      return 'editor-code-block';
-    }
-
-    return '';
-  }
-
-  shouldHidePlaceHolder(): boolean {
-    const contentState = this.props.editorState.getCurrentContent();
-
-    return !contentState.hasText() && contentState.getBlockMap().first().getType() !== 'unstyled';
-  }
-
-  shouldScroll() {
-    // TODO: rule to be defined
-    return true;
-  }
-
-  updateVisible(visible: boolean) {
-    this.setState(previousState => {
-      return previousState.isVisible !== visible ? { isVisible: visible } : null;
-    });
-  }
-
-  handlePastedText(text: string, _html: string, editorState: EditorState) {
-    this.onChange(replaceText(text, editorState));
-    return text ? 'handled' : 'not-handled';
-  }
-
-  render() {
-    return (
-      <>
-        <OnScreenElement onScreen={this.updateVisible} />
-        <div
-          className={classNames('bg-zinc-50 border border-zinc-200 rounded-lg py-1 px-3 editor', {
-            'scrollable-editor': this.shouldScroll(),
-            'editor-hide-placeholder': this.shouldHidePlaceHolder(),
-          })}
-          onClick={this.focus}
-        >
-          <Editor
-            ref={node => (this.editor = node)}
-            editorState={this.props.editorState}
-            onChange={this.onChange}
-            keyBindingFn={this.keyBindingFn}
-            handleKeyCommand={this.handleKeyCommand}
-            handleReturn={this.handleReturn}
-            handlePastedText={this.handlePastedText}
-            handleBeforeInput={this.handleBeforeInput}
-            onDownArrow={this.onDownArrow}
-            onUpArrow={this.onUpArrow}
-            onEscape={this.onEscape}
-            onTab={this.onTab}
-            handlePastedFiles={this.handlePastedFiles}
-            blockStyleFn={this.handleBlockStyle}
-            customStyleMap={this.customStyleMap}
-            placeholder={this.props.placeholder || ''}
-            spellCheck={true}
-          />
-        </div>
-        {this.state.isVisible && this.state.displaySuggestion && this.state.suggestionType && (
-          <SuggestionList<any>
-            suggestionType={this.state.suggestionType}
-            id={this.state.activeSuggestion?.id || ''}
-            search={this.state.activeSuggestion?.searchText || ''}
-            list={this.state.activeSuggestion?.items}
-            loading={this.state.activeSuggestion?.loading || false}
-            position={this.state.activeSuggestion ? this.state.activeSuggestion.position : null}
-            editorPosition={(this.editor as any)?.editorContainer?.getBoundingClientRect()}
-            renderItem={(props: any) => this.renderSuggestion(props, this.state.suggestionType)}
-            onSelected={this.onSuggestionSelected}
-            selectedIndex={this.state.suggestionIndex}
-          />
-        )}
-      </>
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/emojis-service.js b/tdrive/frontend/src/app/components/rich-text-editor/emojis-service.js
deleted file mode 100755
index 8bf3f4d0..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/emojis-service.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import emojis_json from 'emojione/emoji.json';
-
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import { emojiIndex } from 'emoji-mart';
-
-class Emojis {
-  constructor() {
-    this.emojisList = [];
-    this.searcheableEmojis = {}; //Keyword to emojis list object
-    this.emojisByCode = {};
-    this.emojisByAscii = {};
-    this.emojisByCateg = {};
-    this.emojisReduced = {};
-    this.emojisByCategByBloc = {};
-    this.emojisBlocs = [];
-    Globals.window.emojiservice = this;
-    this.init();
-  }
-
-  getEmoticon(shortname) {
-    if (shortname[0] === ':') {
-      return { shortname: shortname, id: shortname };
-    }
-    return this.emojisByAscii[shortname];
-  }
-
-  createEmojisFromStrategy() {
-    this.emojisList = []; //List of emojis
-    this.searcheableEmojis = {}; //Keyword to emojis list object
-    this.emojisByCode = {}; //Emoji by shortname
-    this.emojisByAscii = {}; //Emoji by ascii
-    this.emojisByCateg = {}; //Emojis by category
-    this.emojisReduced = {}; //Emojis alternative (tones) are grouped with original emoji
-
-    Object.keys(emojis_json).forEach(emoji_id => {
-      var emoji = emojis_json[emoji_id];
-
-      //Keep only displayable emojis
-      if (emoji.display === 1) {
-        emoji.id = emoji.shortname;
-
-        //Add emojis by category
-        if (!this.emojisByCateg[emoji.category]) this.emojisByCateg[emoji.category] = [];
-        this.emojisByCateg[emoji.category].push(emoji);
-
-        if (!emoji.diversity) {
-          if (!this.emojisReduced[emoji_id]) this.emojisReduced[emoji_id] = {};
-          this.emojisReduced[emoji_id]['default'] = emoji;
-          emoji.diversities.forEach(alternate_id => {
-            var alternate_emoji = emojis_json[alternate_id];
-            this.emojisReduced[emoji_id][alternate_emoji.diversity] = alternate_emoji;
-          });
-        }
-      }
-    });
-
-    Object.keys(this.emojisReduced).forEach(emoji_id => {
-      //Get original emoji
-      var emoji = this.emojisReduced[emoji_id]['default'];
-
-      this.emojisList.push(emoji);
-
-      //Add emojis to keyword object
-      var keywords =
-        emoji.keywords.join(' ') +
-        ' ' +
-        emoji.name +
-        ' ' +
-        emoji.shortname.substr(1, emoji.shortname.length - 2);
-      emoji.shortname_alternates.forEach(shortname => {
-        keywords += ' ' + shortname.substr(1, shortname.length - 2);
-      });
-      keywords = keywords.split(' ').map(keyword => keyword.trim().toLocaleLowerCase());
-      keywords.forEach(keyword => {
-        //Add default emoji + all diversities
-        if (!this.searcheableEmojis[keyword]) this.searcheableEmojis[keyword] = [];
-        this.searcheableEmojis[keyword] = this.searcheableEmojis[keyword].concat(
-          Object.keys(this.emojisReduced[emoji_id]).map(key => this.emojisReduced[emoji_id][key]),
-        );
-      });
-    });
-
-    return;
-  }
-
-  emojiListToBloc(emojisList) {
-    var emojisBlocs = [];
-    var emojisByCategByBloc = {};
-    var bloc_by_category = {};
-    emojisList
-      .sort((a, b) => a.order - b.order)
-      .forEach(emoji => {
-        var category = emoji.category;
-        if (!bloc_by_category[category]) {
-          bloc_by_category[category] = 0;
-        }
-        var bloc = bloc_by_category[category];
-
-        if (!emojisByCategByBloc[category]) {
-          emojisByCategByBloc[category] = [];
-        }
-        if (!emojisByCategByBloc[category][bloc]) {
-          emojisByCategByBloc[category].push([]);
-        }
-        emojisByCategByBloc[category][bloc].push(emoji);
-        if (emojisByCategByBloc[category][bloc].length === 6) {
-          bloc_by_category[category]++;
-        }
-      });
-    Object.keys(emojisByCategByBloc).forEach(category => {
-      emojisBlocs.push({ type: 'category', value: category });
-      emojisBlocs = emojisBlocs.concat(emojisByCategByBloc[category]);
-    });
-
-    return [emojisBlocs, emojisByCategByBloc];
-  }
-
-  init() {
-    this.createEmojisFromStrategy();
-    var tmp = this.emojiListToBloc(this.emojisList);
-    this.emojisBlocs = tmp[0];
-    this.emojisByCategByBloc = tmp[1];
-  }
-
-  search(start_with, callback) {
-    callback && callback(emojiIndex.search(start_with));
-  }
-
-  getByAscii(ascii) {
-    return this.emojisByAscii[ascii];
-  }
-
-  getByCode(code) {
-    return this.emojisByCode[code];
-  }
-}
-
-const emojis = new Emojis();
-export default emojis;
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/index.ts
deleted file mode 100644
index b0404f99..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./editor";
-export * from "./editor-toolbar";
-export * from "./editor-state-service";
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/markdown/README.md b/tdrive/frontend/src/app/components/rich-text-editor/markdown/README.md
deleted file mode 100644
index 63492be6..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/markdown/README.md
+++ /dev/null
@@ -1 +0,0 @@
-This is a temporary folder, waiting for https://github.com/Rosey/markdown-draft-js/pull/160 to be merged so this folder can be removed.
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/markdown/draft-to-markdown.js b/tdrive/frontend/src/app/components/rich-text-editor/markdown/draft-to-markdown.js
deleted file mode 100644
index 01f55670..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/markdown/draft-to-markdown.js
+++ /dev/null
@@ -1,510 +0,0 @@
-/* eslint-disable */
-const TRAILING_WHITESPACE = /[ \u0020\t\n]*$/;
-
-// This escapes some markdown but there's a few cases that are TODO -
-// - List items
-// - Back tics  (see https://github.com/Rosey/markdown-draft-js/issues/52#issuecomment-388458017)
-// - Complex markdown, like links or images. Not sure it's even worth it, because if you're typing
-// that into draft chances are you know its markdown and maybe expect it convert? :/
-const MARKDOWN_STYLE_CHARACTERS = ['*', '_', '~', '`'];
-const MARKDOWN_STYLE_CHARACTER_REGXP = /(\*|_|~|\\|`)/g;
-
-// I hate this a bit, being outside of the function’s scope
-// but can’t think of a better way to keep track of how many ordered list
-// items were are on, as draft doesn’t explicitly tell us in the raw object 😢.
-// This is a hash that will be assigned values based on depth, so like
-// orderedListNumber[0] = 1 would mean that ordered list at depth 0 is on number 1.
-// orderedListNumber[0] = 2 would mean that ordered list at depth 0 is on number 2.
-// This is so we have the right number of numbers when doing a list, eg
-// 1. Item One
-// 2. Item two
-// 3. Item three
-// And so on.
-var orderedListNumber = {},
-    previousOrderedListDepth = 0;
-
-// A map of draftjs block types -> markdown open and close characters
-// Both the open and close methods must exist, even if they simply return an empty string.
-// They should always return a string.
-const StyleItems = {
-  // BLOCK LEVEL
-  'unordered-list-item': {
-    open: function () {
-      return '- ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'ordered-list-item': {
-    open: function (block, number = 1) {
-      return `${number}. `;
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'blockquote': {
-    open: function () {
-      return '> ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'header-one': {
-    open: function () {
-      return '# ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'header-two': {
-    open: function () {
-      return '## ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'header-three': {
-    open: function () {
-      return '### ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'header-four': {
-    open: function () {
-      return '#### ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'header-five': {
-    open: function () {
-      return '##### ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'header-six': {
-    open: function () {
-      return '###### ';
-    },
-
-    close: function () {
-      return '';
-    }
-  },
-
-  'code-block': {
-    open: function (block) {
-      return '```' + (block.data.language || '') + '\n';
-    },
-
-    close: function () {
-      return '\n```';
-    }
-  },
-
-  // INLINE LEVEL
-  'BOLD': {
-    open: function () {
-      return '**';
-    },
-
-    close: function () {
-      return '**';
-    }
-  },
-
-  'ITALIC': {
-    open: function () {
-      return '_';
-    },
-
-    close: function () {
-      return '_';
-    }
-  },
-
-  'STRIKETHROUGH': {
-    open: function () {
-      return '~~';
-    },
-
-    close: function () {
-      return '~~';
-    }
-  },
-
-  'CODE': {
-    open: function () {
-      return '`';
-    },
-
-    close: function () {
-      return '`';
-    }
-  }
-};
-
-// A map of draftjs entity types -> markdown open and close characters
-// entities are different from block types because they have additional data attached to them.
-// an entity object is passed in to both open and close, in case it's needed for string generation.
-//
-// Both the open and close methods must exist, even if they simply return an empty string.
-// They should always return a string.
-const EntityItems = {
-  'LINK': {
-    open: function (entity) {
-      return '[';
-    },
-
-    close: function (entity) {
-      return `](${entity.data.url || entity.data.href})`;
-    }
-  }
-}
-
-// Bit of a hack - we normally want a double newline after a block,
-// but for list items we just want one (unless it's the _last_ list item in a group.)
-const SingleNewlineAfterBlock = [
-  'unordered-list-item',
-  'ordered-list-item'
-];
-
-function isEmptyBlock(block) {
-  return block.text.length === 0 && block.entityRanges.length === 0 && Object.keys(block.data || {}).length === 0;
-}
-
-/**
- * Generate markdown for a single block javascript object
- * DraftJS raw object contains an array of blocks, which is the main "structure"
- * of the text. Each block = a new line.
- *
- * @param {Object} block - block to generate markdown for
- * @param {Number} index - index of the block in the blocks array
- * @param {Object} rawDraftObject - entire raw draft object (needed for accessing the entityMap)
- * @param {Object} options - additional options passed in by the user calling this method.
- *
- * @return {String} markdown string
-**/
-function renderBlock(block, index, rawDraftObject, options) {
-  var openInlineStyles = [],
-      markdownToAdd = [];
-  var markdownString = '',
-      customStyleItems = options.styleItems || {},
-      customEntityItems = options.entityItems || {},
-      escapeMarkdownCharacters = options.hasOwnProperty('escapeMarkdownCharacters') ? options.escapeMarkdownCharacters : true;
-
-  var type = block.type;
-
-  var markdownStyleCharactersToEscape = [];
-
-  // draft-js emits empty blocks that have type set… don’t style them unless the user wants to preserve new lines
-  // (if newlines are preserved each empty line should be "styled" eg in case of blockquote we want to see a blockquote.)
-  // but if newlines aren’t preserved then we'd end up having double or triple or etc markdown characters, which is a bug.
-  if (isEmptyBlock(block) && !options.preserveNewlines) {
-    type = 'unstyled';
-  }
-
-  // Render main block wrapping element
-  if (customStyleItems[type] || StyleItems[type]) {
-    if (type === 'unordered-list-item' || type === 'ordered-list-item') {
-      markdownString += ' '.repeat(block.depth * 4);
-    }
-
-    if (type === 'ordered-list-item') {
-      orderedListNumber[block.depth] = orderedListNumber[block.depth] || 1;
-      markdownString += (customStyleItems[type] || StyleItems[type]).open(block, orderedListNumber[block.depth]);
-      orderedListNumber[block.depth]++;
-
-      // Have to reset the number for orderedListNumber if we are breaking out of a list so that if
-      // there's another nested list at the same level further down, it starts at 1 again.
-      // COMPLICATED 😭
-      if (previousOrderedListDepth > block.depth) {
-        orderedListNumber[previousOrderedListDepth] = 1;
-      }
-
-      previousOrderedListDepth = block.depth;
-    } else {
-      orderedListNumber = {};
-      markdownString += (customStyleItems[type] || StyleItems[type]).open(block);
-    }
-  } else {
-    orderedListNumber = {};
-  }
-
-  // A stack to keep track of open tags
-  var openTags = [];
-
-  function openTag(tag) {
-    openTags.push(tag);
-
-    if (tag.style) {
-      // Open inline tag
-
-      if (customStyleItems[tag.style] || StyleItems[tag.style]) {
-        var styleToAdd = (
-          customStyleItems[tag.style] || StyleItems[tag.style]
-        ).open();
-        markdownToAdd.push({
-          type: 'style',
-          style: tag,
-          value: styleToAdd
-        });
-      }
-    } else {
-      // Open entity tag
-
-      var entity = rawDraftObject.entityMap[tag.key];
-      if (customEntityItems[entity.type] || EntityItems[entity.type]) {
-        var entityToAdd = (
-          customEntityItems[entity.type] || EntityItems[entity.type]
-        ).open(entity, block);
-        markdownToAdd.push({
-          type: 'entity',
-          value: entityToAdd
-        });
-      }
-    }
-  }
-
-  function closeTag(tag) {
-    const popped = openTags.pop();
-    if (tag !== popped) {
-      throw new Error(
-        'Invariant violation: Cannot close a tag before all inner tags have been closed'
-      );
-    }
-
-    if (tag.style) {
-      // Close inline tag
-
-      if (customStyleItems[tag.style] || StyleItems[tag.style]) {
-        // Have to trim whitespace first and then re-add after because markdown can't handle leading/trailing whitespace
-        var trailingWhitespace = TRAILING_WHITESPACE.exec(markdownString);
-        markdownString = markdownString.slice(
-          0,
-          markdownString.length - trailingWhitespace[0].length
-        );
-
-        markdownString += (
-          customStyleItems[tag.style] || StyleItems[tag.style]
-        ).close();
-        markdownString += trailingWhitespace[0];
-      }
-    } else {
-      // Close entity tag
-
-      var entity = rawDraftObject.entityMap[tag.key];
-      if (customEntityItems[entity.type] || EntityItems[entity.type]) {
-        markdownString += (
-          customEntityItems[entity.type] || EntityItems[entity.type]
-        ).close(entity, block);
-      }
-    }
-  }
-
-  const compareTagsLastCloseFirst = (a, b) =>
-    b.offset + b.length - (a.offset + a.length);
-
-  // reverse array without mutating the original
-  const reverse = (array) => array.concat().reverse();
-
-  // Render text within content, along with any inline styles/entities
-  Array.from(block.text).some(function (character, characterIndex) {
-    // Close any tags that need closing, starting from top of the stack
-    reverse(openTags).forEach(function (tag) {
-      if (tag.offset + tag.length === characterIndex) {
-        // Take all tags stacked on top of the current one, meaning they opened after it.
-        // Since they have not been popped, they'll close only later. So we need to split them.
-        var tagsToSplit = openTags.slice(openTags.indexOf(tag) + 1);
-
-        // Close in reverse order as they were opened
-        reverse(tagsToSplit).forEach(closeTag);
-
-        // Now we can close the current tag
-        closeTag(tag);
-
-        // Reopen split tags, ordered so that tags that close last open first
-        tagsToSplit.sort(compareTagsLastCloseFirst).forEach(openTag);
-      }
-    });
-
-    // Open any tags that need opening, using the correct nesting order.
-    var inlineTagsToOpen = block.inlineStyleRanges.filter(
-      (tag) => tag.offset === characterIndex
-    );
-    var entityTagsToOpen = block.entityRanges.filter(
-      (tag) => tag.offset === characterIndex
-    );
-    inlineTagsToOpen
-      .concat(entityTagsToOpen)
-      .sort(compareTagsLastCloseFirst)
-      .forEach(openTag);
-
-    // These are all the opening entity and style types being added to the markdown string for this loop
-    // we store in an array and add here because if the character is WS character, we want to hang onto it and not apply it until the next non-whitespace
-    // character before adding the markdown, since markdown doesn’t play nice with leading whitespace (eg '** bold**' is no  good, whereas ' **bold**' is good.)
-    if (character !== ' ' && markdownToAdd.length) {
-      markdownString += markdownToAdd.map(function (item) {
-        return item.value;
-      }).join('');
-
-      markdownToAdd = [];
-    }
-
-    if (block.type !== 'code-block' && escapeMarkdownCharacters) {
-      let insideInlineCodeStyle = openTags.find((style) => style.style === 'CODE');
-
-      if (insideInlineCodeStyle) {
-        // Todo - The syntax to escape backtics when inside backtic code already is to use MORE backtics wrapping.
-        // So we need to see how many backtics in a row we have and then when converting to markdown, use that # + 1
-
-        // EG  ``Test ` Hllo ``
-        // OR   ```Test `` Hello```
-        // OR ````Test ``` Hello ````
-        // Similar work has to be done for codeblocks.
-      } else {
-        // Special escape logic for blockquotes and heading characters
-        if (characterIndex === 0 && character === '#' && block.text[1] && block.text[1] === ' ') {
-          character = character.replace('#', '\\#');
-        } else if (characterIndex === 0 && character === '>') {
-          character = character.replace('>', '\\>');
-        }
-
-        // Escaping inline markdown characters
-        // 🧹 If someone can think of a more elegant solution, I would love that.
-        // orginally this was just a little char replace using a simple regular expression, but there’s lots of cases where
-        // a markdown character does not actually get converted to markdown, like this case: http://google.com/i_am_a_link
-        // so this code now tries to be smart and keeps track of potential “opening” characters as well as potential “closing”
-        // characters, and only escapes if both opening and closing exist, and they have the correct whitepace-before-open, whitespace-or-end-of-string-after-close pattern
-        if (MARKDOWN_STYLE_CHARACTERS.includes(character)) {
-          let openingStyle = markdownStyleCharactersToEscape.find(function (item) {
-            return item.character === character;
-          });
-
-          if (!openingStyle && block.text[characterIndex - 1] === ' ' && block.text[characterIndex + 1] !== ' ') {
-            markdownStyleCharactersToEscape.push({
-              character: character,
-              index: characterIndex,
-              markdownStringIndexStart: markdownString.length + character.length - 1,
-              markdownStringIndexEnd: markdownString.length + character.length
-            });
-          } else if (openingStyle && block.text[characterIndex - 1] === character && characterIndex === openingStyle.index + 1) {
-            openingStyle.markdownStringIndexEnd += 1;
-          } else if (openingStyle) {
-            let openingStyleLength = openingStyle.markdownStringIndexEnd - openingStyle.markdownStringIndexStart;
-            let escapeCharacter = false;
-            let popOpeningStyle = false;
-            if (openingStyleLength === 1 && (block.text[characterIndex + 1] === ' ' || !block.text[characterIndex + 1])) {
-              popOpeningStyle = true;
-              escapeCharacter = true;
-            }
-
-            if (openingStyleLength === 2 && block.text[characterIndex + 1] === character) {
-              escapeCharacter = true;
-            }
-
-            if (openingStyleLength === 2 && block.text[characterIndex - 1] === character && (block.text[characterIndex + 1] === ' ' || !block.text[characterIndex + 1])) {
-              popOpeningStyle = true;
-              escapeCharacter = true;
-            }
-
-            if (popOpeningStyle) {
-              markdownStyleCharactersToEscape.splice(markdownStyleCharactersToEscape.indexOf(openingStyle), 1);
-              let replacementString = markdownString.slice(openingStyle.markdownStringIndexStart, openingStyle.markdownStringIndexEnd);
-              replacementString = replacementString.replace(MARKDOWN_STYLE_CHARACTER_REGXP, '\\$1');
-              markdownString = (markdownString.slice(0, openingStyle.markdownStringIndexStart) + replacementString + markdownString.slice(openingStyle.markdownStringIndexEnd));
-            }
-
-            if (escapeCharacter) {
-              character = `\\${character}`;
-            }
-          }
-        }
-      }
-    }
-
-    if (character === '\n' && type === 'blockquote') {
-      markdownString += '\n> ';
-    } else {
-      markdownString += character;
-    }
-  });
-
-  // Finally, close all remaining open tags
-  reverse(openTags).forEach(closeTag);
-
-  // Close block level item
-  if (customStyleItems[type] || StyleItems[type]) {
-    markdownString += (customStyleItems[type] || StyleItems[type]).close(block);
-  }
-
-  // Determine how many newlines to add - generally we want 2, but for list items we just want one when they are succeeded by another list item.
-  if (SingleNewlineAfterBlock.indexOf(type) !== -1 && rawDraftObject.blocks[index + 1] && SingleNewlineAfterBlock.indexOf(rawDraftObject.blocks[index + 1].type) !== -1) {
-    markdownString += '\n';
-  } else if (rawDraftObject.blocks[index + 1]) {
-    if (rawDraftObject.blocks[index].text) {
-      if (SingleNewlineAfterBlock.indexOf(type) !== -1
-          && SingleNewlineAfterBlock.indexOf(rawDraftObject.blocks[index + 1].type) === -1) {
-        markdownString += '\n\n';
-      } else if (!options.preserveNewlines) {
-        // 2 newlines if not preserving
-        markdownString += '\n\n';
-      } else {
-        markdownString += '\n';
-      }
-    } else if (options.preserveNewlines) {
-      markdownString += '\n';
-    }
-  }
-
-  return markdownString;
-}
-
-/**
- * Generate markdown for a raw draftjs object
- * DraftJS raw object contains an array of blocks, which is the main "structure"
- * of the text. Each block = a new line.
- *
- * @param {Object} rawDraftObject - draftjs object to generate markdown for
- * @param {Object} options - optional additional data, see readme for what options can be passed in.
- *
- * @return {String} markdown string
-**/
-function draftToMarkdown(rawDraftObject, options) {
-  options = options || {};
-  var markdownString = '';
-  rawDraftObject.blocks.forEach(function (block, index) {
-    markdownString += renderBlock(block, index, rawDraftObject, options);
-  });
-
-  orderedListNumber = {}; // See variable definitions at the top of the page to see why we have to do this sad hack.
-  return markdownString;
-}
-
-export default draftToMarkdown;
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/markdown/types.ts b/tdrive/frontend/src/app/components/rich-text-editor/markdown/types.ts
deleted file mode 100644
index 16e663ee..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/markdown/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Entity, RawDraftContentBlock } from "draft-js";
-
-export type EntityItemsOptions = {
-  [key: string]: {
-      open: (entity?: Entity, block?: RawDraftContentBlock) => string;
-      close: (entity?: Entity, block?: RawDraftContentBlock) => string;
-  };
-} | undefined;
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel-suggestion.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel-suggestion.tsx
deleted file mode 100644
index ced9fdef..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel-suggestion.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Emojione from "app/components/emojione/emojione";
-import React from "react";
-import { ChannelSuggestionType } from "./index";
-
-export default (props: ChannelSuggestionType): JSX.Element => {
-  return (
-     <>
-      <div className="icon">
-        <Emojione type={props.icon || ""} />
-      </div>
-      <div className="text">{props.name}</div>
-     </>
-  );
-};
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel.tsx
deleted file mode 100644
index 15bf3a04..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/channel.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { ReactNode } from "react";
-
-type PropsType = {
-  children: ReactNode
-}
-
-export const Channel = (props: PropsType) => {
-  return <span className="label suggestion">{props.children}</span>;
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/index.ts
deleted file mode 100644
index 1b6d87e6..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/channel/index.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ContentBlock, ContentState, EditorState, Modifier } from 'draft-js';
-import { getSelectedBlock } from 'draftjs-utils';
-import { Channel } from './channel';
-import { ChannelType } from 'app/features/channels/types/channel';
-import ChannelSuggestion from './channel-suggestion';
-import { EditorSuggestionPlugin, SelectOrInsertOptions } from '../';
-
-export type ChannelSuggestionType = ChannelType & { autocomplete_id: number };
-
-export const ChannelTypeType = 'CHANNEL';
-const CHANNEL_CHAR = '#';
-
-const findChannelEntities = (
-  contentBlock: ContentBlock,
-  callback: any,
-  contentState: ContentState,
-) => {
-  contentBlock.findEntityRanges((character: any) => {
-    const entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === ChannelTypeType;
-  }, callback);
-};
-
-const resolver = (
-  text: string,
-  max: number,
-  callback: (args: { items: ChannelSuggestionType[] }) => void,
-) => {
-  //TODO
-  callback({ items: [] });
-};
-
-const addChannel = (
-  channel: ChannelSuggestionType,
-  editorState: EditorState,
-  options: SelectOrInsertOptions,
-): EditorState => {
-  let spaceAlreadyPresent = false;
-  const channelAsString = `${CHANNEL_CHAR}${(channel.name || '')
-    .toLocaleLowerCase()
-    .replace(/[^a-z0-9_\-.\u00C0-\u017F]/g, '')}`;
-  const entityKey = editorState
-    .getCurrentContent()
-    .createEntity(ChannelTypeType, 'IMMUTABLE', channel)
-    .getLastCreatedEntityKey();
-  const selectedBlock = getSelectedBlock(editorState);
-  const selectedBlockText = selectedBlock.getText();
-  let focusOffset = editorState.getSelection().getFocusOffset();
-  const channelIndex = (selectedBlockText.lastIndexOf(` ${CHANNEL_CHAR}`, focusOffset) || 0) + 1;
-
-  if (selectedBlockText.length === channelIndex + 1) {
-    focusOffset = selectedBlockText.length;
-  }
-
-  if (selectedBlockText[focusOffset] === ' ') {
-    spaceAlreadyPresent = true;
-  }
-
-  let updatedSelection = editorState.getSelection().merge({
-    anchorOffset: channelIndex,
-    focusOffset,
-  });
-  let newEditorState = EditorState.acceptSelection(editorState, updatedSelection);
-  let contentState = Modifier.replaceText(
-    newEditorState.getCurrentContent(),
-    updatedSelection,
-    channelAsString,
-    newEditorState.getCurrentInlineStyle(),
-    entityKey,
-  );
-
-  newEditorState = EditorState.push(newEditorState, contentState, 'insert-characters');
-
-  if (!spaceAlreadyPresent && options.addSpaceAfter) {
-    // insert a blank space after mention
-    updatedSelection = newEditorState.getSelection().merge({
-      anchorOffset: channelIndex + channelAsString.length,
-      focusOffset: channelIndex + channelAsString.length,
-    });
-    newEditorState = EditorState.acceptSelection(newEditorState, updatedSelection);
-    contentState = Modifier.insertText(
-      newEditorState.getCurrentContent(),
-      updatedSelection,
-      ' ',
-      newEditorState.getCurrentInlineStyle(),
-      undefined,
-    );
-  }
-
-  return EditorState.push(newEditorState, contentState, 'insert-characters');
-};
-
-export default (
-  options: { maxSuggestions: number } = { maxSuggestions: 10 },
-): EditorSuggestionPlugin<ChannelSuggestionType> => ({
-  resolver: (text, callback) => resolver(text, options.maxSuggestions, callback),
-  decorator: {
-    strategy: findChannelEntities,
-    component: Channel,
-  },
-  trigger: /\B(#[a-zA-Z\u00C0-\u017F]*)$/,
-  resourceType: ChannelTypeType,
-  onSelected: (
-    channel: ChannelSuggestionType,
-    editorState: EditorState,
-    options: SelectOrInsertOptions = { addSpaceAfter: true },
-  ) => addChannel(channel, editorState, options),
-  renderSuggestion: (channel: ChannelSuggestionType) => ChannelSuggestion(channel),
-});
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command-suggestion.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command-suggestion.tsx
deleted file mode 100644
index e1bd42b9..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command-suggestion.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import { CommandSuggestionType } from "./index";
-
-export default (props: CommandSuggestionType): JSX.Element => {
-  return (
-    <div>
-      <b>{props.command.split(' ')[0]}</b> {props.command.split(' ').slice(1).join(' ')}
-      <span style={{ marginLeft: 5, opacity: 0.5 }}>{props.description}</span>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command.tsx
deleted file mode 100644
index 4e0e8391..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/command.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
-
-export const Command = (props: any) => {
-  return <span className='label suggestion'>
-    { props.children }
-  </span>;
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/index.ts
deleted file mode 100644
index 87a675bb..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/commands/index.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ContentBlock, ContentState, EditorState, Modifier } from 'draft-js';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import { Command } from './command';
-import { getInsertRange } from '../../editor-utils';
-import CommandSuggestion from './command-suggestion';
-import { EditorSuggestionPlugin } from '../';
-import { Application } from 'app/features/applications/types/application';
-import { getCompanyApplications } from 'app/features/applications/state/company-applications';
-
-export type CommandSuggestionType = {
-  command: string;
-  description: string;
-  autocomplete_id?: number;
-};
-
-export const CommandResourceType = 'COMMAND';
-
-const findEntities = (contentBlock: ContentBlock, callback: any, contentState: ContentState) => {
-  contentBlock.findEntityRanges((character: any) => {
-    const entityKey = character.getEntity();
-    return (
-      entityKey !== null && contentState.getEntity(entityKey).getType() === CommandResourceType
-    );
-  }, callback);
-};
-
-const resolver = (
-  text: string,
-  max: number,
-  callback: (args: { items: CommandSuggestionType[] }) => void,
-) => {
-  let commands: CommandSuggestionType[] = [];
-
-  getCompanyApplications(Groups.currentGroupId).forEach((app: Application) => {
-    if (app) {
-      commands = commands.concat(
-        (app.display?.tdrive?.chat?.commands || []).map(c => ({
-          command: `/${app?.identity?.code} ${c.command}`,
-          description: c.description,
-        })),
-      );
-    }
-  });
-
-  callback({
-    items: commands
-      .filter(c => c.command.startsWith(text))
-      .map((c, index) => ({ ...c, ...{ autocomplete_id: index } })),
-  });
-};
-
-const addCommand = (command: CommandSuggestionType, editorState: EditorState): EditorState => {
-  const { start, end } = getInsertRange(editorState, '/');
-  const contentState = editorState.getCurrentContent();
-  const currentSelection = editorState.getSelection();
-  const selection = currentSelection.merge({
-    anchorOffset: start,
-    focusOffset: end,
-  });
-
-  const entity = contentState.createEntity(CommandResourceType, 'IMMUTABLE', command);
-  const entityKey = entity.getLastCreatedEntityKey();
-  const newContentState = Modifier.replaceText(
-    entity,
-    selection,
-    command.command.split('[')[0].split('"')[0],
-    undefined,
-    entityKey,
-  );
-
-  const newEditorState = EditorState.push(editorState, newContentState, 'insert-fragment');
-
-  return EditorState.forceSelection(newEditorState, newContentState.getSelectionAfter());
-};
-
-export default (
-  options: { maxSuggestions: number } = { maxSuggestions: 10 },
-): EditorSuggestionPlugin<CommandSuggestionType> => ({
-  resolver: (text, callback) => resolver(text, options.maxSuggestions, callback),
-  decorator: {
-    strategy: findEntities,
-    component: Command,
-  },
-  trigger: /^(\/[a-z0-9]*)$/,
-  resourceType: CommandResourceType,
-  onSelected: (command: CommandSuggestionType, editorState: EditorState) =>
-    addCommand(command, editorState),
-  renderSuggestion: (command: CommandSuggestionType) => CommandSuggestion(command),
-});
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji-suggestion.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji-suggestion.tsx
deleted file mode 100644
index dc408a53..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji-suggestion.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import Emojione from "app/components/emojione/emojione";
-import { EmojiSuggestionType } from "./index";
-
-export default (props: EmojiSuggestionType): JSX.Element => {
-  return (
-    <>
-      <div className="icon">
-        <Emojione type={props.native} />
-      </div>
-      <div className="text">
-        {props.colons}{' '}
-        <span style={{ opacity: '0.5', textTransform: 'capitalize' }}>{props.name}</span>
-      </div>
-    </>
-  );
-};
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji.tsx
deleted file mode 100644
index 4ac1dedf..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/emoji.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
-
-export const Emoji = (props: any) => {
-  return <span className='label suggestion'>
-    { props.children }
-  </span>;
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/index.ts
deleted file mode 100644
index 1c2fc21d..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/emoji/index.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ContentBlock, ContentState, EditorState, Modifier } from 'draft-js';
-import { Emoji } from './emoji';
-import EmojiService from 'app/components/rich-text-editor/emojis-service';
-import { getInsertRange } from '../../editor-utils';
-import EmojiSuggestion from './emoji-suggestion';
-import { EditorSuggestionPlugin } from '../';
-
-export type EmojiSuggestionType = {
-  name: string;
-  colons: string;
-  native: any;
-};
-
-export const EmojiResourceType = 'EMOJI';
-
-const findEmojiEntities = (
-  contentBlock: ContentBlock,
-  callback: any,
-  contentState: ContentState,
-) => {
-  contentBlock.findEntityRanges((character: any) => {
-    const entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === EmojiResourceType;
-  }, callback);
-};
-
-const resolver = (
-  text: string,
-  max: number,
-  callback: (args: { items: EmojiSuggestionType[] }) => void,
-) => {
-  EmojiService.search(text, (suggestions: EmojiSuggestionType[]) => {
-    const result: Array<EmojiSuggestionType & { autocomplete_id: number }> = [];
-
-    for (let j = 0; j < max; j++) {
-      suggestions[j] && (result[j] = { ...suggestions[j], ...{ autocomplete_id: j } });
-    }
-
-    callback({ items: result });
-  });
-};
-
-const addEmoji = (emoji: EmojiSuggestionType, editorState: EditorState): EditorState => {
-  const { start, end } = getInsertRange(editorState, ':');
-  const contentState = editorState.getCurrentContent();
-  const currentSelection = editorState.getSelection();
-  const selection = currentSelection.merge({
-    anchorOffset: start,
-    focusOffset: end,
-  });
-
-  const contentStateWithEntity = contentState.createEntity(EmojiResourceType, 'IMMUTABLE', emoji);
-  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-
-  const newContentState = Modifier.replaceText(
-    contentStateWithEntity,
-    selection,
-    emoji.native,
-    undefined,
-    entityKey,
-  );
-
-  const newEditorState = EditorState.push(editorState, newContentState, 'insert-characters');
-
-  return EditorState.forceSelection(newEditorState, newContentState.getSelectionAfter());
-};
-
-const insertEmoji = (emoji: EmojiSuggestionType, editorState: EditorState): EditorState => {
-  const contentState = editorState.getCurrentContent();
-  const selection = editorState.getSelection();
-
-  const entity = contentState.createEntity(EmojiResourceType, 'IMMUTABLE', emoji);
-  const entityKey = entity.getLastCreatedEntityKey();
-
-  const newContentState = Modifier.insertText(
-    entity,
-    selection,
-    emoji.native,
-    undefined,
-    entityKey,
-  );
-
-  const newEditorState = EditorState.push(editorState, newContentState, 'insert-characters');
-
-  return EditorState.forceSelection(newEditorState, newContentState.getSelectionAfter());
-};
-
-export default (
-  options: { maxSuggestions: number } = { maxSuggestions: 10 },
-): EditorSuggestionPlugin<EmojiSuggestionType> => ({
-  resolver: (text, callback) => resolver(text, options.maxSuggestions, callback),
-  decorator: {
-    strategy: findEmojiEntities,
-    component: Emoji,
-  },
-  trigger: /\B:([-+\w]{2,})$/,
-  resourceType: EmojiResourceType,
-  onSelected: (emoji: EmojiSuggestionType, editorState: EditorState) =>
-    addEmoji(emoji, editorState),
-  insert: (emoji: EmojiSuggestionType, editorState: EditorState) => insertEmoji(emoji, editorState),
-  renderSuggestion: (emoji: EmojiSuggestionType) => EmojiSuggestion(emoji),
-});
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/plugins/index.ts
deleted file mode 100644
index 6f020b9b..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/index.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { DraftDecorator, EditorState, Entity, RawDraftContentBlock } from 'draft-js';
-import mentionPlugin, { MentionSuggestionType } from './mentions';
-import emojiPlugin, { EmojiSuggestionType } from './emoji';
-import { ChannelSuggestionType } from './channel';
-import commandPlugin, { CommandSuggestionType } from './commands';
-
-export type SupportedSuggestionTypes =
-  | MentionSuggestionType
-  | EmojiSuggestionType
-  | ChannelSuggestionType
-  | CommandSuggestionType;
-
-export type SelectOrInsertOptions = {
-  addSpaceAfter: boolean;
-};
-
-export type DataSerializer = {
-  /**
-   * Replace patterns in the content string (whole string)
-   */
-  replace: (content: string) => string;
-  open: (entity?: Entity, block?: RawDraftContentBlock) => string;
-  close: (entity?: Entity, block?: RawDraftContentBlock) => string;
-};
-
-export type EditorSuggestionPlugin<T extends SupportedSuggestionTypes> = {
-  resolver: (text: string, callback: (args: { items: T[]; loading?: boolean }) => void) => void;
-  decorator: DraftDecorator;
-  trigger: string | RegExp;
-  resourceType: string;
-  getTextDisplay?: (item: T) => string;
-  onSelected?: (item: T, editorState: EditorState, options?: SelectOrInsertOptions) => EditorState;
-  insert?: (item: T, editorState: EditorState, options?: SelectOrInsertOptions) => EditorState;
-  renderSuggestion?: (item: T) => JSX.Element;
-  serializer?: DataSerializer;
-  returnFullTextForSuggestion?: boolean;
-  skipSuggestionForTypes?: Array<EditorSuggestionPlugin<any>['resourceType']>;
-};
-
-const plugins = new Map<EditorSuggestionPlugin<any>['resourceType'], EditorSuggestionPlugin<any>>();
-
-addPlugin(emojiPlugin());
-addPlugin(mentionPlugin());
-//addPlugin(channelPlugin());
-addPlugin(commandPlugin());
-
-function addPlugin(plugin: EditorSuggestionPlugin<any>): void {
-  plugins.set(plugin.resourceType.toLocaleLowerCase(), plugin);
-}
-
-export function getPlugins(types: string[] = []): Array<EditorSuggestionPlugin<any>> {
-  const result: Array<EditorSuggestionPlugin<any>> = [];
-  types.forEach(type => {
-    const t = type.toLocaleLowerCase();
-    if (plugins.has(t)) {
-      result.push(plugins.get(t)!);
-    }
-  });
-
-  return result.filter(Boolean);
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/index.ts
deleted file mode 100644
index ef748cfb..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/index.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-/* eslint-disable no-useless-escape */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { CharacterMetadata, ContentBlock, ContentState, EditorState, Modifier } from 'draft-js';
-import { getSelectedBlock } from 'draftjs-utils';
-
-import { Mention } from './mention';
-import MentionSuggestion from './mention-suggestion';
-import { EditorSuggestionPlugin, SelectOrInsertOptions } from '../';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces';
-import { UserType } from 'app/features/users/types/user';
-import UserService from 'app/features/users/services/current-user-service';
-import RouterService from 'app/features/router/services/router-service';
-import ChannelMembersAPIClient from 'app/features/channel-members/api/channel-members-api-client';
-import { ChannelMemberType } from 'app/features/channel-members/types/channel-member-types';
-import { searchBackend, searchFrontend } from 'app/features/users/hooks/use-search-user-list';
-
-import './style.scss';
-import { getUser } from 'app/features/users/hooks/use-user-list';
-
-export const MENTION_TYPE = 'MENTION';
-const MENTION_CHAR = '@';
-
-export type MentionSuggestionType = {
-  username: string;
-};
-
-const findMentionEntities = (
-  contentBlock: ContentBlock,
-  callback: (start: number, end: number) => void,
-  contentState: ContentState,
-) => {
-  contentBlock.findEntityRanges((character: CharacterMetadata) => {
-    const entityKey = character.getEntity();
-    return entityKey !== null && contentState.getEntity(entityKey).getType() === MENTION_TYPE;
-  }, callback);
-};
-
-let resolverId = 0;
-
-const resolver = async (
-  text: string,
-  max: number,
-  callback: (args: { items: MentionSuggestionType[]; loading?: boolean }) => void,
-) => {
-  text = text.replace(/^@/, '');
-  resolverId++;
-  const currentResolverId = resolverId;
-
-  const result: Array<MentionSuggestionType & { autocomplete_id: number }> = [];
-  const { companyId, workspaceId, channelId } = RouterService.getStateFromRoute();
-
-  if (AccessRightsService.getCompanyLevel(WorkspaceService.currentGroupId) === 'guest') {
-    const users = (
-      companyId && workspaceId && channelId
-        ? await ChannelMembersAPIClient.list({ companyId, workspaceId, channelId })
-        : ([] as ChannelMemberType[])
-    )
-      .map(member => getUser(member.user_id || ''))
-      .filter(
-        (user: UserType) =>
-          `${user.username} ${user.first_name} ${user.last_name} ${user.email}`
-            .toLocaleLowerCase()
-            .indexOf(text.toLocaleLowerCase()) >= 0,
-      );
-
-    for (let j = 0; j < Math.min(max, users.length); j++) {
-      result[j] = { ...users[j], ...{ autocomplete_id: j } };
-    }
-
-    callback({ items: result });
-  } else {
-    if (companyId && workspaceId) {
-      const fn = (args: { loading: boolean }) => {
-        if (currentResolverId !== resolverId) {
-          //Search input was replaced by an other one
-          return;
-        }
-
-        const resultFrontend = searchFrontend(text, {
-          companyId,
-          workspaceId,
-          scope: 'workspace',
-        });
-
-        for (let j = 0; j < Math.min(max, resultFrontend.length); j++) {
-          result[j] = { ...resultFrontend[j], ...{ autocomplete_id: j } };
-        }
-
-        callback({ items: result, loading: args.loading });
-      };
-
-      searchBackend(text, {
-        companyId,
-        workspaceId,
-        scope: 'workspace',
-        callback: () => {
-          fn({ loading: false });
-        },
-      });
-
-      fn({ loading: true });
-    }
-  }
-};
-
-const addMention = (
-  mention: MentionSuggestionType,
-  editorState: EditorState,
-  options: SelectOrInsertOptions,
-): EditorState => {
-  let spaceAlreadyPresent = false;
-  const username = UserService.getFullName(mention);
-  const mentionText = `${MENTION_CHAR}${username}`;
-  const entityKey = editorState
-    .getCurrentContent()
-    .createEntity(MENTION_TYPE, 'IMMUTABLE', mention)
-    .getLastCreatedEntityKey();
-  const selectedBlock = getSelectedBlock(editorState);
-  const selectedBlockText = selectedBlock.getText();
-  let focusOffset = editorState.getSelection().getFocusOffset();
-  const mentionIndex = (selectedBlockText.lastIndexOf(` ${MENTION_CHAR}`, focusOffset) || 0) + 1;
-
-  if (selectedBlockText.length === mentionIndex + 1) {
-    focusOffset = selectedBlockText.length;
-  }
-
-  if (selectedBlockText[focusOffset] === ' ') {
-    spaceAlreadyPresent = true;
-  }
-
-  let updatedSelection = editorState.getSelection().merge({
-    anchorOffset: mentionIndex,
-    focusOffset,
-  });
-  let newEditorState = EditorState.acceptSelection(editorState, updatedSelection);
-  let contentState = Modifier.replaceText(
-    newEditorState.getCurrentContent(),
-    updatedSelection,
-    mentionText,
-    newEditorState.getCurrentInlineStyle(),
-    entityKey,
-  );
-
-  newEditorState = EditorState.push(newEditorState, contentState, 'insert-characters');
-
-  if (!spaceAlreadyPresent && options.addSpaceAfter) {
-    // insert a blank space after mention
-    updatedSelection = newEditorState.getSelection().merge({
-      anchorOffset: mentionIndex + mentionText.length,
-      focusOffset: mentionIndex + mentionText.length,
-    });
-    newEditorState = EditorState.acceptSelection(newEditorState, updatedSelection);
-    contentState = Modifier.insertText(
-      newEditorState.getCurrentContent(),
-      updatedSelection,
-      ' ',
-      newEditorState.getCurrentInlineStyle(),
-      undefined,
-    );
-  }
-
-  return EditorState.push(newEditorState, contentState, 'insert-characters');
-};
-
-export default (
-  options: { maxSuggestions: number } = { maxSuggestions: 10 },
-): EditorSuggestionPlugin<MentionSuggestionType> => ({
-  resolver: (text, callback) => resolver(text, options.maxSuggestions, callback),
-  decorator: {
-    strategy: findMentionEntities,
-    component: Mention,
-  },
-  trigger: /\B(@[^\s.,)(@<>;:\/?!]*)$/, //We can't use \w because of accents
-  resourceType: MENTION_TYPE,
-  getTextDisplay: (mention: MentionSuggestionType) => mention.username,
-  onSelected: (
-    mention: MentionSuggestionType,
-    editorState: EditorState,
-    options: SelectOrInsertOptions = { addSpaceAfter: true },
-  ) => addMention(mention, editorState, options),
-  renderSuggestion: (mention: MentionSuggestionType) => MentionSuggestion(mention),
-  serializer: {
-    // When in code-block, we choose to not handle the mention the same way: It will be only a text, not a mention
-    // this is why we have the <MENTION> and <CODE_MENTION> elements
-    replace: content =>
-      content
-        .replace(/<MENTION\|(.*?)>(.*?)<\/MENTION>/gm, (_match, mention) => mention)
-        .replace(
-          /<CODE_MENTION\|(.*?)>(.*?)<\/CODE_MENTION>/gm,
-          (_match, mention, fullName) => fullName,
-        ),
-    open: (entity, block) =>
-      block?.type === 'code-block'
-        ? `<CODE_${MENTION_TYPE}|@${(entity as any).data.username}>`
-        : `<${MENTION_TYPE}|@${(entity as any).data.username}>`,
-    close: (_entity, block) =>
-      block?.type === 'code-block' ? `</CODE_${MENTION_TYPE}>` : `</${MENTION_TYPE}>`,
-  },
-  returnFullTextForSuggestion: true,
-  // will skip suggestion when already in a MENTION block
-  skipSuggestionForTypes: [MENTION_TYPE],
-});
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention-suggestion.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention-suggestion.tsx
deleted file mode 100644
index 1eb37d3d..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention-suggestion.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { MentionSuggestionType } from './index';
-import UsersService from 'app/features/users/services/current-user-service';
-import User from 'components/user/user';
-
-export default (props: MentionSuggestionType): JSX.Element => {
-  return (
-    <>
-      <div className="icon">
-        <User user={props} small />
-      </div>
-      <div className="text">{UsersService.getFullName(props)} </div>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention.tsx
deleted file mode 100644
index b5520470..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/mention.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { ReactNode } from 'react';
-
-type PropsType = {
-  children: ReactNode
-}
-
-export const Mention = (props: PropsType): JSX.Element => {
-  return <span className="label suggestion mention">{props.children}</span>;
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/style.scss b/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/style.scss
deleted file mode 100644
index 4ca76782..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/mentions/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.suggestion {
-  &.mention {
-    background: var(--primary-background);
-    border-radius: var(--border-radius-base);
-    color: var(--black);
-    display: inline-block;
-    padding-right: 2px;
-    padding-left: 2px;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.scss b/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.scss
deleted file mode 100644
index b85cbf51..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.suggestions {
-  border-radius: 1px solid rgba(0, 0, 0, 0.2);
-  transition: box-shadow 0.2s;
-
-  .dropmenu {
-    opacity: 0;
-    transition: opacity 0.2s;
-    pointer-events: none;
-  }
-
-  &.focused {
-    .dropmenu {
-      opacity: 1;
-      pointer-events: all;
-    }
-  }
-
-  input,
-  textarea {
-    margin: 0px !important;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.tsx b/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.tsx
deleted file mode 100644
index c68f15b4..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/suggestion-list.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, CSSProperties, useEffect } from 'react';
-import classNames from 'classnames';
-import { Row, Typography } from 'antd';
-import { Frown, Terminal, Search } from 'react-feather';
-
-import { isCommandType, isEmojiType, isMentionType } from './utils';
-import Languages from 'app/features/global/services/languages-service';
-
-import './suggestion-list.scss';
-import { LoadingOutlined } from '@ant-design/icons';
-
-type Props<T> = {
-  id: string;
-  loading: boolean;
-  list: Array<T & { autocomplete_id?: number }> | undefined;
-  search: string;
-  renderItem: (item: T) => any;
-  onSelected: (item: T) => void;
-  disableNavigationKey?: boolean;
-  selectedIndex: number;
-  position: DOMRect | null;
-  editorPosition: DOMRect | null;
-  suggestionWitdh?: number;
-  suggestionMargin?: number;
-  suggestionType?: string;
-};
-
-const DEFAULT_SUGGESTION_WIDTH = 400;
-const DEFAULT_SUGGESTION_MARGIN = 20;
-const DEFAULT_SUGGESTION_PADDING = 5;
-
-export const SuggestionList = <T,>(props: Props<T>): JSX.Element => {
-  const suggestionWidth = props.suggestionWitdh || DEFAULT_SUGGESTION_WIDTH;
-  const suggestionMargin = props.suggestionMargin || DEFAULT_SUGGESTION_MARGIN;
-  const [isFocused] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [x, setX] = useState(0);
-  const [id, setId] = useState('');
-  const [cssPosition, setCssPosition] = useState<CSSProperties>(() => ({
-    maxWidth: suggestionWidth,
-    minWidth: suggestionWidth,
-    top: (props.position?.y || 0) - DEFAULT_SUGGESTION_PADDING,
-    position: 'fixed',
-    zIndex: 20,
-  }));
-
-  // update the position when ID changes
-  useEffect(() => {
-    setPosition({
-      x: props.position?.x || 0,
-      y: props.position?.y || 0,
-    });
-  }, [props.position, props.id]);
-
-  // keep the first X value until Y changes so the suggestion does not move left/right when typing
-  useEffect(() => {
-    if (props.id !== id) {
-      // this is a new search, we can update the X
-      setX(props.position?.x || 0);
-      setId(props.id);
-    }
-  }, [props.position, position, props.id, id]);
-
-  useEffect(() => {
-    const totalWidth = window.document.body.offsetWidth;
-    if (x + suggestionWidth < totalWidth - suggestionMargin) {
-      // keep the position just over the cursor
-      setCssPosition(cssPosition => {
-        const style = {
-          ...cssPosition,
-          ...{ left: x, top: (props.position?.y || 0) - DEFAULT_SUGGESTION_PADDING },
-        };
-        delete style.right;
-        return style;
-      });
-    } else if (x - suggestionWidth > 0) {
-      // align the end of the suggestion over the cursor
-      setCssPosition(cssPosition => {
-        const style = {
-          ...cssPosition,
-          ...{ right: totalWidth - x, top: (props.position?.y || 0) - DEFAULT_SUGGESTION_PADDING },
-        };
-        delete style.left;
-        return style;
-      });
-    } else {
-      // nothing can be aligned correctly, center in the screen
-      setCssPosition(cssPosition => {
-        const padding = (totalWidth - suggestionWidth) / 2;
-        const style = {
-          ...cssPosition,
-          ...{
-            right: padding,
-            left: padding,
-            top: (props.position?.y || 0) - DEFAULT_SUGGESTION_PADDING,
-          },
-        };
-        return style;
-      });
-    }
-  }, [props.position?.y, x, suggestionMargin, suggestionWidth]);
-
-  const select = (item: T) => {
-    item && props.onSelected(item);
-  };
-
-  const buildSuggestionDefaultMessage = () => {
-    let text = '';
-    let icon: JSX.Element = <div />;
-
-    if (props.suggestionType) {
-      if (isMentionType(props.suggestionType)) {
-        text =
-          props.search.length < 3 && props?.list?.length === 0
-            ? 'components.rich_text_editor.plugins.suggestions.default_message.display_results'
-            : 'components.rich_text_editor.plugins.suggestions.default_message.no_user_found';
-
-        icon =
-          props.search.length < 3 && props?.list?.length === 0 ? (
-            <Search size={18} color="var(--grey-dark)" className="small-right-margin" />
-          ) : (
-            <Frown size={18} color="var(--grey-dark)" className="small-right-margin" />
-          );
-      }
-
-      if (isEmojiType(props.suggestionType)) {
-        text = 'components.rich_text_editor.plugins.suggestions.default_message.no_emoji_found';
-        icon = <Frown size={18} color="var(--grey-dark)" className="small-right-margin" />;
-      }
-
-      if (isCommandType(props.suggestionType)) {
-        text = 'components.rich_text_editor.plugins.suggestions.default_message.no_command_found';
-        icon = <Terminal size={18} color="var(--grey-dark)" className="small-right-margin" />;
-      }
-    }
-
-    return (
-      <Row justify="center" align="middle" wrap={false}>
-        {icon}
-        <Typography.Text type="secondary">{Languages.t(text)}</Typography.Text>
-      </Row>
-    );
-  };
-
-  if (cssPosition.left === 0) {
-    return <></>;
-  }
-
-  return (
-    <div className="suggestions" style={cssPosition}>
-      <div
-        className={classNames(
-          ['menu-list', 'as_frame bg-white dark:bg-zinc-900 rounded-lg', 'inline', 'top'],
-          {
-            fade_in: isFocused && props.list?.length,
-          },
-        )}
-      >
-        {props?.list && props.list.length > 0 ? (
-          props.list.map((item, index) => {
-            return (
-              <div
-                key={index}
-                className={classNames('menu', {
-                  is_selected:
-                    !props.disableNavigationKey && item.autocomplete_id === props.selectedIndex,
-                })}
-                onClick={() => select(item)}
-                onMouseDown={() => select(item)}
-                onFocus={() => console.log('FOCUS', item)}
-              >
-                {item && props.renderItem(item)}
-              </div>
-            );
-          })
-        ) : props.loading ? (
-          <></>
-        ) : (
-          buildSuggestionDefaultMessage()
-        )}
-        {props.loading && (
-          <div
-            style={{
-              textAlign: 'center',
-              fontSize: '12px',
-              width: '100%',
-              marginBottom: props?.list && props.list.length > 0 ? 8 : 0,
-              opacity: 0.5,
-            }}
-          >
-            <LoadingOutlined />
-            &nbsp; Looking for more
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/utils.ts b/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/utils.ts
deleted file mode 100644
index 6d15cbce..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/plugins/suggestion/utils.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { CommandResourceType } from '../commands';
-import { EmojiResourceType } from '../emoji';
-import { MENTION_TYPE } from '../mentions';
-
-export const isMentionType = (suggestionType: string): boolean => {
-  return suggestionType === MENTION_TYPE;
-};
-
-export const isEmojiType = (suggestionType: string): boolean => {
-  return suggestionType === EmojiResourceType;
-};
-
-export const isCommandType = (suggestionType: string): boolean => {
-  return suggestionType === CommandResourceType;
-};
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/text-count/index.ts b/tdrive/frontend/src/app/components/rich-text-editor/text-count/index.ts
deleted file mode 100644
index 85c82417..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/text-count/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TextCountService from './text-count-service';
-
-export { TextCount } from './text-count';
-export { TextCountService };
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count-service.ts b/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count-service.ts
deleted file mode 100644
index daa97abc..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count-service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { EditorState } from 'draft-js';
-
-export const DEFAULT_THRESHOLD = 70;
-export const MAX_TEXT_LENGTH = 12000;
-
-export type TextStats = {
-  length: number;
-  isTooLong: boolean;
-  shouldLimit: boolean;
-  isOverThreshold: boolean;
-  maxLength: number;
-  threshold: number;
-};
-
-class TextCountService {
-  constructor(public readonly maxLength = MAX_TEXT_LENGTH, public readonly threshold = DEFAULT_THRESHOLD) {
-  }
-
-  getStats(editorState: EditorState): TextStats {
-    const length = editorState.getCurrentContent().getPlainText('').length;
-
-    return {
-      length,
-      isTooLong: length > this.maxLength,
-      shouldLimit: length > this.maxLength - 1,
-      isOverThreshold: Math.round((length / this.maxLength) * 100) > this.threshold,
-      maxLength: this.maxLength,
-      threshold: this.threshold,
-    };
-  }
-}
-
-export default new TextCountService(MAX_TEXT_LENGTH, DEFAULT_THRESHOLD);
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.scss b/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.scss
deleted file mode 100644
index b1bfc414..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.text-count {
-  font-size: x-small;
-  color: var(--grey-dark);
-  position: relative;
-  bottom: -4px;
-  padding-right: 6px;
-
-  span.limit {
-    color: var(--error);
-  }
-}
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.tsx b/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.tsx
deleted file mode 100644
index a4156d7c..00000000
--- a/tdrive/frontend/src/app/components/rich-text-editor/text-count/text-count.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// eslint-disable-next-line
-import React, { useEffect, useState } from 'react';
-import className from 'classnames';
-import { EditorState } from 'draft-js';
-import TextCountService, { TextStats } from './text-count-service';
-
-import './text-count.scss';
-
-type PropsType = {
-  editorState: EditorState;
-  displayOnlyAfterThresold: boolean;
-};
-
-export const TextCount = (props: PropsType) => {
-  const [display, setDisplay] = useState(false);
-  const [stats, setStats] = useState<Partial<TextStats>>({
-    length: 0,
-    isTooLong: false,
-    shouldLimit: false,
-    isOverThreshold: false,
-  });
-
-  useEffect(() => {
-    const stats = TextCountService.getStats(props.editorState);
-
-    setDisplay(props.displayOnlyAfterThresold && !!stats.isOverThreshold);
-    setStats(stats);
-  }, [props.editorState, props.displayOnlyAfterThresold]);
-
-  return (
-    <>
-      {display && (
-        <div className="text-count fade_in">
-          <span className={className({ limit: stats.isTooLong })}>
-            {stats.length}/{stats.maxLength}
-          </span>
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notification-service.ts b/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notification-service.ts
index 116aeabf..c1d65f0c 100644
--- a/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notification-service.ts
+++ b/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notification-service.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Observable from 'app/deprecated/Observable/Observable';
+import Observable from '@deprecated/Observable/Observable';
 
 type NodeType = React.RefObject<HTMLDivElement | ChildNode> | React.MutableRefObject<any> | any;
 
diff --git a/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notifications-button.tsx b/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notifications-button.tsx
index 56f6e076..8dca4efb 100644
--- a/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notifications-button.tsx
+++ b/tdrive/frontend/src/app/components/scroll-hidden-components/hidden-notifications-button.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { ArrowUp, ArrowDown } from 'react-feather';
 import { Button } from 'antd';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import './notifications.scss';
 
 type PropsType = {
diff --git a/tdrive/frontend/src/app/components/search-popup/common.tsx b/tdrive/frontend/src/app/components/search-popup/common.tsx
index ddcc7f06..876d161f 100644
--- a/tdrive/frontend/src/app/components/search-popup/common.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/common.tsx
@@ -1,12 +1,9 @@
 import Strings from 'features/global/utils/strings';
-import { Message, MessageFileType } from 'features/messages/types/message';
 import FileUploadService from 'features/files/services/file-upload-service';
-import routerService from 'app/features/router/services/router-service';
-import { ChannelType } from 'app/features/channels/types/channel';
-import ChannelAPIClient from 'app/features/channels/api/channel-api-client';
-import { DriveApiClient } from 'app/features/drive/api-client/api-client';
-import { DriveItem } from 'app/features/drive/types';
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
+import routerService from '@features/router/services/router-service';
+import { DriveApiClient } from '@features/drive/api-client/api-client';
+import { DriveItem } from '@features/drive/types';
+import { AttachedFileType } from '@features/files/types/file';
 
 export const highlightText = (text?: string, highlight?: string) => {
   if (!text) {
@@ -19,7 +16,7 @@ export const highlightText = (text?: string, highlight?: string) => {
   return Strings.removeAccents(text).replace(reg, "<span class='highlight'>$1</span>");
 };
 
-export const getFileMessageDownloadRoute = (file: MessageFileType): string => {
+export const getFileMessageDownloadRoute = (file: AttachedFileType): string => {
   if (file?.metadata?.source === 'internal')
     return FileUploadService.getDownloadRoute({
       companyId: file.metadata?.external_id?.company_id,
@@ -28,61 +25,24 @@ export const getFileMessageDownloadRoute = (file: MessageFileType): string => {
   return '';
 };
 
-export const onFileDownloadClick = (file: MessageFileType) => {
+export const onFileDownloadClick = (file: AttachedFileType) => {
   const url = getFileMessageDownloadRoute(file);
 
   url && (window.location.href = url);
 };
 
-export const openChannel = async (channel: ChannelType, currentWorkspaceId: string) => {
-  if (channel.workspace_id === 'direct') {
-    const direct = await ChannelAPIClient.getDirect(
-      channel.company_id || '',
-      channel.members || [],
-    );
-    if (direct) channel = { ...channel, id: direct.id };
-  }
-
-  routerService.push(
-    routerService.generateRouteFromState({
-      companyId: channel.company_id,
-      workspaceId:
-        (channel.workspace_id === 'direct' ? undefined : channel.workspace_id) ||
-        currentWorkspaceId,
-      channelId: channel.id,
-    }),
-  );
-};
-
-export const openMessage = async (message: Message, currentWorkspaceId: string) => {
-  routerService.push(
-    routerService.generateRouteFromState({
-      companyId: message?.cache?.company_id,
-      workspaceId:
-        message?.cache?.workspace_id === 'direct'
-          ? currentWorkspaceId
-          : message?.cache?.workspace_id,
-      channelId: message?.cache?.channel_id,
-      threadId: message?.thread_id,
-      ...(message.id !== message?.thread_id ? { messageId: message.id } : {}),
-    }),
-  );
-};
-
-
 export const openDriveItem = (driveItem: DriveItem, workspace_id: string, drive_app_id: string) => {
   routerService.push(
     routerService.generateRouteFromState({
       companyId: driveItem.company_id,
-      workspaceId: workspace_id ,
+      workspaceId: workspace_id,
       channelId: drive_app_id,
     }),
   );
-  DriveService.changeCurrentDirectory(drive_app_id, driveItem.parent_id);
-}
+};
 
 export const onDriveItemDownloadClick = async (driveItem: DriveItem) => {
   const url = await DriveApiClient.getDownloadUrl(driveItem.company_id, driveItem.id);
 
   url && (window.location.href = url);
-};
\ No newline at end of file
+};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.scss b/tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.scss
deleted file mode 100644
index 2119480d..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-.component-channel-avatar {
-
-  display: inline-flex;
-  flex-direction: column;
-
-  .channel-icon-container{
-    display: flex;
-    flex-direction: row;
-
-  }
-
-  $iconWidth: 64px;
-
-  .channel-icon-wrapper {
-    height: $iconWidth;
-    width: $iconWidth;
-    border-radius: 50%;
-    margin-bottom:2px;
-    align-items: center;
-    text-align: center;
-    display: flex;
-
-    .channel-icon-text {
-      line-height: 64px;
-      width:100%;
-      font-size: 24px;
-      color:white;
-      font-weight: 700;
-    }
-
-    .channel-icon-img {
-      width:$iconWidth;
-      height:$iconWidth;
-      object-fit: cover;
-      object-position: 50% 15%;
-      border-radius: 50%;
-
-    }
-  }
-
-  .channel-icon-wrapper:not(:first-child){
-    margin-left:calc($iconWidth*2/5*-1);
-  }
-
-
-  .channel-label {
-    text-align: center;
-    font-size:10px;
-    line-height: 1.2em;
-    padding-top:4px;
-    padding-bottom:4px;
-    width:$iconWidth;
-
-    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
-    mask-image: linear-gradient(to right, black 85%, transparent 100%);
-    overflow: hidden;
-
-    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
-    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
-    overflow-y: hidden;
-    height: 40px;
-
-  }
-
-  .channel-icon-wrapper.style0{
-    background: var(--messagebubblelight);
-  }
-
-  .channel-icon-wrapper.style1 {background: linear-gradient(129.62deg, #9F2EF4 15.98%, #F97D64 50.17%, #F6C533 82.97%);}
-  .channel-icon-wrapper.style2 {background: linear-gradient(124.19deg, #0099C0 12.87%, #0099C0 49.65%, #3DD5A8 84.94%);}
-  .channel-icon-wrapper.style3 {background: linear-gradient(137.24deg, #D3A6FF 15.1%, #B966B5 50.52%, #7E72C6 85.13%);}
-  .channel-icon-wrapper.style4 {background: linear-gradient(124.08deg, #E2EF54 14.56%, #FF5C66 47.57%, #6248D5 83.84%);}
-  .channel-icon-wrapper.style5 {background: linear-gradient(120.32deg, #FF5CF1 14.48%, #B38ADE 51.66%, #56CDDF 84.61%);}
-  .channel-icon-wrapper.style6 {background: linear-gradient(120.32deg, #75C192 14.48%, #70BDA0 51.66%, #21B59C 84.61%);}
-  .channel-icon-wrapper.style7 {background: linear-gradient(136.93deg, #FFA6AF 14.87%, #E62E40 50.07%, #AA0909 84.36%);}
-  .channel-icon-wrapper.style8 {background: linear-gradient(136.93deg, #335F50 14.87%, #47888C 50.07%, #08C992 84.36%);}
-  .channel-icon-wrapper.style9 {background: linear-gradient(135.32deg, #6CD97E 15.23%, #12B312 56.97%, #117600 84.49%);}
-  .channel-icon-wrapper.style10 {background: linear-gradient(135deg, #7DF1FA 14.84%, #2BB4D6 49.93%, #008AA2 82.63%);}
-  .channel-icon-wrapper.style11 {background: linear-gradient(136.26deg, #FFBF80 13.66%, #E66B2E 51.13%, #A64300 84.79%);}
-}
-
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.tsx b/tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.tsx
deleted file mode 100644
index 1d109b84..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/channel-avatar/channel-avatar.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ChannelType } from 'features/channels/types/channel';
-import React from 'react';
-import './channel-avatar.scss';
-import UsersService from 'features/users/services/current-user-service';
-import UserService from 'features/users/services/current-user-service';
-import { UserType } from 'features/users/types/user';
-import { addApiUrlIfNeeded } from 'features/global/utils/URLUtils';
-import emoji from 'emoji-name-map';
-import _ from 'lodash';
-
-type PropsType = {
-  channel: ChannelType;
-  showLabel: boolean;
-  collapseToOne?: boolean;
-};
-
-export default ({ channel, showLabel, collapseToOne }: PropsType): JSX.Element => {
-  if (channel.visibility === 'direct') {
-    let channelUsers = _.uniqBy(channel.users || [], 'id')
-      .filter(e => e.id !== UsersService.getCurrentUserId() || channel.users?.length === 1)
-      .filter(a => a);
-
-    if (channelUsers.length === 0) {
-      channelUsers = [UsersService.getCurrentUser()];
-    }
-
-    const channelName: string[] = [];
-
-    const icons = [] as JSX.Element[];
-
-    channelUsers.forEach(member => {
-      channelName.push(UserService.getFullName(member));
-      if (!(collapseToOne && icons.length > 0)) {
-        icons.push(getThumbnail(member));
-      }
-    });
-
-    let width = 64;
-
-    if (!collapseToOne && channelUsers.length > 1) {
-      const shift = 64 - (64 * 2) / 5;
-      width = 64 + (channelUsers.length - 1) * shift;
-    }
-
-    return (
-      <div className="component-channel-avatar">
-        <div className="channel-icon-container">{icons.map(icon => icon)}</div>
-        {showLabel && (
-          <div className="channel-label" style={{ width: width }}>
-            {channelName.join(', ')}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  let thumbnail;
-  const label = channel?.name;
-
-  if (channel.icon) {
-    thumbnail = emoji.get(channel.icon);
-  }
-
-  if (!thumbnail && channel.name) {
-    thumbnail = '';
-    const channelName =
-      channel.name.indexOf(' ') < 0 ? channel.name.replace('_', ' ') : channel.name;
-    const split = channelName.toUpperCase().split(' ');
-    thumbnail += (split?.[0]?.[0] || '') + (split?.[1]?.[0] || '');
-  }
-
-  const style = getStyle(channel.id);
-
-  return (
-    <div className="component-channel-avatar">
-      <div className={'channel-icon-wrapper' + style}>
-        <div className="channel-icon-text">{thumbnail}</div>
-      </div>
-      {showLabel && <div className="channel-label">{label}</div>}
-    </div>
-  );
-};
-
-const getStyle = (id?: string) => {
-  if (!id) return '';
-  let output = 0;
-  for (let i = 0; i < id.length; i++) {
-    output += id[i].charCodeAt(0);
-  }
-  const i = (output % 10) + 1;
-  return ` style${i}`;
-};
-
-const getThumbnail = (user: UserType) => {
-  let inner;
-  let style = '';
-  if (user && (user.thumbnail || user.picture)) {
-    const thumbnail = addApiUrlIfNeeded(user.picture || user.thumbnail || '');
-    inner = <img alt={user.first_name} className="channel-icon-img" src={thumbnail} />;
-  } else {
-    const fullName = UserService.getFullName(user).toUpperCase().split(' ');
-    const letters = (fullName?.[0]?.[0] || '?') + (fullName?.[1]?.[0] || '');
-    inner = <div className="channel-icon-text">{letters}</div>;
-    style = getStyle(user.id);
-  }
-
-  return <div className={`channel-icon-wrapper${style}`}>{inner}</div>;
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/channel-line-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/channel-line-result.tsx
deleted file mode 100755
index 5e8bb4a7..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/channel-line-result.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as Text from '@atoms/text';
-import { ChannelType } from 'app/features/channels/types/channel';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import ChannelAvatar from 'app/components/search-popup/parts/channel-avatar/channel-avatar';
-import Highlighter from 'react-highlight-words';
-import { useRecoilValue } from 'recoil';
-import { openChannel } from '../common';
-import { Button } from 'app/atoms/button/button';
-import Languages from 'app/features/global/services/languages-service';
-import { useChannel } from 'app/features/channels/hooks/use-channel';
-import { useChannelNotifications } from 'app/features/users/hooks/use-notifications';
-import { Badge } from '@atoms/badge';
-import UserService from 'features/users/services/current-user-service';
-import ResultContext from './result-context';
-import _ from 'lodash';
-
-type PropsType = {
-  channel: ChannelType;
-};
-
-export default ({ channel: _channel }: PropsType): JSX.Element => {
-  const channel =
-    (_channel.visibility !== 'direct'
-      ? useChannel(_channel.id || '', {
-          companyId: _channel.company_id || '',
-          workspaceId: _channel.workspace_id || '',
-        })?.channel
-      : undefined) || _channel;
-  const currentWorkspaceId = useRouterWorkspace();
-  const input = useRecoilValue(SearchInputState);
-  const name =
-    channel.name ||
-    _.uniqBy(channel.users || [], 'id')
-      .filter(u => u.id != UserService.getCurrentUserId() || channel.users?.length === 1)
-      .map(u => UserService.getFullName(u).trim())
-      .join(', ');
-  const { setOpen } = useSearchModal();
-
-  const notifications = useChannelNotifications(channel.id || '');
-
-  return (
-    <div
-      className="flex items-center p-2 hover:bg-zinc-50 rounded-md cursor-pointer"
-      onClick={() => {
-        openChannel(channel, currentWorkspaceId);
-        setOpen(false);
-      }}
-    >
-      <div className="mr-3">
-        <ChannelAvatar channel={channel} showLabel={false} collapseToOne={true} />
-      </div>
-      <div className="grow mr-3 overflow-hidden text-ellipsis whitespace-nowrap">
-        <Text.Base className="block overflow-hidden text-ellipsis whitespace-nowrap">
-          <Highlighter
-            highlightClassName="text-blue-500 p-0 bg-blue-50 overflow-hidden text-ellipsis whitespace-nowrap"
-            searchWords={input?.query?.split(' ')}
-            autoEscape={true}
-            textToHighlight={name}
-          />
-        </Text.Base>
-        <Text.Info className="block">
-          {channel?.stats?.members || channel.users?.length || 0} members
-        </Text.Info>
-        <ResultContext context={{ workspaceId: channel.workspace_id || '' }} />
-      </div>
-      <div className="text-right">
-        {!channel.user_member && (
-          <>
-            <Button theme="outline">Preview</Button>
-            <br />
-            <Text.Info>
-              {Languages.t(
-                'scenes.client.channelsbar.modals.workspace_channel_list.workspace_channel_row.tag',
-              )}
-            </Text.Info>
-          </>
-        )}
-        {!!channel.user_member && (notifications?.badges?.length || 0) > 0 && (
-          <>
-            <Badge size="sm" className="rounded-full px-2.5" theme="primary">
-              {notifications.badges.length}
-            </Badge>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/channel-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/channel-result.tsx
deleted file mode 100755
index b38c8719..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/channel-result.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import ChannelAvatar from 'app/components/search-popup/parts/channel-avatar/channel-avatar';
-import { openChannel } from '../common';
-import { useChannelNotifications } from 'app/features/users/hooks/use-notifications';
-import { useChannel } from 'app/features/channels/hooks/use-channel';
-import { Badge } from 'app/atoms/badge';
-
-type PropsType = {
-  channel: ChannelType;
-};
-
-export default ({ channel: _channel }: PropsType): JSX.Element => {
-  const channel =
-    (_channel.visibility !== 'direct'
-      ? useChannel(_channel.id || '', {
-          companyId: _channel.company_id || '',
-          workspaceId: _channel.workspace_id || '',
-        })?.channel
-      : undefined) || _channel;
-  const currentWorkspaceId = useRouterWorkspace();
-  const { setOpen } = useSearchModal();
-
-  const notifications = useChannelNotifications(channel.id || '');
-
-  return (
-    <div
-      className="relative"
-      onClick={() => {
-        openChannel(channel, currentWorkspaceId);
-        setOpen(false);
-      }}
-    >
-      <ChannelAvatar channel={channel} showLabel={true} collapseToOne={true} />
-      {!!channel.user_member && !!notifications?.badges?.length && (
-        <>
-          <Badge size="sm" className="rounded-full px-2.5 absolute -right-2 top-0" theme="primary">
-            {notifications.badges.length}
-          </Badge>
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
index 86c680eb..4add9b1f 100644
--- a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
@@ -1,8 +1,11 @@
-import * as Text from '@atoms/text';
-import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
-import { Button } from 'app/atoms/button/button';
-import { DownloadIcon } from 'app/atoms/icons-agnostic';
+import { FolderIcon } from '@heroicons/react/solid';
 import { ArrowRight } from 'react-feather';
+import Highlighter from 'react-highlight-words';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { onDriveItemDownloadClick, openDriveItem } from '../common';
+import ResultContext from './result-context';
+import { Button } from '@atoms/button/button';
+import { DownloadIcon } from '@atoms/icons-agnostic';
 import {
   FileTypeArchiveIcon,
   FileTypeDocumentIcon,
@@ -10,23 +13,20 @@ import {
   FileTypeSlidesIcon,
   FileTypeSpreadsheetIcon,
   FileTypeUnknownIcon,
-} from 'app/atoms/icons-colored';
-import { formatDate } from 'app/features/global/utils/format-date';
-import { formatSize } from 'app/features/global/utils/format-file-size';
-import { DriveItem } from 'app/features/drive/types';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import { UserType } from 'app/features/users/types/user';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-import Media from 'app/molecules/media';
-import Highlighter from 'react-highlight-words';
-import { useRecoilValue, useRecoilState } from 'recoil';
-import { openDriveItem, onDriveItemDownloadClick } from '../common';
-import ResultContext from './result-context';
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
-import { DriveCurrentFolderAtom } from 'app/views/client/body/drive/browser';
-import { FolderIcon } from '@heroicons/react/solid';
+} from '@atoms/icons-colored';
+import * as Text from '@atoms/text';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import { DriveItem } from '@features/drive/types';
+import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
+import { formatDate } from '@features/global/utils/format-date';
+import { formatSize } from '@features/global/utils/format-file-size';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import { useSearchModal } from '@features/search/hooks/use-search';
+import { SearchInputState } from '@features/search/state/search-input';
+import { UserType } from '@features/users/types/user';
+import { useFileViewerModal } from '@features/viewer/hooks/use-viewer';
+import Media from '@molecules/media';
+import { DriveCurrentFolderAtom } from '@views/client/body/drive/browser';
 
 export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
   const input = useRecoilValue(SearchInputState);
@@ -63,12 +63,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
           {extension?.toLocaleUpperCase()} • {formatDate(parseInt(file?.last_modified))} •{' '}
           {formatSize(file?.size)}
         </Text.Info>
-        <ResultContext
-          user={file.user}
-          context={{
-            companyId: file?.company_id,
-          }}
-        />
+        <ResultContext user={file.user} />
       </div>
       <div
         className="whitespace-nowrap"
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/file-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/file-result.tsx
deleted file mode 100644
index b132e467..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/file-result.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import * as Text from '@atoms/text';
-import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
-import { Button } from 'app/atoms/button/button';
-import { DownloadIcon } from 'app/atoms/icons-agnostic';
-import {
-  FileTypeArchiveIcon,
-  FileTypeDocumentIcon,
-  FileTypePdfIcon,
-  FileTypeSlidesIcon,
-  FileTypeSpreadsheetIcon,
-  FileTypeUnknownIcon,
-} from 'app/atoms/icons-colored';
-import { formatDate } from 'app/features/global/utils/format-date';
-import { formatSize } from 'app/features/global/utils/format-file-size';
-import { Message, MessageFileType } from 'app/features/messages/types/message';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import { UserType } from 'app/features/users/types/user';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-import Media from 'app/molecules/media';
-import { ArrowRight } from 'react-feather';
-import Highlighter from 'react-highlight-words';
-import { useRecoilValue } from 'recoil';
-import { onFileDownloadClick, openMessage } from '../common';
-import ResultContext from './result-context';
-
-export default (props: { file: MessageFileType & { message?: Message } & { user?: UserType } }) => {
-  const input = useRecoilValue(SearchInputState);
-  const currentWorkspaceId = useRouterWorkspace();
-  const file = props.file;
-  const name = file?.metadata?.name;
-  const extension = name?.split('.').pop();
-
-  const { setOpen } = useSearchModal();
-  const { open: openViewer } = useFileViewerModal();
-
-  return (
-    <div
-      className="flex items-center p-2 hover:bg-zinc-50 rounded-md cursor-pointer"
-      onClick={() => openViewer(file)}
-    >
-      <FileResultMedia file={file} className="w-16 h-16 mr-3" />
-      <div className="grow mr-3 overflow-hidden">
-        <Text.Base className="block whitespace-nowrap overflow-hidden text-ellipsis">
-          <Highlighter
-            highlightClassName="text-blue-500 p-0 bg-blue-50"
-            searchWords={input?.query?.split(' ')}
-            autoEscape={true}
-            textToHighlight={name}
-          />
-        </Text.Base>
-        <Text.Info className="block">
-          {extension?.toLocaleUpperCase()} • {formatDate(file?.message?.created_at)} •{' '}
-          {formatSize(file?.metadata?.size)}
-        </Text.Info>
-        <ResultContext
-          user={file.user}
-          context={{
-            channelId: file.message?.cache?.channel_id,
-            workspaceId: file.message?.cache?.workspace_id,
-            companyId: file.message?.cache?.company_id,
-          }}
-        />
-      </div>
-      <div
-        className="whitespace-nowrap"
-        onClick={e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <Button
-          theme="outline"
-          className="w-9 px-1.5 ml-2 rounded-full border-none"
-          onClick={() => onFileDownloadClick(file)}
-        >
-          <DownloadIcon className="text-blue-500 w-6 h-6" />
-        </Button>
-
-        {!!file.message && (
-          <Button
-            theme="outline"
-            className="w-9 px-1.5 ml-2 rounded-full border-none"
-            onClick={() => {
-              openMessage(file.message as Message, currentWorkspaceId);
-              setOpen(false);
-            }}
-          >
-            <ArrowRight className="text-blue-500 w-6 h-6" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const FileResultMedia = (props: {
-  className?: string;
-  size?: 'md' | 'lg' | 'sm';
-  file: MessageFileType & { message?: Message } & { user?: UserType };
-}) => {
-  const file = props.file;
-
-  const name = file?.metadata?.name;
-  const type = FileUploadAPIClient.mimeToType(file?.metadata?.mime || '');
-  const url = FileUploadAPIClient.getFileThumbnailUrlFromMessageFile(file);
-  const extension = name?.split('.').pop();
-
-  let iconClassName = 'absolute left-0 top-0 bottom-0 right-0 m-auto w-8 h-8';
-  if (url) iconClassName = 'absolute bottom-1 left-1 w-6 h-6';
-
-  return (
-    <div className={'relative flex bg-zinc-200 rounded-md ' + (props.className || '')}>
-      <Media
-        size={props.size || 'md'}
-        url={url}
-        duration={type === 'video' ? extension : undefined}
-      />
-      {(!['image', 'video'].includes(type) || !url) && (
-        <>
-          {type === 'archive' ? (
-            <FileTypeArchiveIcon className={iconClassName} />
-          ) : type === 'pdf' ? (
-            <FileTypePdfIcon className={iconClassName} />
-          ) : type === 'document' ? (
-            <FileTypeDocumentIcon className={iconClassName} />
-          ) : type === 'spreadsheet' ? (
-            <FileTypeSpreadsheetIcon className={iconClassName} />
-          ) : type === 'slides' ? (
-            <FileTypeSlidesIcon className={iconClassName} />
-          ) : (
-            <FileTypeUnknownIcon className={iconClassName} />
-          )}
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/media-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/media-result.tsx
deleted file mode 100644
index cf3acdaa..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/media-result.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
-import { MessageFileType } from '@features/messages/types/message';
-import Media from '@molecules/media';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-
-export default (props: { file: MessageFileType }) => {
-  const file = props.file;
-  const url = FileUploadAPIClient.getFileThumbnailUrlFromMessageFile(file);
-  const type = FileUploadAPIClient.mimeToType(file?.metadata?.mime || '');
-  const { open: openViewer } = useFileViewerModal();
-
-  return (
-    <div
-      className="cursor-pointer hover:opacity-75 inline-block m-2"
-      onClick={() => openViewer(file)}
-    >
-      <Media
-        key={file.id}
-        size="lg"
-        url={url}
-        duration={
-          type === 'video'
-            ? file?.metadata?.name?.split('.').slice(-1)?.[0]?.toLocaleUpperCase()
-            : undefined
-        }
-      />
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/message-result-file.tsx b/tdrive/frontend/src/app/components/search-popup/parts/message-result-file.tsx
deleted file mode 100644
index 0bf3b5fb..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/message-result-file.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as Text from '@atoms/text';
-
-import { Button } from 'app/atoms/button/button';
-import { DownloadIcon } from 'app/atoms/icons-agnostic';
-import { formatDate } from 'app/features/global/utils/format-date';
-import { formatSize } from 'app/features/global/utils/format-file-size';
-import { Message, MessageFileType } from 'app/features/messages/types/message';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import { UserType } from 'app/features/users/types/user';
-import { useFileViewerModal } from 'app/features/viewer/hooks/use-viewer';
-import { ArrowRight } from 'react-feather';
-import Highlighter from 'react-highlight-words';
-import { useRecoilValue } from 'recoil';
-import { onFileDownloadClick, openMessage } from '../common';
-import { FileResultMedia } from './file-result';
-
-export default (props: { file: MessageFileType & { message?: Message } & { user?: UserType } }) => {
-  const input = useRecoilValue(SearchInputState);
-  const currentWorkspaceId = useRouterWorkspace();
-  const file = props.file;
-  const name = file?.metadata?.name;
-  const extension = name?.split('.').pop();
-
-  const { setOpen } = useSearchModal();
-  const { open: openViewer } = useFileViewerModal();
-
-  return (
-    <div
-      className="flex items-center p-2 rounded-md cursor-pointer"
-      onClick={() => openViewer(file)}
-    >
-      <FileResultMedia size="sm" file={file} className=" w-12 h-12 mr-3" />
-      <div className="grow mr-3 overflow-hidden">
-        <Text.Base className="block whitespace-nowrap overflow-hidden text-ellipsis">
-          <Highlighter
-            highlightClassName="text-blue-500 p-0 bg-blue-50"
-            searchWords={input?.query?.split(' ')}
-            autoEscape={true}
-            textToHighlight={name}
-          />
-        </Text.Base>
-        <Text.Info className="block">
-          {extension?.toLocaleUpperCase()} • {formatDate(file?.message?.created_at)} •{' '}
-          {formatSize(file?.metadata?.size)}
-        </Text.Info>
-      </div>
-      <div
-        className="whitespace-nowrap"
-        onClick={e => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <Button
-          theme="outline"
-          className="w-9 px-1.5 ml-2 rounded-full border-none"
-          onClick={() => onFileDownloadClick(file)}
-        >
-          <DownloadIcon className="text-blue-500 w-6 h-6" />
-        </Button>
-
-        {!!file.message && (
-          <Button
-            theme="outline"
-            className="w-9 px-1.5 ml-2 rounded-full border-none"
-            onClick={() => {
-              openMessage(file.message as Message, currentWorkspaceId);
-              setOpen(false);
-            }}
-          >
-            <ArrowRight className="text-blue-500 w-6 h-6" />
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/message-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/message-result.tsx
deleted file mode 100644
index 841a15e3..00000000
--- a/tdrive/frontend/src/app/components/search-popup/parts/message-result.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import A from '@atoms/link';
-import * as Text from '@atoms/text';
-import { formatDate } from '@features/global/utils/format-date';
-import { Message } from '@features/messages/types/message';
-import ChannelAvatar from 'app/components/search-popup/parts/channel-avatar/channel-avatar';
-import { useChannel } from 'app/features/channels/hooks/use-channel';
-import { ChannelType } from 'app/features/channels/types/channel';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import { useUser } from 'app/features/users/hooks/use-user';
-import { UserType } from 'app/features/users/types/user';
-import { useState } from 'react';
-import Highlighter from 'react-highlight-words';
-import { useRecoilValue } from 'recoil';
-import { openMessage } from '../common';
-import MessageResultFile from './message-result-file';
-import ResultContext from './result-context';
-
-export default ({
-  message,
-}: {
-  message: Message & { users?: UserType[]; channel?: ChannelType };
-}) => {
-  const input = useRecoilValue(SearchInputState);
-  const currentWorkspaceId = useRouterWorkspace();
-  const user =
-    (message.users || []).find(u => u.id === message.user_id) || useUser(message.user_id || '');
-  const channel = message.channel || useChannel(message?.cache?.channel_id || '').channel;
-  const [truncated, setTruncated] = useState(true);
-  const { setOpen } = useSearchModal();
-
-  return (
-    <div
-      className="w-full flex items-start p-2 hover:bg-zinc-50 rounded-md cursor-pointer"
-      onClick={() => {
-        openMessage(message, currentWorkspaceId);
-        setOpen(false);
-      }}
-    >
-      <div className="mr-3">
-        {channel && <ChannelAvatar channel={channel} showLabel={false} collapseToOne={true} />}
-      </div>
-      <div className="grow mr-3 overflow-hidden">
-        <div className="messages-title overflow-hidden whitespace-nowrap text-ellipsis">
-          <ResultContext
-            user={user}
-            context={{
-              companyId: message?.cache?.company_id,
-              workspaceId: message?.cache?.workspace_id,
-              channelId: message?.cache?.channel_id,
-            }}
-          />
-        </div>
-        <div className="messages-text">
-          <Text.BaseSmall className="block whitespace-pre-line">
-            <Highlighter
-              highlightClassName="text-blue-500 p-0 bg-blue-50"
-              searchWords={input?.query?.split(' ')}
-              autoEscape={true}
-              textToHighlight={message.text?.substring(0, truncated ? 500 : message.text.length)}
-            />
-            {truncated && (message.text?.length || 0) > 500 && (
-              <A
-                className="ml-3"
-                onClick={(e: any) => {
-                  e.stopPropagation();
-                  setTruncated(false);
-                }}
-              >
-                See more
-              </A>
-            )}
-          </Text.BaseSmall>
-          {(message.files || []).map(file => (
-            <div
-              key={file.id}
-              onClick={(e: any) => e.stopPropagation()}
-              className="rounded-md border bg-white border-gray-200 hover:border-gray-300 mb-1"
-            >
-              <MessageResultFile file={{ ...file, message, user }} />
-            </div>
-          ))}
-        </div>
-        <Text.Info className="block">{formatDate(message.created_at)}</Text.Info>
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/nothing-found.tsx b/tdrive/frontend/src/app/components/search-popup/parts/nothing-found.tsx
index 0c181b32..e3e044d3 100644
--- a/tdrive/frontend/src/app/components/search-popup/parts/nothing-found.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/parts/nothing-found.tsx
@@ -1,6 +1,6 @@
-import { NotFoundIcon } from 'app/atoms/icons-colored';
-import Languages from 'app/features/global/services/languages-service';
-import { SearchInputState } from 'app/features/search/state/search-input';
+import { NotFoundIcon } from '@atoms/icons-colored';
+import Languages from '@features/global/services/languages-service';
+import { SearchInputState } from '@features/search/state/search-input';
 import { useRecoilValue } from 'recoil';
 import * as Text from '@atoms/text';
 
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/nothing-searched.tsx b/tdrive/frontend/src/app/components/search-popup/parts/nothing-searched.tsx
index fe738162..d1f78ee1 100644
--- a/tdrive/frontend/src/app/components/search-popup/parts/nothing-searched.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/parts/nothing-searched.tsx
@@ -1,5 +1,5 @@
-import { NotFoundIcon } from 'app/atoms/icons-colored';
-import Languages from 'app/features/global/services/languages-service';
+import { NotFoundIcon } from '@atoms/icons-colored';
+import Languages from '@features/global/services/languages-service';
 import * as Text from '@atoms/text';
 
 export default () => {
diff --git a/tdrive/frontend/src/app/components/search-popup/parts/result-context.tsx b/tdrive/frontend/src/app/components/search-popup/parts/result-context.tsx
index 3d7cd531..2376aa2e 100644
--- a/tdrive/frontend/src/app/components/search-popup/parts/result-context.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/parts/result-context.tsx
@@ -1,62 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import A from '@atoms/link';
-import { getChannel } from '@features/channels/hooks/use-channel';
-import { UserType } from '@features/users/types/user';
-import { useWorkspace } from '@features/workspaces/hooks/use-workspaces';
 import UsersService from '@features/users/services/current-user-service';
-import RouterServices from '@features/router/services/router-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-
-export default ({
-  user,
-  context,
-}: {
-  user?: UserType;
-  context?: { channelId?: string; workspaceId?: string; companyId?: string };
-}) => {
-  const channel = getChannel(context?.channelId || '');
-
-  const routerWorkspace = useRouterWorkspace();
-  const routerCompany = useRouterCompany();
-  const workspaceId =
-    (context?.workspaceId !== 'direct' ? context?.workspaceId : '') || routerWorkspace;
-  const { workspace } = useWorkspace(workspaceId || '');
-  const companyId = context?.companyId || routerCompany;
-
-  const { setOpen } = useSearchModal();
-
-  const workspaceName =
-    context?.workspaceId === 'direct' ? 'Direct' : workspace?.name ? workspace?.name : '';
+import { UserType } from '@features/users/types/user';
 
+export default ({ user }: { user?: UserType }) => {
   return (
     <div className="flex overflow-hidden whitespace-nowrap text-ellipsis">
       {!!user && <>{UsersService.getFullName(user)}</>}
-      {!!user && !!(channel || workspaceName) && <span className="mx-2"> {'->'} </span>}
-      {(channel || workspaceName) && (
-        <>
-          {!!workspaceName && <span className="opacity-50">{workspaceName}</span>}
-          {!!workspaceName && !!channel?.name && <span className="mx-2"> / </span>}
-          {!!channel?.name && (
-            <A
-              onClick={(e: any) => {
-                e.stopPropagation();
-                setOpen(false);
-                RouterServices.push(
-                  RouterServices.generateRouteFromState({
-                    companyId: companyId || '',
-                    workspaceId: workspaceId || '',
-                    channelId: context?.channelId || '',
-                  }),
-                );
-              }}
-            >
-              {channel?.name}
-            </A>
-          )}
-        </>
-      )}
     </div>
   );
 };
diff --git a/tdrive/frontend/src/app/components/search-popup/search-input.tsx b/tdrive/frontend/src/app/components/search-popup/search-input.tsx
index f8f5352b..46c66148 100755
--- a/tdrive/frontend/src/app/components/search-popup/search-input.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/search-input.tsx
@@ -1,19 +1,12 @@
-import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
 import { SearchIcon } from '@heroicons/react/solid';
-import { Input } from 'app/atoms/input/input-text';
-import { Loader } from 'app/atoms/loader';
-import Languages from 'app/features/global/services/languages-service';
-import { useSearchChannelsLoading } from 'app/features/search/hooks/use-search-channels';
-import {
-  useSearchMessagesFilesLoading,
-  useSearchMessagesMediasLoading,
-} from 'app/features/search/hooks/use-search-files-or-medias';
-import { useSearchDriveItemsLoading } from 'app/features/search/hooks/use-search-drive-items';
-import { useSearchMessagesLoading } from 'app/features/search/hooks/use-search-messages';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import _ from 'lodash';
 import { useEffect, useRef } from 'react';
 import { useRecoilState } from 'recoil';
+import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
+import { Input } from '@atoms/input/input-text';
+import { Loader } from '@atoms/loader';
+import Languages from '@features/global/services/languages-service';
+import { useSearchDriveItemsLoading } from '@features/search/hooks/use-search-drive-items';
+import { SearchInputState } from '@features/search/state/search-input';
 
 export const SearchInput = () => {
   const [input, setInput] = useRecoilState(SearchInputState);
@@ -23,14 +16,9 @@ export const SearchInput = () => {
     if (inputElement.current) inputElement.current.focus();
   }, []);
 
-  const channelsLoading = useSearchChannelsLoading();
-  const messagesLoading = useSearchMessagesLoading();
-  const filesLoading = useSearchMessagesFilesLoading();
-  const mediasLoading = useSearchMessagesMediasLoading();
   const driveItemsLoading = useSearchDriveItemsLoading();
 
-  const loading =
-    channelsLoading || messagesLoading || filesLoading || mediasLoading || driveItemsLoading;
+  const loading = driveItemsLoading;
 
   return (
     <div className="relative flex mt-2 w-full">
diff --git a/tdrive/frontend/src/app/components/search-popup/search-popup.tsx b/tdrive/frontend/src/app/components/search-popup/search-popup.tsx
index 54fdc23e..291190b6 100755
--- a/tdrive/frontend/src/app/components/search-popup/search-popup.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/search-popup.tsx
@@ -1,6 +1,6 @@
 import { Modal, ModalContent } from '@atoms/modal';
-import Languages from 'app/features/global/services/languages-service';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
+import Languages from '@features/global/services/languages-service';
+import { useSearchModal } from '@features/search/hooks/use-search';
 import { SearchInput } from './search-input';
 import { SearchResultsIndex } from './search-tabs';
 
diff --git a/tdrive/frontend/src/app/components/search-popup/tabs/all.tsx b/tdrive/frontend/src/app/components/search-popup/tabs/all.tsx
deleted file mode 100644
index 6b5f4a3b..00000000
--- a/tdrive/frontend/src/app/components/search-popup/tabs/all.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as Text from '@atoms/text';
-import A from 'app/atoms/link';
-import Languages from 'app/features/global/services/languages-service';
-import { useSearchChannels } from 'app/features/search/hooks/use-search-channels';
-import {
-  useSearchMessagesFiles,
-  useSearchMessagesMedias,
-} from 'app/features/search/hooks/use-search-files-or-medias';
-import { useSearchMessages } from 'app/features/search/hooks/use-search-messages';
-import { SearchInputState, SearchTabsState } from 'app/features/search/state/search-input';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { ChannelsResults, ChannelsRowResults } from './channels';
-import { FilesResults } from './files';
-import { MediasResults } from './medias';
-import { MessagesResults } from './messages';
-
-export default () => {
-  const setTab = useSetRecoilState(SearchTabsState);
-
-  const input = useRecoilValue(SearchInputState);
-  const isRecent = input?.query?.trim()?.length === 0;
-
-  const { channels } = useSearchChannels();
-  const { messages } = useSearchMessages();
-  const { files } = useSearchMessagesFiles();
-  const { files: medias } = useSearchMessagesMedias();
-
-  return (
-    <div className="-mt-4">
-      {channels.length > 0 && (
-        <>
-          <div className="flex mt-4">
-            <Text.Subtitle className="block grow">
-              {isRecent
-                ? Languages.t('components.searchpopup.recent_channels_and_contacts')
-                : Languages.t('components.searchpopup.channels')}
-            </Text.Subtitle>
-            {channels.length > 6 && (
-              <div className="w-auto">
-                <A onClick={() => setTab('channels')}>
-                  {Languages.t('components.searchpopup.see_more')}
-                </A>
-              </div>
-            )}
-          </div>
-          {isRecent && (
-            <div className="-mx-2 mt-2">
-              <ChannelsRowResults max={6} />
-            </div>
-          )}
-          {!isRecent && (
-            <div className="-mx-2">
-              <ChannelsResults max={6} />
-            </div>
-          )}
-        </>
-      )}
-
-      {medias.length > 0 && (
-        <>
-          <div className="flex mt-4">
-            <Text.Subtitle className="block grow">
-              {isRecent
-                ? Languages.t('components.searchpopup.recent_media')
-                : Languages.t('components.searchpopup.media')}
-            </Text.Subtitle>
-            {medias.length > 6 && (
-              <div className="w-auto">
-                <A onClick={() => setTab('medias')}>
-                  {Languages.t('components.searchpopup.see_more')}
-                </A>
-              </div>
-            )}
-          </div>
-          <div className={'-mx-2'}>
-            <MediasResults max={6} showAsFiles={!isRecent} />
-          </div>
-        </>
-      )}
-
-      {files.length > 0 && (
-        <>
-          <div className="flex mt-4">
-            <Text.Subtitle className="block grow">
-              {isRecent
-                ? Languages.t('components.searchpopup.recent_files')
-                : Languages.t('components.searchpopup.files')}
-            </Text.Subtitle>
-            {files.length > 6 && (
-              <div className="w-auto">
-                <A onClick={() => setTab('files')}>
-                  {Languages.t('components.searchpopup.see_more')}
-                </A>
-              </div>
-            )}
-          </div>
-          <div className={'-mx-2'}>
-            <FilesResults max={6} />
-          </div>
-        </>
-      )}
-
-      {messages.length > 0 && (
-        <>
-          <div className="flex mt-4">
-            <Text.Subtitle className="block grow">
-              {Languages.t('components.searchpopup.messages')}
-            </Text.Subtitle>
-          </div>
-          <div className="-mx-2">
-            <MessagesResults />
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/tabs/channels.tsx b/tdrive/frontend/src/app/components/search-popup/tabs/channels.tsx
deleted file mode 100644
index cb3d9052..00000000
--- a/tdrive/frontend/src/app/components/search-popup/tabs/channels.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as Text from '@atoms/text';
-import Languages from 'app/features/global/services/languages-service';
-import { useSearchChannels } from 'app/features/search/hooks/use-search-channels';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import { useRecoilValue } from 'recoil';
-import ChannelLineResult from '../parts/channel-line-result';
-import ChannelResult from '../parts/channel-result';
-import NothingFound from '../parts/nothing-found';
-
-export default () => {
-  const input = useRecoilValue(SearchInputState);
-  const isRecent = input?.query?.trim()?.length === 0;
-  const { channels, loading } = useSearchChannels();
-
-  if (channels.length === 0 && !loading) return <NothingFound />;
-
-  const topChannels = channels
-    .slice()
-    .filter(a => Date.now() - (a.last_activity || 0) < 1000 * 60 * 60 * 24 * 31)
-    .sort((a, b) => Math.min(50, b?.stats?.messages || 0) - Math.min(50, a?.stats?.messages || 0))
-    .slice(0, 5);
-
-  return (
-    <div>
-      {!!isRecent && !!topChannels.length && (
-        <div className="mb-4">
-          <Text.Subtitle className="block">
-            {Languages.t('components.searchpopup.recent_channels_and_contacts')}
-          </Text.Subtitle>
-
-          <div className="-mx-2 mt-2 items-top">
-            {topChannels.map(channel => (
-              <div
-                className="mx-2 inline-block align-top	hover:opacity-75 cursor-pointer"
-                key={channel.id}
-              >
-                <ChannelResult channel={channel} />
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {!!isRecent && (
-        <Text.Subtitle className="block">
-          {Languages.t('components.searchpopup.channels')}
-        </Text.Subtitle>
-      )}
-      <div className={'-mx-2'}>
-        <ChannelsResults />
-      </div>
-    </div>
-  );
-};
-
-export const ChannelsRowResults = (props: { max?: number }) => {
-  const { channels, loading } = useSearchChannels();
-
-  if (channels.length === 0 && !loading) return <NothingFound />;
-
-  return (
-    <>
-      {channels.slice(0, props?.max || channels.length).map(channel => (
-        <div
-          className="mx-2 inline-block align-top	hover:opacity-75 cursor-pointer"
-          key={channel.id}
-        >
-          <ChannelResult channel={channel} />
-        </div>
-      ))}
-    </>
-  );
-};
-
-export const ChannelsResults = (props: { max?: number }) => {
-  const { channels, loading } = useSearchChannels();
-
-  if (channels.length === 0 && !loading) return <NothingFound />;
-
-  return (
-    <>
-      {channels.slice(0, props?.max || channels.length).map(channel => (
-        <ChannelLineResult key={channel.id} channel={channel} />
-      ))}
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/tabs/drive.tsx b/tdrive/frontend/src/app/components/search-popup/tabs/drive.tsx
index 8b6dc2ea..7551fd76 100644
--- a/tdrive/frontend/src/app/components/search-popup/tabs/drive.tsx
+++ b/tdrive/frontend/src/app/components/search-popup/tabs/drive.tsx
@@ -1,7 +1,7 @@
 import * as Text from '@atoms/text';
-import Languages from 'app/features/global/services/languages-service';
-import { useSearchDriveItems } from 'app/features/search/hooks/use-search-drive-items';
-import { SearchInputState } from 'app/features/search/state/search-input';
+import Languages from '@features/global/services/languages-service';
+import { useSearchDriveItems } from '@features/search/hooks/use-search-drive-items';
+import { SearchInputState } from '@features/search/state/search-input';
 import { useRecoilValue } from 'recoil';
 import DriveItemResult from '../parts/drive-item-result';
 import NothingFound from '../parts/nothing-found';
diff --git a/tdrive/frontend/src/app/components/search-popup/tabs/files.tsx b/tdrive/frontend/src/app/components/search-popup/tabs/files.tsx
deleted file mode 100644
index 6a6d18cc..00000000
--- a/tdrive/frontend/src/app/components/search-popup/tabs/files.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as Text from '@atoms/text';
-import Languages from 'app/features/global/services/languages-service';
-import { useSearchMessagesFiles } from 'app/features/search/hooks/use-search-files-or-medias';
-import { SearchInputState } from 'app/features/search/state/search-input';
-import { useRecoilValue } from 'recoil';
-import FileResult from '../parts/file-result';
-import NothingFound from '../parts/nothing-found';
-
-export default () => {
-  const input = useRecoilValue(SearchInputState);
-  const isRecent = input?.query?.trim()?.length === 0;
-  const { files, loading } = useSearchMessagesFiles();
-
-  if (files.length === 0 && !loading) return <NothingFound />;
-
-  return (
-    <div>
-      {!!isRecent && (
-        <Text.Subtitle className="block">
-          {Languages.t('components.searchpopup.recent_files')}
-        </Text.Subtitle>
-      )}
-
-      <div className={'-mx-2'}>
-        <FilesResults />
-      </div>
-    </div>
-  );
-};
-
-export const FilesResults = (props: { max?: number }) => {
-  const { files, loading } = useSearchMessagesFiles();
-
-  if (files.length === 0 && !loading) return <NothingFound />;
-
-  return (
-    <>
-      {files.slice(0, props?.max || files.length).map(file => (
-        <FileResult key={file.id} file={file} />
-      ))}
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/tabs/medias.tsx b/tdrive/frontend/src/app/components/search-popup/tabs/medias.tsx
deleted file mode 100644
index 76ce0373..00000000
--- a/tdrive/frontend/src/app/components/search-popup/tabs/medias.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as Text from '@atoms/text';
-import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
-import Languages from '@features/global/services/languages-service';
-import { useSearchMessagesMedias } from '@features/search/hooks/use-search-files-or-medias';
-import { SearchInputState } from '@features/search/state/search-input';
-import { useRecoilValue } from 'recoil';
-import FileResult from '../parts/file-result';
-import MediaResult from '../parts/media-result';
-import NothingFound from '../parts/nothing-found';
-
-export default () => {
-  const input = useRecoilValue(SearchInputState);
-  const isRecent = input?.query?.trim()?.length === 0;
-
-  return (
-    <div>
-      {!!isRecent && (
-        <Text.Subtitle className="block">
-          {Languages.t('components.searchpopup.recent_media')}
-        </Text.Subtitle>
-      )}
-
-      <div className="-mx-2">
-        <MediasResults showAsFiles={!isRecent} />
-      </div>
-    </div>
-  );
-};
-
-export const MediasResults = (props: { max?: number; showAsFiles?: boolean }) => {
-  const { files, loading } = useSearchMessagesMedias();
-
-  if (files.length === 0 && !loading) return <NothingFound />;
-
-  return (
-    <>
-      {files
-        .slice(0, props?.max || files.length)
-        .map(file => {
-          const url = FileUploadAPIClient.getFileThumbnailUrlFromMessageFile(file);
-          if (url || props.showAsFiles)
-            return props.showAsFiles ? (
-              <FileResult key={file.id} file={file} />
-            ) : (
-              <MediaResult key={file.id} file={file} />
-            );
-        })
-        .filter(a => a)}
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/search-popup/tabs/messages.tsx b/tdrive/frontend/src/app/components/search-popup/tabs/messages.tsx
deleted file mode 100644
index 8d5231de..00000000
--- a/tdrive/frontend/src/app/components/search-popup/tabs/messages.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { SearchInputState } from '@features/search/state/search-input';
-import { useSearchMessages } from 'app/features/search/hooks/use-search-messages';
-import { useRecoilValue } from 'recoil';
-import MessageResult from '../parts/message-result';
-import NothingFound from '../parts/nothing-found';
-import NothingSearched from '../parts/nothing-searched';
-
-export default () => {
-  return (
-    <div>
-      <div className="-mx-2">
-        <MessagesResults />
-      </div>
-    </div>
-  );
-};
-
-export const MessagesResults = () => {
-  const input = useRecoilValue(SearchInputState);
-  const isRecent = input?.query?.trim()?.length === 0;
-  const { messages, loading } = useSearchMessages();
-
-  if (isRecent) return <NothingSearched />;
-  if (messages.length === 0 && !loading) return <NothingFound />;
-
-  return (
-    <>
-      <div className="">
-        {messages
-          .map(message => {
-            return (
-              <div key={message.id} className="cursor-pointer block w-full">
-                <MessageResult message={message} />
-              </div>
-            );
-          })
-          .filter(a => a)}
-      </div>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/select/select.jsx b/tdrive/frontend/src/app/components/select/select.jsx
index 25f7094b..febb0178 100755
--- a/tdrive/frontend/src/app/components/select/select.jsx
+++ b/tdrive/frontend/src/app/components/select/select.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import Icon from 'app/components/icon/icon.jsx';
+import MenusManager from '@components/menus/menus-manager.jsx';
+import Icon from '@components/icon/icon.jsx';
 import './select.scss';
 
 export default class Select extends React.Component {
diff --git a/tdrive/frontend/src/app/components/table/table.tsx b/tdrive/frontend/src/app/components/table/table.tsx
index a1660bd5..8180e99c 100755
--- a/tdrive/frontend/src/app/components/table/table.tsx
+++ b/tdrive/frontend/src/app/components/table/table.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { Component } from 'react';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import Button from 'components/buttons/button.jsx';
 import InputIcon from 'components/inputs/input-icon.jsx';
 import './table.scss';
diff --git a/tdrive/frontend/src/app/components/tabs/tabs.jsx b/tdrive/frontend/src/app/components/tabs/tabs.jsx
index b02fbfd3..3cae0e4e 100755
--- a/tdrive/frontend/src/app/components/tabs/tabs.jsx
+++ b/tdrive/frontend/src/app/components/tabs/tabs.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import './tabs.scss';
 
diff --git a/tdrive/frontend/src/app/components/tag-picker/tag-picker.jsx b/tdrive/frontend/src/app/components/tag-picker/tag-picker.jsx
index 90fb2da1..a1986961 100755
--- a/tdrive/frontend/src/app/components/tag-picker/tag-picker.jsx
+++ b/tdrive/frontend/src/app/components/tag-picker/tag-picker.jsx
@@ -1,14 +1,14 @@
 /* eslint-disable react/jsx-key */
 /* eslint-disable react/no-direct-mutation-state */
 import React, { Component } from 'react';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import Button from 'components/buttons/button.jsx';
 import './tag-picker.scss';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import MenusManager from '@components/menus/menus-manager.jsx';
 import TagSelector from './tag-selector.jsx';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Languages from 'app/features/global/services/languages-service';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import Languages from '@features/global/services/languages-service';
 
 export default class TagPicker extends React.Component {
   constructor(props) {
diff --git a/tdrive/frontend/src/app/components/tag-picker/tag-selector.jsx b/tdrive/frontend/src/app/components/tag-picker/tag-selector.jsx
index 63ed8d32..e91086fd 100755
--- a/tdrive/frontend/src/app/components/tag-picker/tag-selector.jsx
+++ b/tdrive/frontend/src/app/components/tag-picker/tag-selector.jsx
@@ -2,15 +2,15 @@
 import React, { Component } from 'react';
 import Picker from 'components/picker/picker.jsx';
 import Button from 'components/buttons/button.jsx';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Icon from 'app/components/icon/icon.jsx';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import Icon from '@components/icon/icon.jsx';
 import ColorPicker from 'components/color-picker/color-picker.jsx';
-import Strings from 'app/features/global/utils/strings';
+import Strings from '@features/global/utils/strings';
 import InputWithColor from 'components/inputs/input-with-color.jsx';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import Languages from 'app/features/global/services/languages-service';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
+import AlertManager from '@features/global/services/alert-manager-service';
+import Languages from '@features/global/services/languages-service';
+import MenusManager from '@components/menus/menus-manager.jsx';
 
 class TagEditor extends React.Component {
   constructor(props) {
diff --git a/tdrive/frontend/src/app/components/task-picker/task-picker.jsx b/tdrive/frontend/src/app/components/task-picker/task-picker.jsx
index 189de0d6..dc134cd2 100755
--- a/tdrive/frontend/src/app/components/task-picker/task-picker.jsx
+++ b/tdrive/frontend/src/app/components/task-picker/task-picker.jsx
@@ -1,12 +1,12 @@
 /* eslint-disable react/jsx-key */
 import React, { Component } from 'react';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
 import Button from 'components/buttons/button.jsx';
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
+import Languages from '@features/global/services/languages-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
 import Emojione from 'components/emojione/emojione';
 import Loader from 'components/loader/loader.jsx';
-import TasksService from 'app/deprecated/Apps/Tasks/Tasks.js';
+import TasksService from '@deprecated/Apps/Tasks/Tasks.js';
 import LeftIcon from '@material-ui/icons/KeyboardArrowLeftOutlined';
 
 import './task-picker.scss';
diff --git a/tdrive/frontend/src/app/components/twacode/blocks/chan.tsx b/tdrive/frontend/src/app/components/twacode/blocks/chan.tsx
deleted file mode 100755
index c05db283..00000000
--- a/tdrive/frontend/src/app/components/twacode/blocks/chan.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import Emojione from 'components/emojione/emojione';
-import MainViewService from 'app/features/router/services/main-view-service';
-import { useChannel } from 'app/features/channels/hooks/use-channel';
-
-type PropsType = {
-  // channel id
-  id: string;
-  // channel name
-  name: string;
-};
-
-export default (props: PropsType): JSX.Element => {
-  const { channel } = useChannel(props.id);
-
-  if (!props.id || !channel) {
-    return <span>#{props.name}</span>;
-  }
-
-  return (
-    <div
-      className="channel_twacode"
-      onClick={() => {
-        MainViewService.select(props.id, {
-          app: {
-            identity: {
-              code: 'messages',
-              name: '',
-              icon: '',
-              description: '',
-              website: '',
-              categories: [],
-              compatibility: [],
-            },
-          },
-          context: { type: 'channel' },
-          hasTabs: channel.visibility !== 'direct',
-        });
-      }}
-    >
-      <Emojione type={channel.icon || ''} />
-      {channel.name}
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/components/twacode/blocks/user.tsx b/tdrive/frontend/src/app/components/twacode/blocks/user.tsx
deleted file mode 100644
index e3704a31..00000000
--- a/tdrive/frontend/src/app/components/twacode/blocks/user.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import UserService from 'app/features/users/services/current-user-service';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import UserCard from 'app/components/user-card/user-card';
-import { UserType } from 'app/features/users/types/user';
-import { useUser, useUserByUsername } from 'app/features/users/hooks/use-user';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
-import { useDirectChannels } from 'app/features/channels/hooks/use-direct-channels';
-
-const globalMentions = ['channel', 'everyone', 'all', 'here'];
-
-type PropsType = {
-  // User id
-  id?: string;
-  // user username
-  username?: string;
-  // should we hide the user image?
-  hideUserImage?: boolean;
-};
-
-export default (props: PropsType): JSX.Element => {
-  const { openDiscussion } = useDirectChannels();
-  const collection = Collections.get('users');
-  const nodeRef = useRef<HTMLDivElement>(null);
-  let user: UserType | undefined;
-  if (props.id) {
-    user = useUser(props.id || '');
-  } else {
-    user = useUserByUsername(props.username || '');
-  }
-
-  useEffect(() => {
-    const listener = collection.addListener(useState, [user]);
-
-    return () => {
-      collection.removeListener(listener);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user]);
-
-  const displayUserCard = (user: UserType): void => {
-    if (!nodeRef.current) {
-      return;
-    }
-
-    MenusManager.openMenu(
-      [
-        {
-          type: 'react-element',
-          reactElement: () => (
-            <UserCard user={user} onClick={() => openDiscussion([user.id || ''])} />
-          ),
-        },
-      ],
-      (window as any).getBoundingClientRect(nodeRef.current),
-      null,
-      { margin: 8 },
-    );
-  };
-
-  const highlighted =
-    user?.id === UserService.getCurrentUserId() ||
-    globalMentions.includes(props.username || props.id || '');
-
-  if (user) {
-    return (
-      <div
-        ref={nodeRef}
-        className={classNames('user_twacode with_user', {
-          highlighted: highlighted && !props.hideUserImage,
-        })}
-        onClick={() => displayUserCard(user as UserType)}
-        style={{
-          paddingLeft: props.hideUserImage ? 5 : 0,
-          backgroundColor: props.hideUserImage ? 'var(--grey-background)' : '',
-        }}
-      >
-        {!props.hideUserImage && (
-          <div
-            className="userimage"
-            style={{ backgroundImage: `url('${UserService.getThumbnail(user)}')` }}
-          />
-        )}
-        {UserService.getFullName(user)}
-      </div>
-    );
-  } else {
-    return (
-      <span className={classNames('user_twacode', { highlighted })}>
-        @{props.username || 'unknown'}
-      </span>
-    );
-  }
-};
diff --git a/tdrive/frontend/src/app/components/twacode/blocksCompiler.ts b/tdrive/frontend/src/app/components/twacode/blocksCompiler.ts
deleted file mode 100644
index 1028b0b1..00000000
--- a/tdrive/frontend/src/app/components/twacode/blocksCompiler.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  Block,
-  BlockActions,
-  BlockContext,
-  BlockDivider,
-  BlockElementButton,
-  BlockElementCheckboxes,
-  BlockElementDatePicker,
-  BlockElementImage,
-  BlockElementMultiselectMenu,
-  BlockElementOverflowMenus,
-  BlockElementProgressBar,
-  BlockElementRadioButtonInput,
-  BlockElementSelectMenus,
-  BlockIframe,
-  BlockImage,
-  BlockInput,
-  BlockSection,
-} from './types';
-
-export const formatData = (
-  object: any,
-  content: any,
-  flatted: Block[],
-  level: number | null = null,
-) => {
-  for (let i = 0; i < object.length; i++) {
-    const recursif =
-      object[content] && typeof object[content] !== 'string' ? { ...object[content] } : null;
-
-    delete object[content];
-    flatted.push(object[i]);
-    const currentLevel = level ? level + 1 : 1;
-    if (recursif) {
-      formatData(recursif, content, flatted, currentLevel);
-    }
-  }
-};
-
-export const blocksToTwacode = (event: Block[]) => {
-  const blocks: any[] = [];
-
-  event.forEach((obj: Block) => {
-    let object = obj;
-
-    switch (object.type) {
-      case 'actions':
-        object = object as BlockActions;
-        for (let i = 0; i < object.elements.length; i++) {
-          const element = object.elements[i];
-          createTwacodeElements(element, blocks);
-        }
-        lineBreak(blocks);
-        break;
-      case 'context':
-        object = object as BlockContext;
-        for (let i = 0; i < object.elements.length; i++) {
-          const element = object.elements[i];
-          createTwacodeElements(element, blocks);
-        }
-        lineBreak(blocks);
-        break;
-      case 'divider':
-        object = object as BlockDivider;
-        blocks.push(blocks);
-        break;
-      case 'header':
-        createTwacodeElements({ type: 'mrkdwn', text: `\n **${object.text.text}** \n` }, blocks);
-
-        break;
-      case 'image':
-        object = object as BlockImage;
-        createTwacodeElements(object, blocks, object.type);
-        lineBreak(blocks);
-        break;
-
-      case 'input':
-        object = object as BlockInput;
-        createTwacodeElements(object, blocks);
-        break;
-      case 'section':
-        object = object as BlockSection;
-        if (object.text) {
-          createTwacodeElements(object.text, blocks);
-          lineBreak(blocks);
-        }
-        if (object.fields) {
-          for (let i = 0; i < object.fields.length; i++) {
-            const element = object.fields[i];
-            createTwacodeElements(element, blocks);
-            lineBreak(blocks);
-          }
-        }
-        if (object.accessory) {
-          const element = object.accessory;
-          createTwacodeElements(element, blocks);
-        }
-        lineBreak(blocks);
-
-        break;
-      case 'iframe':
-        object = object as BlockIframe;
-        createTwacodeElements(
-          {
-            type: 'iframe',
-            src: object.iframe_url,
-            width: object.width,
-            height: object.height,
-          },
-          blocks,
-          object.type,
-        );
-        break;
-      case 'twacode':
-        blocks.push(object.elements);
-        break;
-      default:
-      // TODO
-    }
-  });
-  return blocks;
-};
-
-const createTwacodeElements = (object: any, blocks: any[], type?: any) => {
-  switch (object.type) {
-    case 'button':
-      object = object as BlockElementButton;
-      blocks.push({
-        type: 'button',
-        content:
-          object.text.emoji === true
-            ? { type: 'compile', content: object.text.text }
-            : object.text.text,
-        action_id: object.action_id,
-        value: object.value,
-        style: object.style ? object.style : 'default',
-        url: object.url,
-      });
-      break;
-    case 'checkboxes':
-      object = object as BlockElementCheckboxes;
-      blocks.push({ type: 'checkboxes' });
-      break;
-    case 'datepicker':
-      object = object as BlockElementDatePicker;
-      blocks.push({ type: 'datepicker' });
-      break;
-    case 'image':
-      object = object as BlockElementImage;
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      object.title
-        ? blocks.push({
-            type: 'system',
-            content: {
-              type: 'compile',
-              content: object.title.text + '\n',
-            },
-          })
-        : null;
-
-      blocks.push({
-        type: type === 'image' ? 'image' : 'icon',
-        src: object.image_url,
-      });
-      break;
-    case 'progress_bar':
-      object = object as BlockElementProgressBar;
-      blocks.push({
-        type: 'compile',
-        content: object.title + '\n',
-      });
-      blocks.push({
-        type: 'progress_bar',
-        value: object.value,
-      });
-      break;
-    case 'multi_static_select':
-      object = object as BlockElementMultiselectMenu;
-      blocks.push(generateSelect(object));
-      break;
-    case 'overflow':
-      object = object as BlockElementOverflowMenus;
-      blocks.push(generateSelect(object));
-      break;
-    case 'input':
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      object.label.text
-        ? createTwacodeElements(
-            { type: 'mrkdwn', text: `**${object.label.text}** \n` },
-            blocks,
-            type,
-          )
-        : null;
-      createTwacodeElements(object.element, blocks, type);
-
-      break;
-    case 'plain_text_input':
-      if (object.readonly === true && object.copiable === true) {
-        blocks.push({
-          type: 'copiable',
-          content: object.initial_value ? object.initial_value : '',
-        });
-      } else {
-        blocks.push({
-          type: 'input',
-          placeholder: object.placeholder ? object.placeholder.text : null,
-          passive_id: object.action_id,
-        });
-        lineBreak(blocks);
-      }
-      break;
-    case 'radio_buttons':
-      object = object as BlockElementRadioButtonInput;
-      blocks.push(generateSelect(object));
-      break;
-    case 'static_select':
-      object = object as BlockElementSelectMenus;
-      blocks.push(generateSelect(object));
-      break;
-    case 'timepicker':
-      //not implemented yet
-      break;
-    case 'context':
-      if (object.elements[0].type === 'mrkdwn') {
-        createTwacodeElements(object.elements[0], blocks);
-      } else {
-        createTwacodeElements(object.elements[0], blocks);
-      }
-      break;
-    case 'mrkdwn':
-      blocks.push({
-        type: 'compile',
-        content: object.text,
-      });
-      break;
-    case 'plain_text':
-      blocks.push({
-        type: 'text',
-        content: object.text,
-      });
-      break;
-    default:
-    // TODO
-  }
-};
-
-const generateSelect = (object: any) => {
-  return {
-    type: 'select',
-    //placeholder not yet implemented
-    title: '',
-    values: object.options.map((option: any) => {
-      return { name: option.text.text, value: option.value };
-    }),
-    action_id: object.action_id,
-  };
-};
-
-const lineBreak = (blocks: any[]) => {
-  createTwacodeElements({ type: 'mrkdwn', text: '\n' }, blocks);
-};
diff --git a/tdrive/frontend/src/app/components/twacode/compile.tsx b/tdrive/frontend/src/app/components/twacode/compile.tsx
deleted file mode 100644
index f8f9d818..00000000
--- a/tdrive/frontend/src/app/components/twacode/compile.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import _ from 'lodash';
-import React from 'react';
-import PseudoMarkdownCompiler from 'app/features/global/services/pseudo-markdown-compiler-service';
-import { DynamicComponent } from './pseudo-markdown-dictionary';
-
-type Props = {
-  content: any;
-  isApp: boolean;
-  eventContainer: any;
-  textTransform?: any;
-};
-
-const Compile = (props: Props) => {
-  let content = props.content;
-  const isApp = props.isApp;
-  const eventContainer = props.eventContainer;
-  let textTransform = props.textTransform;
-
-  if (!content) {
-    return PseudoMarkdownCompiler.pseudo_markdown['text'].object('');
-  }
-
-  if (!textTransform) textTransform = {};
-  if (content.formatted || content.prepared) content = content.formatted || content.prepared;
-  if (typeof content === 'string') content = [content];
-  if (content.type || content.start) content = [content];
-
-  if (!_.isArray(content)) {
-    content = [content];
-  }
-
-  try {
-    return (
-      <>
-        {content.map((item: any, index: number) => {
-          if (typeof item === 'string') {
-            return (
-              <span key={JSON.stringify(item) + index} style={textTransform || {}}>
-                {item}
-              </span>
-            );
-          } else if (Array.isArray(item)) {
-            return (
-              <Compile
-                key={JSON.stringify(item) + index}
-                content={item || ''}
-                isApp={isApp}
-                eventContainer={eventContainer}
-                textTransform={textTransform}
-              />
-            );
-          } else {
-            let type = PseudoMarkdownCompiler.pseudo_markdown[item.start];
-            if (item.type === 'compile' && isApp && typeof item.content === 'string') {
-              return (
-                <Compile
-                  key={JSON.stringify(item) + index}
-                  content={PseudoMarkdownCompiler.compileToJSON(item.content)}
-                  isApp={isApp}
-                  eventContainer={eventContainer}
-                  textTransform={textTransform}
-                />
-              );
-            } else {
-              if (item.type) {
-                type = PseudoMarkdownCompiler.pseudo_markdown_types[item.type];
-              }
-              if (type) {
-                if (!type.apps_only || isApp) {
-                  //If text transform do it
-                  const old_textTransform = JSON.parse(JSON.stringify(textTransform));
-                  textTransform = JSON.parse(JSON.stringify(textTransform));
-                  if (type.textTransform) {
-                    Object.keys(type.textTransform).forEach(key => {
-                      textTransform[key] = type.textTransform[key];
-                    });
-                  }
-
-                  textTransform = old_textTransform;
-
-                  return (
-                    <span key={JSON.stringify(item) + index}>
-                      <DynamicComponent
-                        type={type.name || item.type}
-                        child={
-                          <Compile
-                            content={item.content || ''}
-                            isApp={isApp}
-                            eventContainer={eventContainer}
-                            textTransform={textTransform}
-                          />
-                        }
-                        data={item}
-                        eventContainer={eventContainer}
-                        textTransform={textTransform}
-                      />
-                    </span>
-                  );
-                }
-              }
-            }
-          }
-        })}
-      </>
-    );
-  } catch (e) {
-    //Nothing
-  }
-
-  return (
-    <span style={textTransform || {}}>
-      An error occured while showing PseudoMarkdownCompiler message.
-    </span>
-  );
-};
-
-export default Compile;
diff --git a/tdrive/frontend/src/app/components/twacode/pseudo-markdown-dictionary.tsx b/tdrive/frontend/src/app/components/twacode/pseudo-markdown-dictionary.tsx
deleted file mode 100644
index 5af617f0..00000000
--- a/tdrive/frontend/src/app/components/twacode/pseudo-markdown-dictionary.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { ReactNode } from 'react';
-
-import Emojione from 'components/emojione/emojione';
-import HighlightedCode from 'components/highlighted-code/highlighted-code';
-import User from './blocks/user';
-import Chan from './blocks/chan';
-import File from 'components/drive/file';
-import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board.jsx';
-import UserService from 'app/features/users/services/current-user-service';
-import Button from 'components/buttons/button.jsx';
-import Input from 'components/inputs/input.jsx';
-
-export const DynamicComponent = ({
-  type,
-  child,
-  data,
-  eventContainer,
-  textTransform,
-}: {
-  type?: string;
-  child?: ReactNode;
-  data?: any;
-  eventContainer?: any;
-  textTransform?: any;
-}) => {
-  if (type === 'text_block_parent') {
-    return <span style={textTransform || {}}>{child}</span>;
-  }
-  if (type === 'text') {
-    return <span style={textTransform || {}}>{child}</span>;
-  }
-  if (type === 'br') {
-    return (
-      <>
-        <br />
-        <span>{child}</span>
-      </>
-    );
-  }
-  if (type === 'emoji') {
-    return <Emojione type={':' + (data.content || '') + ':'} />;
-  }
-  if (type === 'user') {
-    const split = (data.content || '').split(':');
-    const id = data.id || split[1];
-    const username = split[0];
-    return (
-      <>
-        <User hideUserImage={false} id={id} username={username} />
-        <span> </span>
-      </>
-    );
-  }
-  if (type === 'channel') {
-    const split = (data.content || '').split(':');
-    const id = data.id || split[1];
-    const name = split[0];
-    return (
-      <>
-        <Chan id={id} name={name} />
-        <span> </span>
-      </>
-    );
-  }
-  if (type === 'underline') return <div className="underline">{child}</div>;
-  if (type === 'strikethrough') return <div className="strikethrough">{child}</div>;
-  if (type === 'bold') return <div className="bold">{child}</div>;
-  if (type === 'italic') return <div className="italic">{child}</div>;
-  if (type === 'mquote') return <div className="multiline-quote">{child}</div>;
-  if (type === 'quote') return <div className="one-line-quote">{child}</div>;
-  if (type === 'nop') {
-    return <>{child}</>;
-  }
-
-  if (type === 'mcode') {
-    return <HighlightedCode className="multiline-code" code={(data.content || '').trim()} />;
-  }
-  if (type === 'icode') {
-    return <div className="inline-code">{(data.content || '').trim()}</div>;
-  }
-  if (type === 'url') {
-    if (!data.url && data.url !== undefined) {
-      return <span className="link">{child}</span>;
-    }
-    let url = setUrlProtocol(data.url || data.content);
-    if (data.user_identifier && UserService.getCurrentUser()) {
-      let separator = '?';
-      if (url.indexOf('?') > 0) {
-        separator = '&';
-      }
-      url += separator + 'tdrive_user=' + UserService.getCurrentUser().id;
-    }
-    return (
-      // eslint-disable-next-line react/jsx-no-target-blank
-      <a target="_blank" rel="noreferrer" href={url?.replace(/^javascript:/, '')}>
-        {child}
-      </a>
-    );
-  }
-  if (type === 'markdown_link') {
-    const linkData = data.content.split('](');
-    const url = linkData[1] || '';
-
-    return (
-      <a href={setUrlProtocol(url)} target="_BLANK" rel="noreferrer">
-        {linkData[0]}
-      </a>
-    );
-  }
-  if (type === 'email') {
-    return (
-      <a target="_blank" rel="noreferrer" href={'mailto:' + (data.content || '')}>
-        {child}
-      </a>
-    );
-  }
-  if (type === 'system') {
-    return <span style={{ color: '#888', fontSize: 13 }}>{child}</span>;
-  }
-
-  if (type === 'file') {
-    return (
-      <div className="drive_view grid inline-files">
-        <File
-          data={{ id: data.content || '' }}
-          notInDrive={true}
-          mini={data.mode === 'mini' ? true : false}
-        />
-      </div>
-    );
-  }
-  if (type === 'iframe') {
-    return (
-      <iframe
-        src={data.src || ''}
-        title={'twacode-iframe-' + data.src}
-        style={{ height: data.height }}
-      />
-    );
-  }
-  if (type === 'image') {
-    return <img src={data.src} alt={data.alt || ''} className={'image twacode'} />;
-  }
-  if (type === 'icon') {
-    return <Emojione type={data.src} />;
-  }
-  if (type === 'progress_bar') {
-    return (
-      <div className="progress_bar">
-        <div style={{ width: (data.progress || 0) + '%' }} />
-      </div>
-    );
-  }
-  if (type === 'attachment') {
-    return <div className="attachment">{child}</div>;
-  }
-  if (type === 'button') {
-    if (data.inline) {
-      return (
-        <div
-          className={
-            'interactive_element underline interactive_message_btn ' +
-            (data.style === 'danger' ? 'danger ' : '') +
-            (data.style === 'primary' ? 'primary ' : '')
-          }
-          onClick={evt => {
-            if (data.action_id) {
-              eventContainer.onAction(
-                'interactive_action',
-                data.action_id,
-                data.interactive_context || {},
-                '',
-                evt,
-              );
-            }
-          }}
-        >
-          {child}
-        </div>
-      );
-    }
-    return (
-      <Button
-        type="button"
-        className={
-          'button interactive_element interactive_message_btn small ' +
-          (data.style === 'danger' ? 'danger ' : '') +
-          (data.style === 'default' ? 'default ' : '')
-        }
-        onClick={(evt: any) => {
-          if (data.action_id) {
-            eventContainer.onAction(
-              'interactive_action',
-              data.action_id,
-              data.interactive_context || {},
-              '',
-              evt,
-            );
-          }
-        }}
-      >
-        {child}
-      </Button>
-    );
-  }
-  if (type === 'copiable') {
-    return <InputWithClipBoard value={data.content || ''} disabled={false} />;
-  }
-  if (type === 'input') {
-    return (
-      <Input
-        type="text"
-        className={
-          'interactive_element interactive_message_input medium ' +
-          (data.full_width ? 'full_width ' : '')
-        }
-        defaultValue={data.content || ''}
-        placeholder={data.placeholder || 'Write something...'}
-        onChange={(evt: any) => {
-          eventContainer.onAction(
-            'interactive_change',
-            data.passive_id,
-            data.interactive_context || {},
-            evt.target.value,
-            evt,
-          );
-        }}
-      />
-    );
-  }
-  if (type === 'select') {
-    return (
-      <select
-        className={
-          'select interactive_element interactive_message_input medium ' +
-          (data.full_width ? 'full_width ' : '')
-        }
-        onChange={evt => {
-          const value = evt.target.value;
-          eventContainer.onAction(
-            'interactive_change',
-            data.passive_id || data.action_id,
-            data.interactive_context || {},
-            value,
-            evt,
-          );
-          if (data.action_id) {
-            eventContainer.onAction(
-              'interactive_action',
-              data.action_id,
-              data.interactive_context || {},
-              value,
-              evt.target.value,
-            );
-          }
-        }}
-      >
-        <option disabled selected={data.values.filter((e: any) => e.selected).length === 0}>
-          {data.title}
-        </option>
-        {data.values.map((item: any) => {
-          return (
-            <option key={item.value} value={item.value} selected={item.selected}>
-              {item.name}
-            </option>
-          );
-        })}
-      </select>
-    );
-  }
-
-  return <></>;
-};
-
-class PseudoMarkdownDictionary {
-  render_block: { [key: string]: any } = {
-    text_block_parent: {
-      object: (child: any, _object: any, _eventContainer: any, textTransform: any) => (
-        <DynamicComponent type="text_block_parent" child={child} textTransform={textTransform} />
-      ),
-    },
-    text: {
-      object: (child: any, _object: any, _eventContainer: any, textTransform: any) => (
-        <DynamicComponent type="text" child={child} textTransform={textTransform} />
-      ),
-    },
-    br: {
-      object: (child: any) => <DynamicComponent type="br" child={child} />,
-    },
-    emoji: {
-      object: (_child: any, data: any) => <DynamicComponent type="emoji" data={data} />,
-    },
-    user: {
-      object: (_child: any, object: any) => <DynamicComponent type="user" data={object} />,
-    },
-    channel: {
-      object: (_child: any, object: any) => <DynamicComponent type="channel" data={object} />,
-    },
-    underline: { object: (child: any) => <DynamicComponent type="underline" child={child} /> },
-    strikethrough: {
-      object: (child: any) => <DynamicComponent type="strikethrough" child={child} />,
-    },
-    bold: { object: (child: any) => <DynamicComponent type="bold" child={child} /> },
-    italic: { object: (child: any) => <DynamicComponent type="italic" child={child} /> },
-    mquote: { object: (child: any) => <DynamicComponent type="mquote" child={child} /> },
-    quote: { object: (child: any) => <DynamicComponent type="quote" child={child} /> },
-    nop: { object: (child: any) => <DynamicComponent type="nop" child={child} /> },
-    mcode: {
-      object: (_child: any, object: any) => <DynamicComponent type="mcode" data={object} />,
-    },
-    icode: {
-      object: (_child: any, object: any) => <DynamicComponent type="icode" data={object} />,
-    },
-    url: {
-      object: (child: any, object: any) => (
-        <DynamicComponent type="url" child={child} data={object} />
-      ),
-    },
-    markdown_link: {
-      object: (_child: any, object: any) => <DynamicComponent type="markdown_link" data={object} />,
-    },
-    email: {
-      object: (child: any, object: any) => (
-        <DynamicComponent type="email" child={child} data={object} />
-      ),
-    },
-    system: {
-      object: (child: any) => <DynamicComponent type="system" child={child} />,
-    },
-    file: {
-      object: (_child: any, object: any) => <DynamicComponent type="file" data={object} />,
-    },
-    iframe: {
-      object: (_child: any, object: any) => <DynamicComponent type="iframe" data={object} />,
-    },
-    image: {
-      object: (_child: any, object: any) => <DynamicComponent type="image" data={object} />,
-    },
-    icon: {
-      object: (_child: any, object: any) => <DynamicComponent type="icon" data={object} />,
-    },
-    progress_bar: {
-      object: (_child: any, object: any) => <DynamicComponent type="progress_bar" data={object} />,
-    },
-    attachment: { object: (child: any) => <DynamicComponent type="attachment" child={child} /> },
-    button: {
-      object: (child: any, object: any, eventContainer: any) => (
-        <DynamicComponent
-          type="attachment"
-          child={child}
-          data={object}
-          eventContainer={eventContainer}
-        />
-      ),
-    },
-    copiable: {
-      object: (_child: any, object: any) => <DynamicComponent type="copiable" data={object} />,
-    },
-    input: {
-      object: (_child: any, object: any, eventContainer: any) => (
-        <DynamicComponent type="input" data={object} eventContainer={eventContainer} />
-      ),
-    },
-    select: {
-      object: (_child: any, object: any, eventContainer: any) => (
-        <DynamicComponent type="select" data={object} eventContainer={eventContainer} />
-      ),
-    },
-  };
-}
-
-function setUrlProtocol(url: string) {
-  let protocol = 'https';
-
-  if ((url || '').indexOf('http://') >= 0) {
-    protocol = 'http';
-  }
-  return protocol + '://' + (url || '').replace(/^(https?:\/\/)/, '');
-}
-
-const service = new PseudoMarkdownDictionary();
-export default service;
diff --git a/tdrive/frontend/src/app/components/twacode/twacode.scss b/tdrive/frontend/src/app/components/twacode/twacode.scss
deleted file mode 100755
index 3e1602b3..00000000
--- a/tdrive/frontend/src/app/components/twacode/twacode.scss
+++ /dev/null
@@ -1,348 +0,0 @@
-/* PseudoMarkdownCompiler */
-
-.markdown {
-  & > span,
-  span > span {
-    vertical-align: middle;
-  }
-
-  &.loading_interaction {
-    .interactive_element {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-
-  .emoji-container {
-    display: inline-block;
-    vertical-align: middle;
-    height: 1em;
-    .emoji-mart-emoji {
-      vertical-align: top;
-    }
-  }
-
-  .inline-files {
-    display: inline-block;
-    padding-top: 8px;
-
-    .file {
-      margin-right: 8px;
-    }
-  }
-
-  a {
-    vertical-align: middle;
-    overflow: hidden;
-    max-width: 100%;
-    display: inline-block;
-    vertical-align: middle;
-    overflow-wrap: break-word;
-  }
-  .bold {
-    vertical-align: middle;
-    display: inline;
-    font-weight: bold;
-  }
-  .italic {
-    vertical-align: middle;
-    display: inline;
-    font-style: italic;
-  }
-  .underline {
-    vertical-align: middle;
-    display: inline;
-    text-decoration: underline;
-  }
-  .strikethrough {
-    vertical-align: middle;
-    display: inline;
-    text-decoration: line-through;
-  }
-  .inline-code,
-  .multiline-code {
-    vertical-align: middle;
-    color: #e6e1dc;
-    background: #535353;
-    font-family: monospace;
-    padding: 0 5px;
-    white-space: pre-wrap;
-    max-height: 400px;
-    overflow: auto;
-    box-sizing: border-box;
-    line-break: anywhere;
-
-    pre {
-      margin-bottom: 0;
-    }
-  }
-  .multiline-code {
-    color: var(--white);
-    padding: 5px;
-    border-radius: var(--border-radius-base);
-    position: relative;
-
-    pre {
-      max-height: 360px;
-      overflow: auto;
-    }
-
-    .hljs {
-      border-radius: 6px;
-    }
-
-    .expander {
-      cursor: pointer;
-      position: absolute;
-      background: #00000088;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #535353 50%);
-      bottom: 0;
-      padding: 8px;
-      width: 100%;
-    }
-
-    .copy {
-      cursor: pointer;
-      position: absolute;
-      bottom: 0px;
-      right: 8px;
-    }
-  }
-  .inline-code {
-    border-radius: 3px;
-    background: #232323;
-    padding-bottom: 1px;
-  }
-  .inline-code {
-    display: inline;
-  }
-  .multiline-code {
-    display: block;
-    width: 100%;
-    margin-top: 5px;
-    margin-bottom: 10px;
-  }
-  .multiline-quote,
-  .one-line-quote,
-  blockquote {
-    display: block;
-    width: 100%;
-    border-left: 3px solid var(--grey-dark);
-    padding-left: 5px;
-    border-radius: 3px;
-    box-sizing: border-box;
-  }
-  .one-line-quote,
-  blockquote {
-    margin-bottom: 5px;
-    margin-top: 5px;
-  }
-  .user_twacode.unknown,
-  .channel_twacode.unknown {
-    pointer-events: none;
-    padding-right: 0px;
-    color: var(--grey-dark);
-    background: rgba(0, 0, 0, 0);
-  }
-  .user_twacode {
-    display: inline-flex;
-    line-height: 18px;
-
-    &.highlighted,
-    &.with_user.highlighted {
-      background: #fff892;
-      font-weight: 500;
-      box-sizing: border-box;
-      border-radius: var(--border-radius-base);
-    }
-    &.with_user {
-      font-weight: 500;
-      box-sizing: border-box;
-      color: var(--black);
-      height: 18px;
-      text-transform: capitalize;
-      border-radius: var(--border-radius-base);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block;
-      padding-right: 5px;
-      margin-right: -2px;
-      vertical-align: middle;
-      background: var(--primary-background);
-      cursor: pointer;
-
-      &:hover {
-        color: var(--primary);
-      }
-
-      .userimage {
-        width: 16px;
-        height: 16px;
-        border-radius: var(--border-radius-base);
-        display: inline-block;
-        vertical-align: middle;
-        background: var(--primary-background);
-        margin: 1px;
-        vertical-align: top;
-        margin-right: 3px;
-        background-size: cover;
-        background-position: center;
-      }
-    }
-  }
-  .channel_twacode {
-    font-weight: 500;
-    box-sizing: border-box;
-    color: var(--black);
-    height: 18px;
-    line-height: 18px;
-    text-transform: capitalize;
-    border-radius: var(--border-radius-base);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-block;
-    padding-right: 5px;
-    margin-right: -2px;
-    vertical-align: middle;
-    background: var(--primary-background);
-    font-weight: 500;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--primary);
-    }
-
-    .emoji-container {
-      vertical-align: top;
-      margin-right: 3px;
-      margin-left: 2px;
-      margin-top: -2px;
-      img.emojione {
-        width: 14px;
-        margin-left: 4px;
-      }
-    }
-  }
-
-  iframe {
-    display: block;
-    width: 100%;
-    border: 0px;
-    max-height: 100vh;
-    height: 100%;
-  }
-
-  .user_bloc {
-    vertical-align: middle;
-    margin-top: -10px;
-    transform: translateY(6px);
-    padding: 4px 5px;
-    height: 24px;
-    font-weight: bold;
-    cursor: pointer;
-    &:hover {
-      background: #f2f2f2;
-    }
-  }
-
-  .attachment {
-    padding: 0;
-    padding-left: 9px;
-    margin: 5px 0;
-    position: relative;
-    &:before {
-      content: '';
-      width: 4px;
-      border-radius: 2px;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: var(--primary);
-    }
-  }
-
-  .progress_bar {
-    width: 100%;
-    max-width: 200px;
-    height: 8px;
-    border-radius: var(--border-radius-base);
-    overflow: hidden;
-    background: rgba(128, 128, 128, 0.1);
-    margin-top: 5px;
-    margin-bottom: 5px;
-    display: inline-block;
-    vertical-align: middle;
-
-    & > div {
-      height: 100%;
-      transition: width 0.5s;
-      background: var(--primary);
-    }
-  }
-
-  .interactive_message_btn,
-  .interactive_message_input {
-    margin-right: 8px;
-    vertical-align: middle;
-    margin-top: 8px;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &.danger {
-      background: #ff6c6c;
-      color: var(--white);
-
-      &:hover {
-        background: #ee5c5c;
-      }
-    }
-
-    &.default {
-      background: #eee;
-      color: #000;
-
-      &:hover {
-        background: #ddd;
-      }
-    }
-  }
-
-  //Inline buttons
-  .interactive_message_btn.underline {
-    margin: 0px;
-    padding: 0px;
-    display: inline;
-    cursor: pointer;
-    vertical-align: middle;
-    background: transparent !important;
-    color: #888;
-
-    &:hover {
-      color: #000;
-    }
-
-    &.danger {
-      color: #ff6c6c;
-      &:hover {
-        color: #ee5c5c;
-      }
-    }
-
-    &.primary {
-      color: var(--primary);
-      &:hover {
-        color: #007ed9;
-      }
-    }
-  }
-
-  .image.twacode {
-    height: 150px;
-    margin-top: 8px;
-    border-radius: var(--border-radius-base);
-    max-width: 100%;
-  }
-}
diff --git a/tdrive/frontend/src/app/components/twacode/twacode.tsx b/tdrive/frontend/src/app/components/twacode/twacode.tsx
deleted file mode 100755
index a0e4292f..00000000
--- a/tdrive/frontend/src/app/components/twacode/twacode.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect, useRef } from 'react';
-
-import PseudoMarkdownCompiler from 'app/features/global/services/pseudo-markdown-compiler-service';
-import Compile from './compile';
-import './twacode.scss';
-
-type Props = {
-  className?: string;
-  content: any;
-  before?: any;
-  after?: any;
-  isApp?: boolean;
-  simple?: boolean;
-  onPassiveChange?: (type: string, id: string, context: any, value: any) => void;
-  onAction?: (type: string, id: string, context: any, value: any, evt: any) => void;
-};
-
-let loadingInteractionTimeout: any = 0;
-
-export default React.memo((props: Props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let container: any = null;
-  const passives: any = {};
-  const savedStringified = useRef('');
-
-  const [loadingInteraction, setLoadingInteraction] = useState(false);
-
-  const event_container = {
-    onAction: (type: string, id: string, context: any, value: any, evt: any) => {
-      //Button pressed
-      if (type === 'interactive_action') {
-        if (props.onAction) {
-          setLoadingInteraction(true);
-          clearTimeout(loadingInteractionTimeout);
-          loadingInteractionTimeout = setTimeout(() => {
-            savedStringified.current = '';
-            setLoadingInteraction(false);
-          }, 5000);
-          props.onAction(type, id, context, JSON.parse(JSON.stringify(passives)), evt);
-        }
-      }
-
-      //Input changed
-      if (type === 'interactive_change') {
-        passives[id] = value;
-        if (props.onPassiveChange) {
-          props.onPassiveChange(type, id, context, value);
-        }
-      }
-    },
-  };
-
-  useEffect(() => {
-    const stringified = JSON.stringify([props.content]);
-    if (stringified !== savedStringified.current) {
-      clearTimeout(loadingInteractionTimeout);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      savedStringified.current = stringified;
-      setLoadingInteraction(false);
-      console.log('called setLoadingInteraction');
-    }
-    return () => {
-      //Called when element is unmounted
-      clearTimeout(loadingInteractionTimeout);
-    };
-  }, [JSON.stringify(props.content)]);
-
-  return (
-    <div
-      ref={node => (container = node)}
-      {...props}
-      className={'markdown ' + (loadingInteraction ? 'loadingInteraction ' : '') + props.className}
-    >
-      {!!props.simple &&
-        PseudoMarkdownCompiler.compileToSimpleHTML(props.content, true || props.isApp)}
-      {!props.simple && (
-        <Compile
-          content={props.content}
-          isApp={true || props.isApp}
-          eventContainer={event_container}
-        />
-      )}
-    </div>
-  );
-});
diff --git a/tdrive/frontend/src/app/components/twacode/types.ts b/tdrive/frontend/src/app/components/twacode/types.ts
deleted file mode 100644
index 17dd56c3..00000000
--- a/tdrive/frontend/src/app/components/twacode/types.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export type Thumbnail = {
-  index: number;
-  id: string;
-
-  type: string;
-  size: number;
-  width: number;
-  height: number;
-
-  url: string;
-  full_url?: string;
-};
-
-
-export type MessageFileMetadata = {
-  source: 'internal' | 'drive' | string; //Uuid of the corresponding connector
-  external_id: string | any;
-
-  name?: string; //Original file name
-  mime?: string; //Original file mime
-  size?: number; //Original file weight
-  thumbnails?: Thumbnail[]; //Url to thumbnail (or set it to undefined if no relevant)
-};
-
-/* Blocks objects */
-
-export type Block = { block_id?: string } & (
-  | BlockFile
-  | BlockActions
-  | BlockContext
-  | BlockHeader
-  | BlockDivider
-  | BlockImage
-  | BlockInput
-  | BlockSection
-  | BlockIframe
-  | BlockTwacode
-);
-
-export type BlockTwacode = {
-  type: 'twacode';
-  elements: any;
-};
-
-export type BlockActions = {
-  type: 'actions';
-  elements: BlockElement[];
-};
-
-export type BlockContext = {
-  type: 'context';
-  elements: (BlockElementImage | CompositionTextObject | BlockElementProgressBar)[];
-};
-
-export type BlockHeader = {
-  type: 'header';
-  text: CompositionPlainTextObject;
-};
-
-export type BlockDivider = {
-  type: 'divider';
-};
-
-export type BlockFile = {
-  type: 'file';
-  external_id: string;
-  source: string;
-  metadata?: MessageFileMetadata;
-};
-
-export type BlockImage = BlockElementImage & {
-  title?: CompositionPlainTextObject;
-};
-
-export type BlockInput = {
-  type: 'input';
-  label: string;
-  element: BlockElement;
-  dispatch_action?: boolean;
-  hint?: CompositionPlainTextObject;
-  optional?: boolean;
-};
-
-export type BlockSection = {
-  type: 'section';
-  text?: CompositionTextObject;
-  fields?: CompositionTextObject[];
-  accessory?: BlockElement;
-};
-
-export type BlockIframe = {
-  type: 'iframe';
-  iframe_url: string;
-  width: number;
-  height: number;
-};
-
-/* Elements objects */
-
-export type BlockElement =
-  | BlockElementImage
-  | BlockElementProgressBar
-  | BlockElementButton
-  | BlockElementCheckboxes
-  | BlockElementDatePicker
-  | BlockElementMultiselectMenu
-  | BlockElementPlaintextInput
-  | BlockElementRadioButtonInput
-  | BlockElementSelectMenus
-  | BlockElementOverflowMenus
-  | BlockElementTimePicker;
-
-export type BlockElementImage = {
-  type: 'image';
-  image_url: string;
-  alt_text: string;
-  title?: any;
-  metadata?: MessageFileMetadata;
-};
-
-export type BlockElementProgressBar = {
-  type: 'progress_bar';
-  value: number; //Between 0 and 100
-  title: string;
-};
-
-export type BlockElementButton = {
-  type: 'button';
-  text: CompositionPlainTextObject;
-  action_id: string;
-  url?: string;
-  value?: string;
-  style?: 'primary' | 'danger' | 'default';
-  confirm?: CompositionConfirmationDialog;
-};
-
-export type BlockElementCheckboxes = {
-  type: 'checkboxes';
-  action_id: string;
-  options: CompositionOption[];
-  initial_options?: CompositionOption[];
-  confirm?: CompositionConfirmationDialog;
-};
-
-type BlockElementPlaintextInput = {
-  type: 'plain_text_input';
-  action_id: string;
-  placeholder?: CompositionPlainTextObject;
-  initial_value?: string;
-  multiline?: boolean;
-  min_length?: number;
-  max_length?: number;
-  dispatch_action_config?: DispatchActionConfiguration;
-  readonly?: boolean;
-  copiable?: boolean;
-};
-
-export type BlockElementRadioButtonInput = {
-  type: 'radio_buttons';
-  action_id: string;
-  options: CompositionOption[];
-  initial_option?: CompositionOption;
-  confirm?: CompositionConfirmationDialog;
-};
-
-export type BlockElementDatePicker = {
-  type: 'datepicker';
-  action_id: string;
-  placeholder?: CompositionPlainTextObject;
-  initial_date?: string;
-  confirm?: CompositionConfirmationDialog;
-};
-
-export type BlockElementTimePicker = {
-  type: 'timepicker';
-  action_id: string;
-  placeholder?: CompositionPlainTextObject;
-  initial_time?: string;
-  confirm?: CompositionConfirmationDialog;
-};
-
-export type BlockElementOverflowMenus = {
-  type: 'overflow';
-  action_id: string;
-  options: CompositionOption[];
-  confirm?: CompositionConfirmationDialog;
-};
-
-export type BlockElementSelectMenus = {
-  type: '';
-}; //TODO
-
-export type BlockElementMultiselectMenu = {
-  type: any;
-}; //TODO
-
-/* Composition objects */
-
-type CompositionTextObject = CompositionPlainTextObject | CompositionMarkdownTextObject;
-
-type CompositionPlainTextObject = {
-  type: 'plain_text';
-  text: string;
-  emoji?: boolean;
-  verbatim?: boolean;
-};
-
-type CompositionMarkdownTextObject = {
-  type: 'mrkdwn';
-  text: string;
-};
-
-type CompositionConfirmationDialog = {
-  title: CompositionPlainTextObject;
-  text: CompositionMarkdownTextObject;
-  confirm: CompositionPlainTextObject;
-  deny: CompositionPlainTextObject;
-  style: 'confirm' | 'danger' | 'default';
-};
-
-type CompositionOption = {
-  text: CompositionPlainTextObject;
-  value: string;
-  description?: CompositionPlainTextObject;
-  url?: string;
-};
-
-type DispatchActionConfiguration = {
-  trigger_actions_on: ('on_enter_pressed' | 'on_character_entered')[];
-};
diff --git a/tdrive/frontend/src/app/components/ui/user-or-mail.tsx b/tdrive/frontend/src/app/components/ui/user-or-mail.tsx
index 28107068..a5a039ef 100755
--- a/tdrive/frontend/src/app/components/ui/user-or-mail.tsx
+++ b/tdrive/frontend/src/app/components/ui/user-or-mail.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { Avatar, Col, Typography } from 'antd';
-import UsersService from 'app/features/users/services/current-user-service';
+import UsersService from '@features/users/services/current-user-service';
 import './elements.scss';
-import { useUser } from 'app/features/users/hooks/use-user';
+import { useUser } from '@features/users/hooks/use-user';
 
 const { Text } = Typography;
 
diff --git a/tdrive/frontend/src/app/components/ui/user.jsx b/tdrive/frontend/src/app/components/ui/user.jsx
index 1b53fe4b..2dc5802b 100755
--- a/tdrive/frontend/src/app/components/ui/user.jsx
+++ b/tdrive/frontend/src/app/components/ui/user.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import './elements.scss';
-import UserService from 'app/features/users/services/current-user-service';
+import UserService from '@features/users/services/current-user-service';
 
 export default class User extends React.Component {
   render() {
diff --git a/tdrive/frontend/src/app/components/uploads/upload-manager.js b/tdrive/frontend/src/app/components/uploads/upload-manager.js
index d15fc504..9003ca49 100755
--- a/tdrive/frontend/src/app/components/uploads/upload-manager.js
+++ b/tdrive/frontend/src/app/components/uploads/upload-manager.js
@@ -1,11 +1,4 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Number from 'app/features/global/utils/Numbers';
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Resumable from 'app/features/files/utils/resumable.js';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Api from 'app/features/global/framework/api-service';
-import JWTStorage from 'app/features/auth/jwt-storage-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
 
 class UploadManager extends Observable {
   constructor() {
@@ -33,106 +26,6 @@ class UploadManager extends Observable {
     this.notify();
   }
 
-  reinitAfterDelay() {
-    if (this.reinitTimeout) clearTimeout(this.reinitTimeout);
-    if (this.reinitTimeoutBefore) clearTimeout(this.reinitTimeoutBefore);
-    this.reinitTimeoutBefore = setTimeout(() => {
-      this.will_close = true;
-      this.notify();
-      this.reinitTimeout = setTimeout(() => {
-        this.reinit();
-      }, 500);
-    }, 800);
-  }
-
-  startUpload(
-    elements,
-    total_number,
-    total_size,
-    drive_parent,
-    upload_options,
-    driveCollectionKey,
-    callback,
-  ) {
-    if (this.addElementsRecursive(elements, '')) {
-      this.uploadRecursive(elements, drive_parent, upload_options, driveCollectionKey, callback);
-    } else {
-      this.currentUploadFiles = [];
-      this.currentUploadTotalNumber = 0;
-      this.currentUploadTotalSize = 0;
-      this.currentWaitingFilesNumber = 0;
-      this.currentUploadStartTime = new Date();
-      this.reinit();
-    }
-  }
-
-  addElementsRecursive(elements, path) {
-    return Object.keys(elements).every(name => {
-      var element = elements[name];
-      if (element.size) {
-        //File
-        this.currentUploadTotalSize += element.size;
-        this.currentUploadTotalNumber++;
-        this.currentUploadFiles.push({
-          unid: Number.unid(),
-          progress: 0,
-          cancelled: false,
-          error: false,
-          name: name,
-          path: path,
-          xhr: null,
-          file: element,
-        });
-      } else {
-        //Directory
-        if (!this.addElementsRecursive(element, path + '/' + name)) {
-          return false;
-        }
-      }
-      return true;
-    });
-  }
-
-  uploadRecursive(elements, drive_parent, upload_options, driveCollectionKey, callback) {
-    Object.keys(elements).forEach(name => {
-      var element = elements[name];
-      if (element.size) {
-        //File
-        this.uploadFile(element, drive_parent, upload_options, driveCollectionKey, callback);
-      } else {
-        //Directory
-        this.createDirectory(name, drive_parent, upload_options, driveCollectionKey, directory => {
-          if (callback) callback(directory);
-          if (directory) {
-            this.uploadRecursive(element, directory, upload_options, driveCollectionKey);
-          }
-        });
-      }
-    });
-  }
-
-  createDirectory(name, parent, upload_options, driveCollectionKey, callback) {
-    if (this.currentUploadingFilesNumber > 4) {
-      setTimeout(() => {
-        this.createDirectory(name, parent, upload_options, driveCollectionKey, callback);
-      }, 500);
-      return;
-    }
-
-    this.currentUploadingFilesNumber++;
-
-    DriveService.createDirectory(
-      upload_options.workspace_id,
-      name,
-      parent,
-      driveCollectionKey,
-      dir => {
-        this.currentUploadingFilesNumber--;
-        if (callback) callback(dir);
-      },
-    );
-  }
-
   abort(elements) {
     var that = this;
 
@@ -159,170 +52,6 @@ class UploadManager extends Observable {
 
     that.notify();
   }
-
-  uploadFile(element, drive_parent, upload_options, driveCollectionKey, callback, timeout_count) {
-    this.currentWaitingFilesNumber++;
-
-    if (!timeout_count) {
-      timeout_count = 0;
-    }
-
-    if (this.currentUploadingFilesNumber > 4) {
-      setTimeout(() => {
-        this.currentWaitingFilesNumber--;
-        this.uploadFile(
-          element,
-          drive_parent,
-          upload_options,
-          driveCollectionKey,
-          callback,
-          timeout_count + 1,
-        );
-      }, Math.max(30000, 500 * (this.currentWaitingFilesNumber + 1) + Math.random() * 1000));
-      return;
-    }
-
-    this.currentWaitingFilesNumber--;
-    this.currentUploadingFilesNumber++;
-
-    // eslint-disable-next-line no-unused-vars
-    var listIndex = 0;
-    var current_item = 0;
-    this.currentUploadFiles.forEach((item, i) => {
-      if (item.file === element) {
-        listIndex = i;
-        current_item = item;
-      }
-    });
-
-    var that = this;
-
-    if (current_item.xhr_cancelled === true) {
-      return;
-    }
-
-    var extension = element.name.split('.');
-    var r_data = {
-      workspace_id: upload_options.workspace_id,
-      name: element.name,
-      extension: extension[extension.length - 1],
-    };
-
-    //Use Resumable.js for upload by chunk
-    var r = new Resumable({
-      target: `${Globals.api_root_url}/ajax/driveupload/upload`,
-      chunkSize: 50000000,
-      testChunks: false,
-      simultaneousUploads: 5,
-      withCredentials: true,
-      maxChunkRetries: 2,
-      headers: {
-        Authorization: JWTStorage.getAutorizationHeader(),
-      },
-      query: {
-        object: JSON.stringify({
-          id: upload_options.new_version ? upload_options.file_id : null,
-          _once_new_version: upload_options.new_version,
-          front_id: Number.unid(),
-          is_directory: false,
-          name: element.name,
-          parent_id: drive_parent ? drive_parent.id : null,
-          workspace_id: upload_options.workspace_id,
-          detached: upload_options.detached,
-        }),
-      },
-      generateUniqueIdentifier: (file, event) => {
-        return 'no_id';
-      },
-    });
-
-    current_item.resumable = r;
-
-    current_item.timeout = setTimeout(() => {
-      this.currentUploadingFilesNumber--;
-    }, 60000);
-
-    r.on('fileSuccess', function (file, message) {
-      clearTimeout(current_item.timeout);
-
-      that.currentUploadedFilesNumber++;
-      that.currentUploadingFilesNumber--;
-      current_item.progress = 1;
-
-      if (
-        that.currentUploadedFilesNumber +
-          that.currentCancelledFilesNumber +
-          that.currentErrorFilesNumber >=
-        that.currentUploadTotalNumber
-      ) {
-        that.reinitAfterDelay();
-      }
-
-      var resp = JSON.parse(message);
-
-      if (resp.data && resp.data.object) {
-        Collections.get('drive').updateObject(resp.data.object);
-        Collections.get('drive').share(resp.data.object);
-
-        if (callback) callback(Collections.get('drive').find(resp.data.object.id));
-
-        var parent = Collections.get('drive').find(resp.data.object.parent_id);
-        if (parent) {
-          parent.size = parseInt(parent.size) + parseInt(resp.data.object.size || 0);
-          Collections.get('drive').updateObject(parent);
-        }
-      } else {
-        current_item.error = 1;
-      }
-
-      that.notify();
-    });
-    r.on('progress', function (file, message) {
-      current_item.progress = Math.min(r.progress(), 0.99);
-      that.notify();
-
-      clearTimeout(current_item.timeout);
-      current_item.timeout = setTimeout(() => {
-        this.currentUploadingFilesNumber--;
-      }, 60000);
-    });
-    r.on('fileError', function (file, message) {
-      clearTimeout(current_item.timeout);
-
-      that.currentErrorFilesNumber++;
-      that.currentUploadingFilesNumber--;
-      current_item.error = true;
-
-      if (
-        that.currentUploadedFilesNumber +
-          that.currentCancelledFilesNumber +
-          that.currentErrorFilesNumber >=
-        that.currentUploadTotalNumber
-      ) {
-        that.reinitAfterDelay();
-      }
-
-      that.notify();
-    });
-
-    r.addFile(element);
-
-    Api.post(
-      '/ajax/driveupload/preprocess',
-      {
-        workspace_id: r_data.workspace_id,
-        name: r_data.name,
-        identifier: r_data.identifier,
-        extension: r_data.extension,
-      },
-      res => {
-        var identifier = res.identifier;
-        var file = r.getFromUniqueIdentifier('no_id');
-        file.uniqueIdentifier = identifier;
-        r.upload();
-      },
-    );
-  }
 }
 
 const service = new UploadManager();
diff --git a/tdrive/frontend/src/app/components/uploads/upload-viewer.jsx b/tdrive/frontend/src/app/components/uploads/upload-viewer.jsx
index e8129896..7eeb86a3 100755
--- a/tdrive/frontend/src/app/components/uploads/upload-viewer.jsx
+++ b/tdrive/frontend/src/app/components/uploads/upload-viewer.jsx
@@ -4,7 +4,7 @@ import UploadManager from './upload-manager.js';
 import CloseIcon from '@material-ui/icons/CloseOutlined';
 import './uploads.scss';
 import moment from 'moment';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
 export default class UploadViewer extends React.Component {
   constructor(props) {
@@ -152,14 +152,6 @@ export default class UploadViewer extends React.Component {
                     </div>
                   )}
                   <div className="progress">{parseInt((item.progress || 0) * 100)}%</div>
-                  <div
-                    className="cancel"
-                    onClick={() => {
-                      UploadManager.abort(item.all_files || item);
-                    }}
-                  >
-                    <CloseIcon className="m-icon-small" />
-                  </div>
                 </div>
               );
             })}
diff --git a/tdrive/frontend/src/app/components/uploads/upload-zone.tsx b/tdrive/frontend/src/app/components/uploads/upload-zone.tsx
index f6b5d509..8558f1bd 100755
--- a/tdrive/frontend/src/app/components/uploads/upload-zone.tsx
+++ b/tdrive/frontend/src/app/components/uploads/upload-zone.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 
 import UploadManager from './upload-manager';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import { Upload } from 'react-feather';
 import classNames from 'classnames';
 import './uploads.scss';
@@ -87,41 +87,6 @@ export default class UploadZone extends React.Component<PropsType, StateType> {
     this.file_input.click();
   }
 
-  /**
-   *
-   * @param tree
-   * @param nb
-   * @param totalSize
-   */
-  upload(tree: any, nb?: number, totalSize?: number) {
-    if (this.props.multiple === false) {
-      nb = 1;
-      let file: any = null;
-      Object.keys(tree).every(i => {
-        const element = tree[i];
-        if (element.size) {
-          file = {};
-          file[i] = element;
-          totalSize = element.size;
-          return false;
-        }
-        return true;
-      });
-      if (!file) {
-        return;
-      }
-    }
-    UploadManager.startUpload(
-      tree,
-      nb,
-      totalSize,
-      this.props.parent,
-      this.props.uploadOptions,
-      this.props.driveCollectionKey,
-      this.props.onUploaded,
-    );
-  }
-
   /**
    *
    * @param event
@@ -202,27 +167,6 @@ export default class UploadZone extends React.Component<PropsType, StateType> {
     });
   }
 
-  /**
-   * @param {Blob[]} files
-   * @returns
-   */
-  uploadFiles(files: any = []) {
-    if (!this.props.allowPaste || !files.length) {
-      return;
-    }
-
-    const filesToUpload: any = {};
-
-    files.forEach((file: FileObjectType, index: number) => {
-      const filename = file.name
-        ? file.name.replace(/\.(png|jpeg|jpg|tiff|gif)$/i, '')
-        : `file-${index}`;
-      filesToUpload[filename] = file;
-    });
-
-    this.upload(filesToUpload);
-  }
-
   /**
    *
    * @param state
diff --git a/tdrive/frontend/src/app/components/user-card/user-card.tsx b/tdrive/frontend/src/app/components/user-card/user-card.tsx
index 6786483b..82efcf54 100644
--- a/tdrive/frontend/src/app/components/user-card/user-card.tsx
+++ b/tdrive/frontend/src/app/components/user-card/user-card.tsx
@@ -2,12 +2,12 @@
 import React from 'react';
 import Emojione from 'components/emojione/emojione';
 import Button from 'components/buttons/button';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import User from 'components/user/user';
-import UserService from 'app/features/users/services/current-user-service';
-import { UserType } from 'app/features/users/types/user';
+import UserService from '@features/users/services/current-user-service';
+import { UserType } from '@features/users/types/user';
 import './user-card.scss';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import { TrashIcon } from '@heroicons/react/outline';
 
 type PropsType = {
diff --git a/tdrive/frontend/src/app/components/user-list-manager-depreciated/user-list-manager.tsx b/tdrive/frontend/src/app/components/user-list-manager-depreciated/user-list-manager.tsx
index 489a547c..e7761555 100755
--- a/tdrive/frontend/src/app/components/user-list-manager-depreciated/user-list-manager.tsx
+++ b/tdrive/frontend/src/app/components/user-list-manager-depreciated/user-list-manager.tsx
@@ -7,19 +7,19 @@ import { Avatar, Button, Col, Row, Typography } from 'antd';
 import classNames from 'classnames';
 import TrashIcon from '@material-ui/icons/DeleteOutlined';
 
-import Strings from 'app/features/global/utils/strings';
-import Languages from 'app/features/global/services/languages-service';
+import Strings from '@features/global/utils/strings';
+import Languages from '@features/global/services/languages-service';
 import Icon from '../icon/icon';
 import AutoCompleteExtended from 'components/auto-complete-extended/auto-complete-extended';
-import { UserType } from 'app/features/users/types/user';
-import UsersService from 'app/features/users/services/current-user-service';
+import { UserType } from '@features/users/types/user';
+import UsersService from '@features/users/services/current-user-service';
 import './elements.scss';
 import './user-list-manager.scss';
-import { getCurrentUserList, getUser } from 'app/features/users/hooks/use-user-list';
-import { SearchContextType } from 'app/features/users/api/user-api-client';
-import { searchBackend, searchFrontend } from 'app/features/users/hooks/use-search-user-list';
+import { getCurrentUserList, getUser } from '@features/users/hooks/use-user-list';
+import { SearchContextType } from '@features/users/api/user-api-client';
+import { searchBackend, searchFrontend } from '@features/users/hooks/use-search-user-list';
 import _ from 'lodash';
-import RouterServices from 'app/features/router/services/router-service';
+import RouterServices from '@features/router/services/router-service';
 
 const { Text } = Typography;
 
@@ -72,7 +72,7 @@ const UserListManager = (props: PropsType) => {
   const [input, setInput] = useState<string>('');
   const [editing, setEditing] = useState<boolean>(props.autoFocus ? props.autoFocus : false);
   const [usersIds, setUsersIds] = useState<string[]>([...props.users]);
-  const callback = useRef<(Function)>(() => {});
+  const callback = useRef<Function>(() => {});
   let savedUserProps: string;
 
   useEffect(() => {
diff --git a/tdrive/frontend/src/app/components/user-list-manager/user-list-manager.tsx b/tdrive/frontend/src/app/components/user-list-manager/user-list-manager.tsx
index b539b341..4267990d 100755
--- a/tdrive/frontend/src/app/components/user-list-manager/user-list-manager.tsx
+++ b/tdrive/frontend/src/app/components/user-list-manager/user-list-manager.tsx
@@ -7,19 +7,19 @@ import { Button, Col, Row, Typography } from 'antd';
 import classNames from 'classnames';
 import TrashIcon from '@material-ui/icons/DeleteOutlined';
 
-import Strings from 'app/features/global/utils/strings';
-import UsersService from 'app/features/users/services/current-user-service';
-import Languages from 'app/features/global/services/languages-service';
+import Strings from '@features/global/utils/strings';
+import UsersService from '@features/users/services/current-user-service';
+import Languages from '@features/global/services/languages-service';
 import UserOrMail from '../ui/user-or-mail';
 import Icon from '../icon/icon';
-import WorkspacesUsers from 'app/features/workspace-members/services/workspace-members-service';
+import WorkspacesUsers from '@features/workspace-members/services/workspace-members-service';
 import AutoCompleteExtended from 'components/auto-complete-extended/auto-complete-extended';
-import { UserType } from 'app/features/users/types/user';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useWorkspace } from 'app/features/workspaces/hooks/use-workspaces';
+import { UserType } from '@features/users/types/user';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import { useWorkspace } from '@features/workspaces/hooks/use-workspaces';
 
 import './user-list-manager.scss';
-import { useSearchUsers } from 'app/features/users/hooks/use-search-user-list';
+import { useSearchUsers } from '@features/users/hooks/use-search-user-list';
 
 type PropsType = {
   [key: string]: any;
diff --git a/tdrive/frontend/src/app/components/user-picker/user-picker.jsx b/tdrive/frontend/src/app/components/user-picker/user-picker.jsx
index 12addb82..73aa581f 100755
--- a/tdrive/frontend/src/app/components/user-picker/user-picker.jsx
+++ b/tdrive/frontend/src/app/components/user-picker/user-picker.jsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import Picker from 'components/picker/picker.jsx';
-import Icon from 'app/components/icon/icon.jsx';
+import Icon from '@components/icon/icon.jsx';
 import './user-picker.scss';
 import User from 'components/ui/user.jsx';
-import UsersService from 'app/features/users/services/current-user-service';
-import Languages from 'app/features/global/services/languages-service';
+import UsersService from '@features/users/services/current-user-service';
+import Languages from '@features/global/services/languages-service';
 
 export default class UserPicker extends React.Component {
   /*
diff --git a/tdrive/frontend/src/app/components/user/user.jsx b/tdrive/frontend/src/app/components/user/user.jsx
index 636a4a0f..44df083e 100755
--- a/tdrive/frontend/src/app/components/user/user.jsx
+++ b/tdrive/frontend/src/app/components/user/user.jsx
@@ -1,9 +1,9 @@
 // eslint-disable-next-line no-use-before-define
 import React, { Component } from 'react';
 
-import UserService from 'app/features/users/services/current-user-service';
-import NotificationParameters from 'app/deprecated/user/notification_parameters.js';
-import ListenUsers from 'app/features/users/services/listen-users-service';
+import UserService from '@features/users/services/current-user-service';
+import NotificationParameters from '@deprecated/user/notification_parameters.js';
+import ListenUsers from '@features/users/services/listen-users-service';
 import UserOnlineStatus from '../online-user-status/online-user-status';
 
 import './user.scss';
diff --git a/tdrive/frontend/src/app/components/writing-loader/writing-loader.scss b/tdrive/frontend/src/app/components/writing-loader/writing-loader.scss
deleted file mode 100644
index e28f1435..00000000
--- a/tdrive/frontend/src/app/components/writing-loader/writing-loader.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.dot-typing {
-  position: relative;
-  left: -9999px;
-  margin-left: 15px;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background-color: var(--black-alpha-70);
-  color: var(--black-alpha-70);
-  box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-    9996px 0 0 0 var(--black-alpha-70);
-  animation: dotTyping 1.5s infinite linear;
-}
-
-@keyframes dotTyping {
-  0% {
-    box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-      9996px 0 0 0 var(--black-alpha-70);
-  }
-  16.667% {
-    box-shadow: 9988px -5px 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-      9996px 0 0 0 var(--black-alpha-70);
-  }
-  33.333% {
-    box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-      9996px 0 0 0 var(--black-alpha-70);
-  }
-  50% {
-    box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px -5px 0 0 var(--black-alpha-70),
-      9996px 0 0 0 var(--black-alpha-70);
-  }
-  66.667% {
-    box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-      9996px 0 0 0 var(--black-alpha-70);
-  }
-  83.333% {
-    box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-      9996px -5px 0 0 var(--black-alpha-70);
-  }
-  100% {
-    box-shadow: 9988px 0 0 0 var(--black-alpha-70), 9992px 0 0 0 var(--black-alpha-70),
-      9996px 0 0 0 var(--black-alpha-70);
-  }
-}
diff --git a/tdrive/frontend/src/app/components/writing-loader/writing-loader.tsx b/tdrive/frontend/src/app/components/writing-loader/writing-loader.tsx
deleted file mode 100644
index fc43307f..00000000
--- a/tdrive/frontend/src/app/components/writing-loader/writing-loader.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import './writing-loader.scss';
-
-export default (): JSX.Element => {
-  return (
-    <div>
-      <div data-title=".dot-typing" style={{ color: 'var(--primary)' }}>
-        <div className="stage">
-          <div className="dot-typing"></div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/deprecated/Apps/Calendar/Calendar.js b/tdrive/frontend/src/app/deprecated/Apps/Calendar/Calendar.js
deleted file mode 100755
index 08b76d1d..00000000
--- a/tdrive/frontend/src/app/deprecated/Apps/Calendar/Calendar.js
+++ /dev/null
@@ -1,193 +0,0 @@
-import Languages from 'app/features/global/services/languages-service';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import MediumPopupManager from 'app/components/modal/modal-manager';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Api from 'app/features/global/framework/api-service';
-import UserService from 'app/features/users/services/current-user-service';
-
-class Calendar extends Observable {
-  constructor() {
-    super();
-    this.setObservableName('app_calendar_service');
-
-    Globals.window.calendarService = this;
-
-    this.preview = null;
-    this.edited = null;
-    this.last_used_calendar = {};
-    this.date = new Date();
-
-    this.generateMenu();
-    this.event_types_by_value = {};
-    this.event_types.map(item => {
-      return (this.event_types_by_value[item.value] = item);
-    });
-  }
-
-  generateMenu() {
-    this.event_types = [
-      {
-        icon: 'calender',
-        text: Languages.t('services.apps.calendar.event_icon', [], 'Événement'),
-        value: 'event',
-      },
-      {
-        icon: 'car-sideview',
-        text: Languages.t('services.apps.calendar.move_icon', [], 'Déplacement'),
-        value: 'move',
-      },
-      {
-        icon: 'stopwatch-slash',
-        text: Languages.t('services.apps.calendar.deadline_icon', [], 'Deadline'),
-        value: 'deadline',
-      },
-      {
-        icon: 'stopwatch',
-        text: Languages.t('services.apps.calendar.reminder_icon', [], 'Rappel'),
-        value: 'remind',
-      },
-    ];
-  }
-
-  setDate(date) {
-    this.date = date;
-    this.notify();
-  }
-
-  edit(_event) {
-    this.generateMenu();
-    this.closePopups();
-
-    this.edited = Collections.get('events').edit(_event.front_id ? _event : {});
-
-    _event.front_id = this.edited.front_id;
-    this.edited = Collections.get('events').completeObject(_event, this.edited.front_id);
-
-    if (!this.edited.id) {
-      if (!this.edited.notifications) {
-        this.edited.notifications = [];
-        this.edited.notifications.push({
-          mode: 'push',
-          delay: 60 * 30,
-        });
-      }
-
-      if (!this.edited.participants) {
-        this.edited.participants = [];
-        this.edited.participants.push({
-          user_id_or_mail: UserService.getCurrentUserId(),
-        });
-      }
-
-      if (!this.edited.workspaces_calendars && this.filter_mode === 'workspace') {
-        if (!this.last_used_calendar[Workspaces.currentWorkspaceId]) {
-          var tmp = Collections.get('calendars').findBy({
-            workspace_id: Workspaces.currentWorkspaceId,
-          })[0];
-          if (tmp) {
-            this.last_used_calendar[Workspaces.currentWorkspaceId] = {
-              calendar_id: tmp.id,
-              workspace_id: tmp.workspace_id,
-            };
-          }
-        }
-        var workspace_calendar = this.last_used_calendar[Workspaces.currentWorkspaceId];
-
-        if (workspace_calendar) {
-          this.edited.workspaces_calendars = [];
-          this.edited.workspaces_calendars.push({
-            calendar_id: workspace_calendar.calendar_id,
-            workspace_id: workspace_calendar.workspace_id,
-          });
-        }
-      }
-    }
-
-    this.preview = this.edited;
-    Collections.get('events').notify();
-    this.notify();
-  }
-
-  saveEdit(collectionKey) {
-    if (!this.edited) {
-      return;
-    }
-    var event = this.edited;
-    this.edited = null;
-    this.save(event, collectionKey);
-    this.closePopups();
-  }
-
-  startPreview(event) {
-    this.closePopups();
-    this.preview = Collections.get('events').findByFrontId(event.front_id) || event;
-  }
-
-  closePopups() {
-    this.preview = null;
-    if (this.edited) {
-      Collections.get('events').cancelEdit(this.edited);
-      this.edited = null;
-    }
-    MediumPopupManager.close();
-  }
-
-  remove(event, collectionKey) {
-    this.closePopups();
-    Collections.get('events').remove(event, collectionKey);
-  }
-
-  save(event, collectionKey) {
-    if (!event.front_id) {
-      return;
-    }
-    event = Collections.get('events').completeObject(event, event.front_id);
-
-    if (event.workspaces_calendars && event.workspaces_calendars.length > 0) {
-      this.last_used_calendar[Workspaces.currentWorkspaceId] = event.workspaces_calendars[0];
-    }
-
-    if (!this.edited || event.front_id !== this.edited.front_id) {
-      Collections.get('events').save(event, collectionKey);
-    } else {
-      Collections.get('events').notify();
-    }
-    return event;
-  }
-
-  export(workspace_id, calendars, download, callback) {
-    Api.post(
-      '/ajax/calendar/token_export',
-      { workspace_id: workspace_id, calendars: calendars },
-      res => {
-        if (download) {
-          document.location = Api.route('/ajax/calendar/export?token=' + res.token);
-        } else {
-          if (callback) callback(Api.route('/ajax/calendar/export?token=' + res.token));
-        }
-      },
-    );
-  }
-
-  getIsReadonly(event) {
-    event = Collections.get('events').findByFrontId(event.front_id) || event;
-    if (!event.id) {
-      return false;
-    }
-    var readonly = event.readonly;
-    if (event.owner && event.owner !== UserService.getCurrentUserId()) {
-      readonly = true;
-    }
-    (event.workspaces_calendars || []).forEach(item => {
-      if (item.workspace_id !== Workspaces.currentWorkspaceId) {
-        readonly = true;
-      }
-    });
-    return readonly;
-  }
-}
-
-const service = new Calendar();
-export default service;
diff --git a/tdrive/frontend/src/app/deprecated/Apps/Drive/Drive.js b/tdrive/frontend/src/app/deprecated/Apps/Drive/Drive.js
deleted file mode 100755
index 0ac2c89d..00000000
--- a/tdrive/frontend/src/app/deprecated/Apps/Drive/Drive.js
+++ /dev/null
@@ -1,637 +0,0 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Api from 'app/features/global/framework/api-service';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import AceModeList from './utils/ace_modelist.js';
-import { getCompanyApplications } from 'app/features/applications/state/company-applications';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import _ from 'lodash';
-
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-
-class Drive extends Observable {
-  constructor() {
-    super();
-    this.setObservableName('app_drive_service');
-    this.view_mode = 'grid';
-    if (typeof window != 'undefined' && window.screen && window.screen.width < 550) {
-      this.view_mode = 'list';
-    }
-
-    this.current_directory_channels = {};
-    this.current_collection_key_channels = {};
-    this.current_position_key_channels = {};
-    this.is_in_trash_channels = {};
-
-    this.root_directories = {};
-    this.trash_directories = {};
-    this.looking_for_root_directories = {};
-    this.looking_for = {};
-    this.changing_directory = {};
-
-    this.public_access_token = null;
-
-    if (!Globals.window.drive_service) {
-      Globals.window.drive_service = [];
-    }
-    Globals.window.drive_service.push(this);
-    this.view_mode = LocalStorage.getItem('drive_view') || 'grid';
-  }
-
-  addSourceIfNotExist(workspace_id, channel, parent_id, prefix) {
-    if (!this.current_collection_key_channels[channel]) {
-      this.current_collection_key_channels[channel] = 'drive' + channel;
-    }
-    Collections.get('drive').addSource(
-      {
-        http_base_url: 'drive/v2',
-        http_options: {
-          workspace_id: workspace_id || Workspaces.currentWorkspaceId,
-          directory_id: parent_id || (this.current_directory_channels[channel] || {}).id,
-          trash: parent_id ? false : !!this.is_in_trash_channels[channel],
-          public_access_token: this.public_access_token,
-        },
-        websockets: [
-          {
-            uri:
-              'drive/' +
-              (workspace_id || Workspaces.currentWorkspaceId) +
-              '/' +
-              (parent_id || (this.current_directory_channels[channel] || {}).id) +
-              (!parent_id && this.is_in_trash_channels[channel] ? '/trash' : ''),
-            options: { type: 'drive' },
-          },
-        ],
-      },
-      (prefix ? prefix : '') + this.current_collection_key_channels[channel],
-    );
-    return (prefix ? prefix : '') + this.current_collection_key_channels[channel];
-  }
-
-  changeCurrentDirectory(channel, directory, workspace_id) {
-    if (this.changing_directory[channel]) {
-      return;
-    }
-
-    this.current_directory_channels[channel] = directory;
-
-    if (!Collections.get('drive').find(directory.id)) {
-      var wid = Workspaces.currentWorkspaceId;
-      this.changing_directory[channel] = true;
-      var tmp = this.find(
-        workspace_id || Workspaces.currentWorkspaceId,
-        directory.id || 'root',
-        () => {
-          this.changing_directory[channel] = false;
-          this.changeCurrentDirectory(channel, directory, wid);
-        },
-      );
-      if (!tmp._searching) {
-        this.changing_directory[channel] = false;
-      }
-      this.current_directory_channels[channel] = tmp;
-    } else {
-      this.current_directory_channels[channel] = Collections.get('drive').find(directory.id);
-    }
-
-    var current_position_key =
-      (this.current_directory_channels[channel] || {}).id +
-      '_' +
-      (workspace_id || Workspaces.currentWorkspaceId) +
-      (this.is_in_trash_channels[channel] ? '_trash' : '') +
-      channel;
-
-    if (this.current_position_key_channels[channel] !== current_position_key) {
-      this.current_position_key_channels[channel] = current_position_key;
-
-      var old_drive_collection_key = this.current_collection_key_channels[channel];
-      if (old_drive_collection_key) {
-        Collections.get('drive').removeSource(old_drive_collection_key);
-      }
-      this.current_collection_key_channels[channel] = 'drive_' + current_position_key;
-
-      this.addSourceIfNotExist(workspace_id, channel);
-    }
-
-    this.notify();
-  }
-
-  toggleInTrash(channel) {
-    this.is_in_trash_channels[channel] = !this.is_in_trash_channels[channel];
-    var dir = {};
-    if (this.is_in_trash_channels[channel]) {
-      dir = this.trash_directories[channel] || { id: 'trash' };
-    } else {
-      dir = this.root_directories[channel] || 'root';
-    }
-
-    this.changeCurrentDirectory(channel, dir);
-  }
-
-  toggleView() {
-    this.view_mode = this.view_mode === 'grid' ? 'list' : 'grid';
-    LocalStorage.setItem('drive_view', this.view_mode);
-    this.notify();
-  }
-
-  find(workspace_id, directory_id, callback, test_preview_count, force) {
-    if (!directory_id) {
-      return;
-    }
-
-    if (directory_id === 'root' || directory_id === 'trash') {
-      var key = workspace_id + '_' + directory_id;
-
-      if (this.root_directories[key] && directory_id === 'root') {
-        return this.root_directories[key] || {};
-      }
-
-      if (this.trash_directories[key] && directory_id === 'trash') {
-        return this.trash_directories[key] || {};
-      }
-
-      if (this.looking_for_root_directories[key]) {
-        return {};
-      }
-
-      this.looking_for_root_directories[key] = true;
-
-      Api.post(
-        '/ajax/drive/v2/find',
-        {
-          options: {
-            element_id: directory_id,
-            workspace_id: workspace_id,
-            public_access_token: this.public_access_token,
-          },
-        },
-        res => {
-          this.looking_for_root_directories[key] = false;
-          if (res && res.data) {
-            if (directory_id === 'root') {
-              this.root_directories[key] = res.data;
-            }
-            if (directory_id === 'trash') {
-              this.trash_directories[key] = res.data;
-            }
-            Collections.get('drive').updateObject(res.data);
-            if (callback) callback(res.data);
-          }
-        },
-      );
-      return { _searching: true };
-    } else {
-      if (this.looking_for[directory_id]) {
-        return {};
-      }
-
-      if (Collections.get('drive').find(directory_id) && !force) {
-        return Collections.get('drive').find(directory_id);
-      }
-      this.looking_for[directory_id] = true;
-
-      Api.post(
-        '/ajax/drive/v2/find',
-        {
-          options: {
-            element_id: directory_id,
-            workspace_id: workspace_id,
-            public_access_token: this.public_access_token,
-          },
-        },
-        res => {
-          if (res && res.data) {
-            this.looking_for[directory_id] = false;
-            Collections.get('drive').updateObject(res.data);
-            if (callback) {
-              callback(res.data);
-            }
-            if (
-              !res.data.is_directory &&
-              !res.data.preview_has_been_generated &&
-              (!test_preview_count || test_preview_count < 4)
-            ) {
-              setTimeout(() => {
-                this.find(workspace_id, directory_id, () => {}, (test_preview_count || 0) + 1);
-              }, 2000);
-            }
-          }
-        },
-      );
-      return { _searching: true };
-    }
-  }
-
-  addPathForElement(element, try_find) {
-    element = Collections.get('drive').find(element.id) || element;
-
-    if (!element.path) {
-      if (try_find !== false) {
-        this.find(
-          element.workspace_id,
-          element.id,
-          res => {
-            this.addPathForElement(res, false);
-          },
-          false,
-          true,
-        );
-      }
-      element.path = [];
-    }
-
-    if (
-      element.path &&
-      element.path[element.path.length - 1] &&
-      element.path[element.path.length - 1].id !== element.id
-    ) {
-      element.path.push(JSON.parse(JSON.stringify(element)));
-    }
-
-    if (!element.parent_id || element.parent_id === 'root') {
-      element.path = element.path || [];
-      return;
-    }
-
-    var parent = Collections.get('drive').find(element.parent_id);
-
-    if (!parent) {
-      element.path = element.path || [];
-      return;
-    }
-
-    element.path = JSON.parse(JSON.stringify(parent.path || [parent]));
-    if (
-      parent.path &&
-      parent.path[parent.path.length - 1] &&
-      parent.path[parent.path.length - 1].id !== element.id
-    ) {
-      element.path.push(JSON.parse(JSON.stringify(element)));
-    }
-  }
-
-  save(object, driveCollectionKey) {
-    Collections.get('drive').save(object, driveCollectionKey);
-  }
-
-  updateAccess(object, values, driveCollectionKey) {
-    object.acces_info = object.acces_info || {};
-    Object.keys(values).forEach(k => {
-      object.acces_info[k] = values[k];
-    });
-
-    object._once_set_access = true;
-    this.save(object, driveCollectionKey);
-  }
-
-  createFile(workspace_id, name, parent, options, driveCollectionKey, callback) {
-    if (!name) {
-      return;
-    }
-
-    if (!options) {
-      options = {};
-    }
-
-    var file = Collections.get('drive').editCopy();
-
-    file.name = name;
-    file.trash = false;
-    file.is_directory = false;
-    file.parent_id = (parent || {}).id || 'root';
-    file.workspace_id = workspace_id || Workspaces.currentWorkspaceId;
-    if (options.url) {
-      file.url = options.url;
-    }
-    if (options.download_content_from_url) {
-      file.file_url = options.download_content_from_url;
-    }
-
-    this.addPathForElement(file);
-
-    Collections.get('drive').save(file, driveCollectionKey, callback);
-  }
-
-  createDirectory(workspace_id, name, parent, driveCollectionKey, callback, options) {
-    if (!name) {
-      return;
-    }
-
-    if (!options) {
-      options = {};
-    }
-
-    var directory = Collections.get('drive').editCopy();
-
-    directory.name = name;
-    directory.trash = false;
-    directory.is_directory = true;
-    directory.parent_id = (parent || {}).id || 'root';
-    directory.workspace_id = workspace_id || Workspaces.currentWorkspaceId;
-    directory.external_storage = options.external_storage || false;
-
-    if (options.application_id) {
-      directory.application_id = options.application_id;
-    }
-
-    this.addPathForElement(directory);
-
-    Collections.get('drive').save(directory, driveCollectionKey, callback);
-  }
-
-  moveFile(objects_id, directory, driveCollectionKey) {
-    if (objects_id && typeof objects_id != 'object') {
-      objects_id = [objects_id];
-    }
-    if (!objects_id) {
-      return;
-    }
-
-    if (!directory || !directory.is_directory || !directory.id) {
-      return;
-    }
-
-    objects_id.forEach(el_id => {
-      var el = Collections.get('drive').find(el_id);
-      if (el && el.parent_id !== directory.id && el.id !== directory.id) {
-        el.parent_id = directory.id;
-        el.detached = false;
-        this.addPathForElement(el);
-        Collections.get('drive').save(el, driveCollectionKey);
-      }
-    });
-  }
-
-  removeDefinitively(element, collection_key) {
-    if (element && typeof element != 'object') {
-      element = [element];
-    }
-    if (!element) {
-      return;
-    }
-
-    element.forEach(el => {
-      Collections.get('drive').remove(el, collection_key);
-    });
-  }
-
-  remove(element, collection_key) {
-    if (element && typeof element != 'object') {
-      element = [element];
-    }
-    if (!element) {
-      return;
-    }
-
-    element.forEach(el => {
-      el.trash = true;
-      Collections.get('drive').save(el, collection_key);
-    });
-  }
-
-  restore(element, collection_key) {
-    if (element && typeof element != 'object') {
-      element = [element];
-    }
-    if (!element) {
-      return;
-    }
-
-    element.forEach(el => {
-      el.trash = false;
-      Collections.get('drive').save(el, collection_key);
-    });
-  }
-
-  emptyTrash(workspace_id, callback) {
-    Api.post('/ajax/drive/trash/empty', { workspace_id: workspace_id }, res => {
-      if (!res.errors || res.errors.length === 0) {
-        if (res.data) {
-          this.trash_directories[workspace_id + '_trash'] = res.data;
-
-          Collections.get('drive').updateObject(res.data);
-
-          if (callback) callback();
-        }
-      }
-    });
-  }
-
-  getLink(element, version_id, download, public_access_key) {
-    if (element && element.length) {
-      //Multiple elements
-
-      var workspace_id = element[0].workspace_id;
-
-      return (
-        Api.route('/ajax/drive/download') +
-          '?workspace_id=' +
-          workspace_id +
-          '&elements_id=' +
-          element.map(item => item.id).join(',') +
-          '&download=1' +
-          '&parent_id=' +
-          (element[0] || {}).parent_id ||
-        element.parent_id + (public_access_key ? '&public_access_key=' + public_access_key : '')
-      );
-    }
-
-    if (element.url) {
-      return element.url;
-    }
-
-    // eslint-disable-next-line no-redeclare
-    var workspace_id = element.workspace_id;
-    var version = '';
-    if (version_id !== undefined) {
-      version = '&version_id=' + version_id;
-    }
-    return (
-      Api.route('/ajax/drive/download') +
-        '?workspace_id=' +
-        workspace_id +
-        '&element_id=' +
-        element.id +
-        version +
-        '&download=' +
-        (download ? '1' : '0') +
-        '&parent_id=' +
-        (element[0] || {}).parent_id ||
-      element.parent_id + (public_access_key ? '&public_access_key=' + public_access_key : '')
-    );
-  }
-
-  getFileType(file) {
-    var extension = file.extension?.toLocaleLowerCase();
-
-    var extension2type = {
-      image: ['png', 'jpg', 'jpeg', 'gif', 'tiff', 'heic'],
-      audio: ['wav', 'aif', 'aiff', 'mp3', 'flac'],
-      link: ['url'],
-      document: ['doc', 'docx', 'odt', 'rtf', 'txt'],
-      slides: ['ppt', 'pptx', 'odp'],
-      spreadsheet: ['xls', 'xlsx', 'ods', 'csv'],
-      pdf: ['pdf'],
-      svg: ['svg'],
-      video: ['mp4', 'mov', 'avi', 'webm', 'm4v', 'mkv'],
-      archive: ['zip', 'tar', 'gz', 'rar'],
-      code: ['php', 'c', 'cpp', 'py', 'html', 'yml', 'json', 'md'],
-    };
-
-    var keys = Object.keys(extension2type);
-    for (var i = 0; i < keys.length; i++) {
-      if (extension2type[keys[i]].indexOf(extension) >= 0) {
-        return keys[i];
-      }
-    }
-
-    if (AceModeList.getMode(extension) !== 'text') {
-      return 'code';
-    }
-
-    return 'other';
-  }
-
-  viewDocument(file, previewonly = false) {
-    this.viewed_document = file;
-    this.previewonly = previewonly;
-    this.notify();
-  }
-
-  getEditorsCandidates(current) {
-    var preview_candidate = [];
-    var editor_candidate = [];
-
-    if ((current.hidden_data || {}).preview_url) {
-      preview_candidate.push({
-        url: (current.hidden_data || {}).preview_url,
-      });
-    }
-    if ((current.hidden_data || {}).editor_url) {
-      editor_candidate.push({
-        is_url_file: true,
-        url: (current.hidden_data || {}).editor_url,
-        name: (current.hidden_data || {}).editor_name || 'web link',
-        app: {
-          name: (current.hidden_data || {}).editor_name || 'web link',
-        },
-      });
-    }
-
-    const apps = getCompanyApplications(Groups.currentGroupId).filter(
-      app =>
-        app.display?.tdrive?.files?.editor?.preview_url ||
-        app.display?.tdrive?.files?.editor?.edition_url,
-    );
-
-    //Primary exts
-    apps.forEach(app => {
-      if (
-        (app.display?.tdrive?.files?.editor?.extensions || []).indexOf(
-          ((current.extension || '') + (current.url ? '.url' : '')).toLocaleLowerCase(),
-        ) >= 0
-      ) {
-        if (app.display?.tdrive?.files?.editor?.edition_url) {
-          editor_candidate.push({ app });
-        }
-        if (app.display?.tdrive?.files?.editor?.preview_url) {
-          preview_candidate.push({
-            url: app.display?.tdrive?.files?.editor?.preview_url,
-            app: app,
-          });
-        }
-      }
-    });
-
-    //Default viewers
-
-    if (this.getFileType(current) === 'pdf') {
-      preview_candidate.push({
-        url:
-          '/public/viewer/PDFViewer/viewer.html?link=' +
-          encodeURIComponent(this.getLink(current, null, true)),
-      });
-    }
-    if (this.getFileType(current) === 'image') {
-      preview_candidate.push({
-        url:
-          '/public/viewer/ImageViewer/viewer.html?link=' +
-          encodeURIComponent(this.getLink(current, null, true)),
-      });
-    }
-    if (this.getFileType(current) === 'video') {
-      preview_candidate.push({
-        url:
-          '/public/viewer/VideoViewer/viewer.html?link=' +
-          encodeURIComponent(this.getLink(current, null, true)),
-      });
-    }
-    if (this.getFileType(current) === 'audio') {
-      preview_candidate.push({
-        url:
-          '/public/viewer/AudioViewer/viewer.html?link=' +
-          encodeURIComponent(this.getLink(current, null, true)),
-      });
-    }
-    if (this.getFileType(current) === 'code') {
-      preview_candidate.push({
-        url:
-          '/public/viewer/CodeViewer/viewer.html?ext=' +
-          current.extension +
-          '&link=' +
-          encodeURIComponent(this.getLink(current, null, true)),
-      });
-    }
-
-    //Secondary ext
-    apps.forEach(app => {
-      if (
-        (app.display?.tdrive?.files?.editor?.extensions || []).indexOf(
-          ((current.extension || '') + (current.url ? '.url' : '')).toLocaleLowerCase(),
-        ) >= 0
-      ) {
-        if (app.display?.tdrive?.files?.editor?.edition_url) {
-          editor_candidate.push({ app });
-        }
-        if (app.display?.tdrive?.files?.editor?.preview_url) {
-          preview_candidate.push({
-            url: app.display?.tdrive?.files?.editor?.preview_url,
-            app: app,
-          });
-        }
-      }
-    });
-
-    return {
-      preview_candidate: _.uniqBy(preview_candidate, a => a.app?.id || a.url),
-      editor_candidate: _.uniqBy(editor_candidate, a => a.app?.id || a.url),
-    };
-  }
-
-  getFileUrlForEdition(url, app, id, cb) {
-    if (!app) {
-      cb(url);
-      return;
-    }
-    Api.post(
-      '/ajax/market/app/api/getToken',
-      {
-        application_id: app.id,
-        workspace_id: Workspaces.currentWorkspaceId,
-        group_id: Workspaces.currentGroupId,
-      },
-      res => {
-        var token = res.token;
-        url += (url.indexOf('?') > 0 ? '&' : '?') + 'token=' + token;
-        url += '&file_id=' + id;
-        url += '&workspace_id=' + Workspaces.currentWorkspaceId;
-        url += '&group_id=' + Workspaces.currentGroupId;
-        cb(url);
-      },
-    );
-  }
-}
-
-const service = new Drive();
-export default service;
diff --git a/tdrive/frontend/src/app/deprecated/Apps/Drive/utils/ace_modelist.js b/tdrive/frontend/src/app/deprecated/Apps/Drive/utils/ace_modelist.js
deleted file mode 100755
index 78098168..00000000
--- a/tdrive/frontend/src/app/deprecated/Apps/Drive/utils/ace_modelist.js
+++ /dev/null
@@ -1,211 +0,0 @@
-class AceModeList {
-  constructor() {
-    var supportedModes = {
-      ABAP: ['abap'],
-      ABC: ['abc'],
-      ActionScript: ['as'],
-      ADA: ['ada|adb'],
-      Apache_Conf: ['^htaccess|^htgroups|^htpasswd|^conf|htaccess|htgroups|htpasswd'],
-      AsciiDoc: ['asciidoc|adoc'],
-      Assembly_x86: ['asm|a'],
-      AutoHotKey: ['ahk'],
-      BatchFile: ['bat|cmd'],
-      Bro: ['bro'],
-      C_Cpp: ['cpp|c|cc|cxx|h|hh|hpp|ino'],
-      C9Search: ['c9search_results'],
-      Cirru: ['cirru|cr'],
-      Clojure: ['clj|cljs'],
-      Cobol: ['CBL|COB'],
-      coffee: ['coffee|cf|cson|^Cakefile'],
-      ColdFusion: ['cfm'],
-      CSharp: ['cs'],
-      Csound_Document: ['csd'],
-      Csound_Orchestra: ['orc'],
-      Csound_Score: ['sco'],
-      CSS: ['css'],
-      Curly: ['curly'],
-      D: ['d|di'],
-      Dart: ['dart'],
-      Diff: ['diff|patch'],
-      Dockerfile: ['^Dockerfile'],
-      Dot: ['dot'],
-      Drools: ['drl'],
-      Edifact: ['edi'],
-      Eiffel: ['e|ge'],
-      EJS: ['ejs'],
-      Elixir: ['ex|exs'],
-      Elm: ['elm'],
-      Erlang: ['erl|hrl'],
-      Forth: ['frt|fs|ldr|fth|4th'],
-      Fortran: ['f|f90'],
-      FTL: ['ftl'],
-      Gcode: ['gcode'],
-      Gherkin: ['feature'],
-      Gitignore: ['^.gitignore'],
-      Glsl: ['glsl|frag|vert'],
-      Gobstones: ['gbs'],
-      golang: ['go'],
-      GraphQLSchema: ['gql'],
-      Groovy: ['groovy'],
-      HAML: ['haml'],
-      Handlebars: ['hbs|handlebars|tpl|mustache'],
-      Haskell: ['hs'],
-      Haskell_Cabal: ['cabal'],
-      haXe: ['hx'],
-      Hjson: ['hjson'],
-      HTML: ['html|htm|xhtml|vue|we|wpy'],
-      HTML_Elixir: ['eex|html.eex'],
-      HTML_Ruby: ['erb|rhtml|html.erb'],
-      INI: ['ini|conf|cfg|prefs'],
-      Io: ['io'],
-      Jack: ['jack'],
-      Jade: ['jade|pug'],
-      Java: ['java'],
-      JavaScript: ['js|jsm|jsx'],
-      JSON: ['json'],
-      JSONiq: ['jq'],
-      JSP: ['jsp'],
-      JSSM: ['jssm|jssm_state'],
-      JSX: ['jsx'],
-      Julia: ['jl'],
-      Kotlin: ['kt|kts'],
-      LaTeX: ['tex|latex|ltx|bib'],
-      LESS: ['less'],
-      Liquid: ['liquid'],
-      Lisp: ['lisp'],
-      LiveScript: ['ls'],
-      LogiQL: ['logic|lql'],
-      LSL: ['lsl'],
-      Lua: ['lua'],
-      LuaPage: ['lp'],
-      Lucene: ['lucene'],
-      Makefile: ['^Makefile|^GNUmakefile|^makefile|^OCamlMakefile|make'],
-      Markdown: ['md|markdown'],
-      Mask: ['mask'],
-      MATLAB: ['matlab'],
-      Maze: ['mz'],
-      MEL: ['mel'],
-      MIXAL: ['mixal'],
-      MUSHCode: ['mc|mush'],
-      MySQL: ['mysql'],
-      Nix: ['nix'],
-      NSIS: ['nsi|nsh'],
-      ObjectiveC: ['m|mm'],
-      OCaml: ['ml|mli'],
-      Pascal: ['pas|p'],
-      Perl: ['pl|pm'],
-      pgSQL: ['pgsql'],
-      PHP: ['php|phtml|shtml|php3|php4|php5|phps|phpt|aw|ctp|module'],
-      Pig: ['pig'],
-      Powershell: ['ps1'],
-      Praat: ['praat|praatscript|psc|proc'],
-      Prolog: ['plg|prolog'],
-      Properties: ['properties'],
-      Protobuf: ['proto'],
-      Python: ['py'],
-      R: ['r'],
-      Razor: ['cshtml|asp'],
-      RDoc: ['Rd'],
-      Red: ['red|reds'],
-      RHTML: ['Rhtml'],
-      RST: ['rst'],
-      Ruby: ['rb|ru|gemspec|rake|^Guardfile|^Rakefile|^Gemfile'],
-      Rust: ['rs'],
-      SASS: ['sass'],
-      SCAD: ['scad'],
-      Scala: ['scala'],
-      Scheme: ['scm|sm|rkt|oak|scheme'],
-      SCSS: ['scss'],
-      SH: ['sh|bash|^.bashrc'],
-      SJS: ['sjs'],
-      Smarty: ['smarty|tpl'],
-      snippets: ['snippets'],
-      Soy_Template: ['soy'],
-      Space: ['space'],
-      SQL: ['sql'],
-      SQLServer: ['sqlserver'],
-      Stylus: ['styl|stylus'],
-      SVG: ['svg'],
-      Swift: ['swift'],
-      Tcl: ['tcl'],
-      Tex: ['tex'],
-      Text: ['txt'],
-      Textile: ['textile'],
-      Toml: ['toml'],
-      TSX: ['tsx'],
-      Twig: ['twig|swig'],
-      Typescript: ['ts|typescript|str'],
-      Vala: ['vala'],
-      VBScript: ['vbs|vb'],
-      Velocity: ['vm'],
-      Verilog: ['v|vh|sv|svh'],
-      VHDL: ['vhd|vhdl'],
-      Wollok: ['wlk|wpgm|wtest'],
-      XML: ['xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl|xaml'],
-      XQuery: ['xq'],
-      YAML: ['yaml|yml'],
-      // Add the missing mode "Django" to ext-modelist
-      Django: ['html'],
-    };
-
-    this.modes = [];
-    var Mode = function (name, caption, extensions) {
-      this.name = name;
-      this.caption = caption;
-      this.mode = 'ace/mode/' + name;
-      this.extensions = extensions;
-      var re;
-      if (/\^/.test(extensions)) {
-        re =
-          extensions.replace(/\|(\^)?/g, function (a, b) {
-            return '$|' + (b ? '^' : '^.*\\.');
-          }) + '$';
-      } else {
-        re = '^.*\\.(' + extensions + ')$';
-      }
-
-      this.extRe = new RegExp(re, 'gi');
-    };
-
-    Mode.prototype.supportsFile = function (filename) {
-      return filename.match(this.extRe);
-    };
-
-    var nameOverrides = {
-      ObjectiveC: 'Objective-C',
-      CSharp: 'C#',
-      golang: 'Go',
-      C_Cpp: 'C and C++',
-      Csound_Document: 'Csound Document',
-      Csound_Orchestra: 'Csound',
-      Csound_Score: 'Csound Score',
-      coffee: 'CoffeeScript',
-      HTML_Ruby: 'HTML (Ruby)',
-      HTML_Elixir: 'HTML (Elixir)',
-      FTL: 'FreeMarker',
-    };
-    this.modesByName = {};
-    for (var name in supportedModes) {
-      var data = supportedModes[name];
-      var displayName = (nameOverrides[name] || name).replace(/_/g, ' ');
-      var filename = name.toLowerCase();
-      var mode = new Mode(filename, displayName, data[0]);
-      this.modesByName[filename] = mode;
-      this.modes.push(mode);
-    }
-  }
-
-  getMode(ext) {
-    var mode = this.modesByName.text;
-    for (var i = 0; i < this.modes.length; i++) {
-      if (this.modes[i].supportsFile('.' + ext)) {
-        mode = this.modes[i];
-        break;
-      }
-    }
-    return mode.name;
-  }
-}
-
-const aceModeList = new AceModeList();
-export default aceModeList;
diff --git a/tdrive/frontend/src/app/deprecated/Apps/Feed/FeedLoader.ts b/tdrive/frontend/src/app/deprecated/Apps/Feed/FeedLoader.ts
deleted file mode 100644
index 25fb049d..00000000
--- a/tdrive/frontend/src/app/deprecated/Apps/Feed/FeedLoader.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-type Direction = "up" | "down";
-
-export type Completion = {
-  top: boolean;
-  bottom: boolean;
-};
-
-export type FeedResponse<T> = {
-  /**
-   * The request parameters which produced this response
-   */
-  query?: NextParameters & { pageSize: number };
-
-  /**
-   * The offsets to be used for the next queries
-   */
-  offsets: {
-    up: string;
-    down: string;
-  },
-
-  /**
-   * When the stream end has been reached (top or bottom):
-   * - Bottom may switch from true to false if new items are added
-   * - Top may not switch from true to false since we can not create items in the past.
-   */
-  completes: Completion;
-
-  /**
-   * A list of items
-   */
-  items: Array<T>;
-
-  /**
-   * false messages were not loaded for some reason 
-   */
-  loaded: boolean;
-
-  /**
-   * Set when an error occured
-   */
-  err?: Error;
-};
-
-export type InitParameters = {
-  /**
-   * Initial offset to load at a given position. If not defined we start to load like:
-   * - If direction is defined and 'up': load from the bottom of the stream
-   * - If direction is defined and down: load from the top of the stream
-   * - FIXME: THIS MUST BE IMPLEMENTED, this is not like this for now
-   */
-  offset?: string;
-
-  /**
-   * Number of items to fetch
-   */
-  pageSize?: number;
-
-  /**
-   * Initial direction to load the feed. If the offset is defined, we start to load at its position and in the direction given
-   */
-  direction: Direction;
-
-  /**
-   * Lock the item loading in the given direction:
-   * - When 'up', do not allow to load items up
-   * - When 'down', do not allow to load items down
-   * Warning: This may cause conflicts with mostly all the parameters above
-   */
-  lock?: Direction;
-}
-
-export type NextParameters = {
-  /**
-   * Load previous (up) or next (down) messages
-   */
-  direction: Direction;
-
-  /**
-   * Load from here
-   */
-  offset?: string;
-}
-
-/**
- * Loader interface
- */
-export interface FeedLoader<T> {
-  /**
-   * Init the loader
-   *
-   * @param parameters
-   */
-  init(parameters: InitParameters): Promise<FeedResponse<T>>;
-
-  /**
-   * Load next page
-   *
-   * @param parameters
-   */
-  nextPage(parameters: NextParameters): Promise<FeedResponse<T>>;
-
-  /**
-   * Get the already loaded items between the given offsets. When not defined, let the implementation return what it wants.
-   * Note that this will not load the items if they are not available, they will just send back what is already available in the loader.
-   */
-  getItems(fromTo?: { from: string, to: string }): T[];
-
-  /**
-   * Get the completion values
-   */
-  getCompletion(): Completion;
-
-  /**
-   * Destroy the loader and all its resources
-   *
-   * @param force: Optional parameter to destroy more resources on some cases
-   */
-  destroy?(force?: boolean): void;
-}
diff --git a/tdrive/frontend/src/app/deprecated/Apps/Tasks/Tasks.js b/tdrive/frontend/src/app/deprecated/Apps/Tasks/Tasks.js
deleted file mode 100755
index 15d7a1c2..00000000
--- a/tdrive/frontend/src/app/deprecated/Apps/Tasks/Tasks.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import MediumPopupManager from 'app/components/modal/modal-manager';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import Api from 'app/features/global/framework/api-service';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-
-class Tasks extends Observable {
-  constructor() {
-    super();
-    this.setObservableName('app_tasks_service');
-
-    this.current_board_by_workspace = {};
-    this.paused_notify = {};
-    this.index_calculation_pools = {};
-
-    Globals.window.tasks = this;
-  }
-
-  openBoard(id) {
-    this.current_board_by_workspace[Workspaces.currentWorkspaceId] = id;
-    this.notify();
-  }
-
-  remove(task, collectionKey) {
-    AlertManager.confirm(() => {
-      Collections.get('tasks').remove(task, collectionKey);
-      MediumPopupManager.closeAll();
-    });
-    if (task.front_id === (this.edited || {}).front_id) {
-      this.edited = null;
-    }
-  }
-
-  archive(task, collectionKey) {
-    task.archived = true;
-    Collections.get('tasks').save(task, collectionKey);
-    MediumPopupManager.closeAll();
-  }
-
-  unarchive(task, collectionKey) {
-    task.archived = false;
-    Collections.get('tasks').save(task, collectionKey);
-    MediumPopupManager.closeAll();
-  }
-
-  archiveAllTasksInList(list, collectionKey) {
-    var options = {};
-    AlertManager.confirm(() => {
-      Api.post('/ajax/tasks/list/tasks/archive', { object: list, options: options }, () => {});
-    });
-  }
-
-  removeAllTasksInList(list, only_archived_tasks, collectionKey) {
-    var options = {
-      only_archived_tasks: only_archived_tasks,
-    };
-    AlertManager.confirm(() => {
-      Api.post('/ajax/tasks/list/tasks/remove', { object: list, options: options }, () => {});
-    });
-  }
-
-  setElementIndexPool(key, pool) {
-    this.index_calculation_pools[key] = pool
-      .map(item => item.order)
-      .sort((a, b) => {
-        return (a || '').localeCompare(b || '');
-      });
-  }
-
-  getElementIndex(element, key) {
-    if (!this.index_calculation_pools[key]) {
-      this.index_calculation_pools[key] = [];
-    }
-    return this.index_calculation_pools[key].indexOf(element.order) || 0;
-  }
-
-  newIndexAfter(key, index) {
-    if (index === undefined) {
-      index = this.index_calculation_pools[key].length - 1;
-    }
-    var value = this.index_calculation_pools[key][index] || '';
-    var next_value = this.index_calculation_pools[key][index + 1] || '';
-    var letters = '0abcdefghijklmnopqrstuvwxyz'.split('');
-
-    // eslint-disable-next-line no-extend-native
-    String.prototype.replaceAt = function (index, replacement) {
-      return this.substr(0, index) + replacement + this.substr(index + replacement.length);
-    };
-
-    var found = false;
-    var i = 0;
-    while (!found) {
-      if (!value[i]) {
-        value = value.replaceAt(i, 'a');
-      }
-      if (!next_value[i]) {
-        next_value = next_value.replaceAt(i, 'z');
-      }
-      var diff = parseInt((letters.indexOf(next_value[i]) - letters.indexOf(value[i])) / 2);
-      if (diff === 0) {
-        i++;
-      } else {
-        value = value.replaceAt(i, letters[letters.indexOf(value[i]) + diff]);
-        return value.slice(0, i + 1);
-      }
-    }
-  }
-
-  getTasksInList(board_id, list_id, archived) {
-    if (!list_id) {
-      return [];
-    }
-    if (list_id.split('_')[0] === 'allusertasks') {
-      var filter = {};
-      if (archived !== undefined) {
-        filter.archived = archived ? true : false;
-      }
-      return Collections.get('tasks')
-        .findBy(filter)
-        .filter(a => {
-          if (a.participants.map(b => b.user_id_or_mail).indexOf(list_id.split('_')[1]) >= 0) {
-            return true;
-          }
-          return false;
-        });
-    }
-    if (list_id.split('_')[0] === 'workspaceusertasks') {
-      // eslint-disable-next-line no-redeclare
-      var filter = { workspace_id: list_id.split('_')[2] };
-      if (archived !== undefined) {
-        filter.archived = archived ? true : false;
-      }
-      return Collections.get('tasks')
-        .findBy(filter)
-        .filter(a => {
-          if (a.participants.map(b => b.user_id_or_mail).indexOf(list_id.split('_')[1]) >= 0) {
-            return true;
-          }
-          return false;
-        });
-    }
-    // eslint-disable-next-line no-redeclare
-    var filter = { board_id: board_id, list_id: list_id };
-    if (archived !== undefined) {
-      filter.archived = archived ? true : false;
-    }
-    return Collections.get('tasks').findBy(filter);
-  }
-}
-
-const service_tasks = new Tasks();
-export default service_tasks;
diff --git a/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/Collection.js b/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/Collection.js
index 6a09bd43..5f375182 100755
--- a/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/Collection.js
+++ b/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/Collection.js
@@ -1,8 +1,8 @@
-import Api from 'app/features/global/framework/api-service';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Number from 'app/features/global/utils/Numbers';
+import Api from '@features/global/framework/api-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import Number from '@features/global/utils/Numbers';
 import MultipleSecuredConnections from './MultipleSecuredConnections.js';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
 /** Collection
  * Act like a doctrine repository and try to be allways in sync with server in realtime
  */
diff --git a/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/SecuredConnection.js b/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/SecuredConnection.js
index 5870ea70..a3fd7553 100755
--- a/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/SecuredConnection.js
+++ b/tdrive/frontend/src/app/deprecated/CollectionsV1/Collections/SecuredConnection.js
@@ -1,11 +1,11 @@
-import Api from 'app/features/global/framework/api-service';
-import ws from 'app/deprecated/websocket/websocket.js';
+import Api from '@features/global/framework/api-service';
+import ws from '@deprecated/websocket/websocket.js';
 import CryptoJS from 'crypto-js';
 import sha256 from 'crypto-js/sha256';
 /** SecuredConnection
  * Create websockets encrypted connection
  */
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 export default class SecuredConnection {
   constructor(route, options, callback, http_options, collectionId) {
diff --git a/tdrive/frontend/src/app/deprecated/Configurators/ConfiguratorsManager.js b/tdrive/frontend/src/app/deprecated/Configurators/ConfiguratorsManager.js
index c8063339..96ee55eb 100755
--- a/tdrive/frontend/src/app/deprecated/Configurators/ConfiguratorsManager.js
+++ b/tdrive/frontend/src/app/deprecated/Configurators/ConfiguratorsManager.js
@@ -1,6 +1,6 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class ConfiguratorsManager extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/SelectionsManager/SelectionsManager.js b/tdrive/frontend/src/app/deprecated/SelectionsManager/SelectionsManager.js
index c04a909e..4b5d3045 100755
--- a/tdrive/frontend/src/app/deprecated/SelectionsManager/SelectionsManager.js
+++ b/tdrive/frontend/src/app/deprecated/SelectionsManager/SelectionsManager.js
@@ -1,6 +1,6 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class SelectionsManager extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/login/account.js b/tdrive/frontend/src/app/deprecated/login/account.js
index cbee43be..3d264422 100755
--- a/tdrive/frontend/src/app/deprecated/login/account.js
+++ b/tdrive/frontend/src/app/deprecated/login/account.js
@@ -1,6 +1,6 @@
-import Api from 'app/features/global/framework/api-service';
-import Languages from 'app/features/global/services/languages-service';
-import DepreciatedCollections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
+import Api from '@features/global/framework/api-service';
+import Languages from '@features/global/services/languages-service';
+import DepreciatedCollections from '@deprecated/CollectionsV1/Collections/Collections.js';
 import Login from '../../features/auth/login-service';
 import { getUser } from '../../features/users/hooks/use-user-list';
 
diff --git a/tdrive/frontend/src/app/deprecated/popupManager/popupManager.js b/tdrive/frontend/src/app/deprecated/popupManager/popupManager.js
index 57f2e63e..2ddb1648 100755
--- a/tdrive/frontend/src/app/deprecated/popupManager/popupManager.js
+++ b/tdrive/frontend/src/app/deprecated/popupManager/popupManager.js
@@ -1,8 +1,8 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import WindowService from 'app/features/global/utils/window';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import MenusManager from '@components/menus/menus-manager.jsx';
+import WindowService from '@features/global/utils/window';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class PopupService extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/search/search.js b/tdrive/frontend/src/app/deprecated/search/search.js
deleted file mode 100755
index 48a487ad..00000000
--- a/tdrive/frontend/src/app/deprecated/search/search.js
+++ /dev/null
@@ -1,254 +0,0 @@
-import React from 'react';
-import Languages from 'app/features/global/services/languages-service';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Workspace from 'app/deprecated/workspaces/workspaces.jsx';
-import WorkspacesApps from 'app/deprecated/workspaces/workspaces_apps.jsx';
-import UserService from 'app/features/users/services/current-user-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Api from 'app/features/global/framework/api-service';
-import Strings from 'app/features/global/utils/strings';
-import DriveService from 'app/deprecated/Apps/Drive/Drive.js';
-import CalendarService from 'app/deprecated/Apps/Calendar/Calendar.js';
-import TasksService from 'app/deprecated/Apps/Tasks/Tasks.js';
-
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-
-class SearchService extends Observable {
-  constructor() {
-    super();
-    this.setObservableName('SearchService');
-    Globals.window.searchPopupService = this;
-    this.row = [];
-    this.value = '';
-    this.hasFilters = true;
-    this.type = 'message';
-    this.options = {};
-    this.scroll_id = false;
-    this.results = [];
-  }
-
-  open() {
-    this.isopen = true;
-    this.notify();
-  }
-
-  close() {
-    this.isopen = false;
-    this.notify();
-  }
-
-  setValue(text) {
-    this.value = text;
-    this.notify();
-  }
-
-  setType(type) {
-    this.type = type;
-    this.notify();
-  }
-
-  setOptions(options) {
-    this.options = options;
-  }
-
-  selectMessage(item, i) {}
-
-  select(item, i) {}
-
-  loadMore() {
-    this.search(true, { more: true });
-  }
-
-  search(http, options) {
-    if (!options) {
-      options = {};
-    }
-
-    if (http === undefined) {
-      http = true;
-    }
-
-    this.scroll_id = false;
-
-    if (this.search_loading) {
-      if (this.searchRetryTimeout) clearTimeout(this.searchRetryTimeout);
-      this.searchRetryTimeout = setTimeout(() => {
-        this.search();
-      }, 500);
-    }
-
-    var text = this.value.replace(/  +/, ' ');
-    var words = text.split(' ');
-    if (http && (text || '').trim() === '' && JSON.stringify(this.options).length < 3) {
-      return this.search(false);
-    }
-    if (
-      this.previousSearchText === (text || '').trim() &&
-      JSON.stringify(this.options) + this.type === this.previousSearchTextOptions
-    ) {
-      this.search_loading = false;
-      this.search_http_loading = false;
-      this.notify();
-      return;
-    }
-    this.previousSearchTextOptions = JSON.stringify(this.options) + this.type;
-    this.previousSearchText = (text || '').trim();
-
-    this.search_loading = true;
-    this.search_http_loading = true;
-    this.notify();
-
-    if (
-      http &&
-      ((text.length > 1 && words.length > 0) || JSON.stringify(this.options).length > 2)
-    ) {
-      var searchRoute = 'quicksearch';
-
-      // eslint-disable-next-line no-redeclare
-      var options = {};
-      if (this.type === 'file') {
-        options = this.options;
-        searchRoute = 'advancedfile';
-      } else if (this.type === 'message') {
-        options = this.options;
-        searchRoute = 'advancedbloc';
-      } else if (this.type === 'event') {
-        options = this.options;
-        searchRoute = 'advancedevent';
-      } else if (this.type === 'task') {
-        options = this.options;
-        searchRoute = 'advancedtask';
-      }
-
-      var workspaces_ids = undefined;
-      if (options) {
-        workspaces_ids = options.workspaces;
-      }
-
-      if (this.searchHTTPTimeout) clearTimeout(this.searchHTTPTimeout);
-      this.searchHTTPTimeout = setTimeout(() => {
-        //Load from HTTP
-        Api.post(
-          'globalsearch/' + searchRoute,
-          {
-            scroll_id: options.more ? this.scroll_id : undefined,
-            group_id: Workspace.currentGroupId,
-            words: words,
-            workspace_id: (workspaces_ids || []).length ? workspaces_ids : undefined,
-            options: options || {},
-          },
-          res => {
-            this.search(false);
-
-            var results = ((res || {}).data || {}).results || (res || {}).data || [];
-            if (results.scroll_id !== undefined) {
-              results = [];
-            }
-            this.scroll_id = ((res || {}).data || {}).scroll_id;
-
-            results.forEach(item => {
-              if (item.type === 'channel') {
-                this.completeItemSearchText(item.channel, words);
-                Collections.get('channels').completeObject(item.channel);
-              }
-              if (item.type === 'file') {
-                this.completeItemSearchText(item.file, words);
-                Collections.get('drive').completeObject(item.file);
-              }
-            });
-
-            if (!options.more) {
-              this.results = [];
-            }
-
-            this.results = this.results.concat(results);
-
-            this.search_http_loading = false;
-            this.notify();
-          },
-        );
-      }, 500);
-    }
-
-    //Search in collections
-
-    //Channels
-    var res = [];
-    Collections.get('channels')
-      .findBy({})
-      .forEach(item => {
-        if (
-          Object.values(item.members || [])
-            .concat(Object.values(item.ext_members || []))
-            .indexOf(UserService.getCurrentUserId()) >= 0
-        ) {
-          if (this.matchQuery(item, words, ['name'])) {
-            res.push({
-              type: 'channel',
-              channel: item,
-              workspace: Collections.get('workspaces').find(item.workspace_id),
-            });
-          }
-        }
-      });
-    Collections.get('drive')
-      .findBy({})
-      .forEach(item => {
-        if (this.matchQuery(item, words, ['name'])) {
-          res.push({
-            type: 'file',
-            file: item,
-            workspace: Collections.get('workspaces').find(item.workspace_id),
-          });
-        }
-      });
-    this.results = res;
-    this.notify();
-
-    this.search_loading = false;
-  }
-
-  isOpen() {
-    return this.isopen;
-  }
-
-  completeItemSearchText(object, words) {
-    object._search_text = object._search_text || '';
-    words.forEach(new_word => {
-      var replaced = false;
-      object._search_text.split(' ').forEach(present_word => {
-        if (present_word.trim() && new_word.trim().indexOf(present_word.trim()) >= 0) {
-          object._search_text = object._search_text.replace(
-            ' ' + present_word + ' ',
-            ' ' + new_word + ' ',
-          );
-          replaced = true;
-        }
-      });
-      if (!replaced) {
-        object._search_text += ' ' + new_word;
-      }
-    });
-    object._search_text += ' ';
-    object._search_text = object._search_text.replace(/  +/, ' ');
-  }
-
-  matchQuery(object, words, keys) {
-    return (words || []).some(word => {
-      return (keys || []).concat(['_search_text']).some(key => {
-        if (
-          word &&
-          Strings.removeAccents((object[key] || '').toLocaleLowerCase()).indexOf(
-            Strings.removeAccents(word.trim().toLocaleLowerCase()),
-          ) >= 0
-        ) {
-          return true;
-        }
-        return false;
-      });
-    });
-  }
-}
-
-const search = new SearchService();
-export default search;
diff --git a/tdrive/frontend/src/app/deprecated/uploadManager/upload-manager.js b/tdrive/frontend/src/app/deprecated/uploadManager/upload-manager.js
index ba0e8dd4..aef7c10a 100755
--- a/tdrive/frontend/src/app/deprecated/uploadManager/upload-manager.js
+++ b/tdrive/frontend/src/app/deprecated/uploadManager/upload-manager.js
@@ -1,6 +1,6 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class UploadManager extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/user/CurrentUser.ts b/tdrive/frontend/src/app/deprecated/user/CurrentUser.ts
index 1323825c..b89dd360 100755
--- a/tdrive/frontend/src/app/deprecated/user/CurrentUser.ts
+++ b/tdrive/frontend/src/app/deprecated/user/CurrentUser.ts
@@ -1,19 +1,19 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import $ from 'jquery';
-import Login from 'app/features/auth/login-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
-import Api from 'app/features/global/framework/api-service';
-import ws from 'app/deprecated/websocket/websocket';
-import Observable from 'app/deprecated/CollectionsV1/observable';
-import Number from 'app/features/global/utils/Numbers';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import Languages from 'app/features/global/services/languages-service';
-import JWTStorage from 'app/features/auth/jwt-storage-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
+import Login from '@features/auth/login-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
+import Api from '@features/global/framework/api-service';
+import ws from '@deprecated/websocket/websocket';
+import Observable from '@deprecated/CollectionsV1/observable';
+import Number from '@features/global/utils/Numbers';
+import AlertManager from '@features/global/services/alert-manager-service';
+import Languages from '@features/global/services/languages-service';
+import JWTStorage from '@features/auth/jwt-storage-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
 import UserAPIClient from '../../features/users/api/user-api-client';
-import { getUser } from 'app/features/users/hooks/use-user-list';
+import { getUser } from '@features/users/hooks/use-user-list';
 
 class CurrentUser extends Observable {
   loading: boolean;
diff --git a/tdrive/frontend/src/app/deprecated/user/NotificationPreferences.ts b/tdrive/frontend/src/app/deprecated/user/NotificationPreferences.ts
index f90dc026..9514a1ad 100644
--- a/tdrive/frontend/src/app/deprecated/user/NotificationPreferences.ts
+++ b/tdrive/frontend/src/app/deprecated/user/NotificationPreferences.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import Observable from 'app/deprecated/Observable/Observable';
-import Languages from 'app/features/global/services/languages-service';
-import { ToasterService as Toaster } from 'app/features/global/services/toaster-service';
+import Observable from '@deprecated/Observable/Observable';
+import Languages from '@features/global/services/languages-service';
+import { ToasterService as Toaster } from '@features/global/services/toaster-service';
 import {
   NotificationPreferencesType,
   preferencesType,
-} from 'app/features/users/types/notification-preferences-type';
+} from '@features/users/types/notification-preferences-type';
 
 type Keys = keyof preferencesType;
 type Values = preferencesType[Keys];
diff --git a/tdrive/frontend/src/app/deprecated/user/notification_parameters.js b/tdrive/frontend/src/app/deprecated/user/notification_parameters.js
index b8806299..999140e8 100755
--- a/tdrive/frontend/src/app/deprecated/user/notification_parameters.js
+++ b/tdrive/frontend/src/app/deprecated/user/notification_parameters.js
@@ -1,12 +1,12 @@
-import Languages from 'app/features/global/services/languages-service';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import ws from 'app/deprecated/websocket/websocket.js';
-import Api from 'app/features/global/framework/api-service';
-import Login from 'app/features/auth/login-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import AlertManager from 'app/features/global/services/alert-manager-service';
+import Languages from '@features/global/services/languages-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import ws from '@deprecated/websocket/websocket.js';
+import Api from '@features/global/framework/api-service';
+import Login from '@features/auth/login-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import AlertManager from '@features/global/services/alert-manager-service';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 /**
  * FIXME: This service seems still used by some components but we now have ./NotificationPreferences one which seems to overlap...
diff --git a/tdrive/frontend/src/app/deprecated/websocket/websocket.js b/tdrive/frontend/src/app/deprecated/websocket/websocket.js
index 3e7cf139..036c2d1f 100755
--- a/tdrive/frontend/src/app/deprecated/websocket/websocket.js
+++ b/tdrive/frontend/src/app/deprecated/websocket/websocket.js
@@ -1,8 +1,8 @@
-import Number from 'app/features/global/utils/Numbers';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import LoginService from 'app/features/auth/login-service';
-import Logger from 'app/features/global/framework/logger-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Number from '@features/global/utils/Numbers';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import LoginService from '@features/auth/login-service';
+import Logger from '@features/global/framework/logger-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 import WebSocket from '../../features/global/types/websocket-types';
 
 /**
diff --git a/tdrive/frontend/src/app/deprecated/workspaces/groups.js b/tdrive/frontend/src/app/deprecated/workspaces/groups.js
index ce2a0756..bff154e2 100755
--- a/tdrive/frontend/src/app/deprecated/workspaces/groups.js
+++ b/tdrive/frontend/src/app/deprecated/workspaces/groups.js
@@ -1,15 +1,15 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Api from 'app/features/global/framework/api-service';
-import ws from 'app/deprecated/websocket/websocket.js';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import Api from '@features/global/framework/api-service';
+import ws from '@deprecated/websocket/websocket.js';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
 import ListenGroups from './listen_groups.js';
 
 import $ from 'jquery';
-import JWTStorage from 'app/features/auth/jwt-storage-service';
+import JWTStorage from '@features/auth/jwt-storage-service';
 import CompanyAPIClient from '../../features/companies/api/company-api-client';
-import UserService from 'app/features/users/services/current-user-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import UserService from '@features/users/services/current-user-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class Groups extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/workspaces/listen_groups.js b/tdrive/frontend/src/app/deprecated/workspaces/listen_groups.js
index 8bfa1c36..f30461c1 100755
--- a/tdrive/frontend/src/app/deprecated/workspaces/listen_groups.js
+++ b/tdrive/frontend/src/app/deprecated/workspaces/listen_groups.js
@@ -1,5 +1,5 @@
-import ws from 'app/deprecated/websocket/websocket.js';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
+import ws from '@deprecated/websocket/websocket.js';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
 
 class ListenGroups {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/workspaces/listen_workspace.js b/tdrive/frontend/src/app/deprecated/workspaces/listen_workspace.js
index ac565018..4811dd40 100755
--- a/tdrive/frontend/src/app/deprecated/workspaces/listen_workspace.js
+++ b/tdrive/frontend/src/app/deprecated/workspaces/listen_workspace.js
@@ -1,5 +1,5 @@
-import ws from 'app/deprecated/websocket/websocket.js';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
+import ws from '@deprecated/websocket/websocket.js';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
 
 class ListenWorkspace {
   constructor() {
diff --git a/tdrive/frontend/src/app/deprecated/workspaces/workspaces.jsx b/tdrive/frontend/src/app/deprecated/workspaces/workspaces.jsx
index 6bbef39e..e26e577a 100755
--- a/tdrive/frontend/src/app/deprecated/workspaces/workspaces.jsx
+++ b/tdrive/frontend/src/app/deprecated/workspaces/workspaces.jsx
@@ -1,19 +1,19 @@
-import DepreciatedCollections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import { default as popupManager, default as PopupManager } from 'app/deprecated/popupManager/popupManager.js';
-import ws from 'app/deprecated/websocket/websocket.js';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import workspacesApps from 'app/deprecated/workspaces/workspaces_apps.jsx';
-import JWTStorage from 'app/features/auth/jwt-storage-service';
-import loginService from 'app/features/auth/login-service';
-import ConsoleService from 'app/features/console/services/console-service';
-import Api from 'app/features/global/framework/api-service';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import Logger from 'app/features/global/framework/logger-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import WindowService from 'app/features/global/utils/window';
-import RouterServices from 'app/features/router/services/router-service';
-import workspacesUsers from 'app/features/workspace-members/services/workspace-members-service';
+import DepreciatedCollections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import { default as popupManager, default as PopupManager } from '@deprecated/popupManager/popupManager.js';
+import ws from '@deprecated/websocket/websocket.js';
+import Groups from '@deprecated/workspaces/groups.js';
+import workspacesApps from '@deprecated/workspaces/workspaces_apps.jsx';
+import JWTStorage from '@features/auth/jwt-storage-service';
+import loginService from '@features/auth/login-service';
+import ConsoleService from '@features/console/services/console-service';
+import Api from '@features/global/framework/api-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
+import Logger from '@features/global/framework/logger-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import WindowService from '@features/global/utils/window';
+import RouterServices from '@features/router/services/router-service';
+import workspacesUsers from '@features/workspace-members/services/workspace-members-service';
 import $ from 'jquery';
 import WorkspaceAPIClient from '../../features/workspaces/api/workspace-api-client';
 
diff --git a/tdrive/frontend/src/app/deprecated/workspaces/workspaces_apps.jsx b/tdrive/frontend/src/app/deprecated/workspaces/workspaces_apps.jsx
index 41d8ec33..e02ac315 100755
--- a/tdrive/frontend/src/app/deprecated/workspaces/workspaces_apps.jsx
+++ b/tdrive/frontend/src/app/deprecated/workspaces/workspaces_apps.jsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import CurrentUser from 'app/deprecated/user/CurrentUser';
-import Api from 'app/features/global/framework/api-service';
-import ws from 'app/deprecated/websocket/websocket.js';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import CurrentUser from '@deprecated/user/CurrentUser';
+import Api from '@features/global/framework/api-service';
+import ws from '@deprecated/websocket/websocket.js';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
 import Groups from './groups.js';
 import Workspaces from './workspaces.jsx';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Icon from 'app/components/icon/icon';
-import { getUser } from 'app/features/users/hooks/use-user-list';
-import Login from 'app/features/auth/login-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import Icon from '@components/icon/icon';
+import { getUser } from '@features/users/hooks/use-user-list';
+import Login from '@features/auth/login-service';
 import { Folder, Calendar, CheckSquare, Hexagon } from 'react-feather';
-import { getCompanyApplication as getApplication } from 'app/features/applications/state/company-applications';
+import { getCompanyApplication as getApplication } from '@features/applications/state/company-applications';
 
 class WorkspacesApps extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/features/auth/auth-service.ts b/tdrive/frontend/src/app/features/auth/auth-service.ts
index 7d977ad1..9115eb63 100644
--- a/tdrive/frontend/src/app/features/auth/auth-service.ts
+++ b/tdrive/frontend/src/app/features/auth/auth-service.ts
@@ -1,24 +1,24 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
+import { TdriveService } from '@features/global/framework/registry-decorator-service';
 import InitService, {
   ConsoleConfiguration,
   InternalConfiguration,
-} from 'app/features/global/services/init-service';
+} from '@features/global/services/init-service';
 import { AuthProvider } from './provider/auth-provider';
 import OIDCAuthProviderService from './provider/oidc/oidc-auth-provider-service';
 import InternalAuthProviderService from './provider/internal/internal-auth-provider-service';
-import Logger from 'app/features/global/framework/logger-service';
+import Logger from '@features/global/framework/logger-service';
 
 import AlertManager from '../../features/global/services/alert-manager-service';
-import Languages from 'app/features/global/services/languages-service';
-import { UserType } from 'app/features/users/types/user';
-import JWT, { JWTDataType } from 'app/features/auth/jwt-storage-service';
+import Languages from '@features/global/services/languages-service';
+import { UserType } from '@features/users/types/user';
+import JWT, { JWTDataType } from '@features/auth/jwt-storage-service';
 import UserAPIClient from '../../features/users/api/user-api-client';
-import Application from 'app/features/applications/services/application-service';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Application from '@features/applications/services/application-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 type AccountType = 'remote' | 'internal';
 export type LoginState =
diff --git a/tdrive/frontend/src/app/features/auth/jwt-storage-service.ts b/tdrive/frontend/src/app/features/auth/jwt-storage-service.ts
index 22ec52be..d06d45db 100755
--- a/tdrive/frontend/src/app/features/auth/jwt-storage-service.ts
+++ b/tdrive/frontend/src/app/features/auth/jwt-storage-service.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import LoginService from 'app/features/auth/login-service';
-import WindowService from 'app/features/global/utils/window';
-import ConsoleAPIClient from 'app/features/console/api/console-api-client';
+import LocalStorage from '@features/global/framework/local-storage-service';
+import LoginService from '@features/auth/login-service';
+import WindowService from '@features/global/utils/window';
+import ConsoleAPIClient from '@features/console/api/console-api-client';
 import { TdriveService } from '../global/framework/registry-decorator-service';
 import Logger from '../global/framework/logger-service';
 
diff --git a/tdrive/frontend/src/app/features/auth/login-service.ts b/tdrive/frontend/src/app/features/auth/login-service.ts
index 3b1a5c92..2f1fbca2 100755
--- a/tdrive/frontend/src/app/features/auth/login-service.ts
+++ b/tdrive/frontend/src/app/features/auth/login-service.ts
@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import Logger from 'app/features/global/framework/logger-service';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import WindowState from 'app/features/global/utils/window';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Logger from '@features/global/framework/logger-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import WindowState from '@features/global/utils/window';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 import RouterServices from '../router/services/router-service';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import AuthService from 'app/features/auth/auth-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
+import AuthService from '@features/auth/auth-service';
 import Application from '../applications/services/application-service';
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 import { Cookies } from 'react-cookie';
 import InitService from '../global/services/init-service';
 
diff --git a/tdrive/frontend/src/app/features/auth/provider/auth-provider.ts b/tdrive/frontend/src/app/features/auth/provider/auth-provider.ts
index 19089977..87ae6ee0 100644
--- a/tdrive/frontend/src/app/features/auth/provider/auth-provider.ts
+++ b/tdrive/frontend/src/app/features/auth/provider/auth-provider.ts
@@ -1,4 +1,4 @@
-import { JWTDataType } from 'app/features/auth/jwt-storage-service';
+import { JWTDataType } from '@features/auth/jwt-storage-service';
 
 type AuthEvent =
   | 'userLoaded'
diff --git a/tdrive/frontend/src/app/features/auth/provider/internal/internal-auth-provider-service.ts b/tdrive/frontend/src/app/features/auth/provider/internal/internal-auth-provider-service.ts
index ddc34fe8..e59ea85f 100644
--- a/tdrive/frontend/src/app/features/auth/provider/internal/internal-auth-provider-service.ts
+++ b/tdrive/frontend/src/app/features/auth/provider/internal/internal-auth-provider-service.ts
@@ -1,11 +1,11 @@
-import Logger from 'app/features/global/framework/logger-service';
+import Logger from '@features/global/framework/logger-service';
 import { InternalConfiguration } from '../../../global/services/init-service';
 import Observable from '../../../../deprecated/Observable/Observable';
 import { TdriveService } from '../../../global/framework/registry-decorator-service';
 import { AuthProvider, InitParameters } from '../auth-provider';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import RouterService from 'app/features/router/services/router-service';
-import ConsoleAPIClient from 'app/features/console/api/console-api-client';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import RouterService from '@features/router/services/router-service';
+import ConsoleAPIClient from '@features/console/api/console-api-client';
 
 export type SignInParameters = {
   username: string;
diff --git a/tdrive/frontend/src/app/features/auth/provider/oidc/oidc-auth-provider-service.ts b/tdrive/frontend/src/app/features/auth/provider/oidc/oidc-auth-provider-service.ts
index 7343033c..14617adf 100644
--- a/tdrive/frontend/src/app/features/auth/provider/oidc/oidc-auth-provider-service.ts
+++ b/tdrive/frontend/src/app/features/auth/provider/oidc/oidc-auth-provider-service.ts
@@ -3,14 +3,14 @@ import Oidc from 'oidc-client';
 import environment from '../../../../environment/environment';
 import { ConsoleConfiguration } from '../../../global/services/init-service';
 import Observable from '../../../../deprecated/Observable/Observable';
-import Logger from 'app/features/global/framework/logger-service';
-import { getAsFrontUrl } from 'app/features/global/utils/URLUtils';
+import Logger from '@features/global/framework/logger-service';
+import { getAsFrontUrl } from '@features/global/utils/URLUtils';
 import { TdriveService } from '../../../global/framework/registry-decorator-service';
 import EnvironmentService from '../../../global/framework/environment-service';
 import { AuthProvider, InitParameters } from '../auth-provider';
-import ConsoleService from 'app/features/console/services/console-service';
-import jwtStorageService, { JWTDataType } from 'app/features/auth/jwt-storage-service';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
+import ConsoleService from '@features/console/services/console-service';
+import jwtStorageService, { JWTDataType } from '@features/auth/jwt-storage-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
 
 const OIDC_CALLBACK_URL = '/oidccallback';
 const OIDC_SIGNOUT_URL = '/signout';
@@ -96,7 +96,7 @@ export default class OIDCAuthProviderService
     try {
       await this.userManager!.signinRedirectCallback();
     } catch (e) {
-      console.log("Not connected, connect through SSO");
+      console.log('Not connected, connect through SSO');
     }
 
     const user = await this.userManager?.getUser();
diff --git a/tdrive/frontend/src/app/features/channel-members-search/api/members-api-client.ts b/tdrive/frontend/src/app/features/channel-members-search/api/members-api-client.ts
deleted file mode 100644
index 1ce6a47e..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/api/members-api-client.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ChannelMemberType } from 'app/features/channel-members-search/types/channel-members';
-import Api from 'app/features/global/framework/api-service';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
-import {
-  ParamsChannelMember,
-  PayloadChannelMemberType,
-  ResponseChannelMemberType,
-  ResponseChannelMemberTypeList,
-} from '../types/channel-members';
-
-@TdriveService('ChannelMemberAPIClientService')
-class ChannelMembersApiClient {
-  private readonly apiBaseUrl: string = '/internal/services/channels/v1/companies';
-  private _realtime: WebsocketRoom = { room: '', token: '' };
-  public get realtime(): WebsocketRoom {
-    return this._realtime;
-  }
-  public set realtime(value: WebsocketRoom) {
-    this._realtime = value;
-  }
-
-  async getMembers(params: ParamsChannelMember, search?: string) {
-    console.log('getMembers ....', params);
-    return Api.get<ResponseChannelMemberTypeList>(
-      `${this.apiBaseUrl}/${params.companyId}/workspaces/${params.workspaceId}/channels/${
-        params.channelId
-      }/members?websockets=1${search ? `&search=${search}` : ''}`,
-    ).then(({ websockets, resources }) => {
-      if (websockets) this.realtime = websockets[0];
-      return resources;
-    });
-  }
-
-  async addMember(member: Partial<ChannelMemberType>, params: ParamsChannelMember) {
-    return Api.post<PayloadChannelMemberType, ResponseChannelMemberType>(
-      `${this.apiBaseUrl}/${params.companyId}/workspaces/${params.workspaceId}/channels/${params.channelId}/members`,
-      { resource: member },
-    ).then(({ resource }) => resource);
-  }
-
-  async deleteMember(memberId: string, params: ParamsChannelMember) {
-    return Api.delete<ResponseChannelMemberType>(
-      `${this.apiBaseUrl}/${params.companyId}/workspaces/${params.workspaceId}/channels/${params.channelId}/members/${memberId}`,
-    ).then(({ resource }) => {
-      return resource;
-    });
-  }
-}
-
-export default new ChannelMembersApiClient();
diff --git a/tdrive/frontend/src/app/features/channel-members-search/api/pending-emails-api-client.ts b/tdrive/frontend/src/app/features/channel-members-search/api/pending-emails-api-client.ts
deleted file mode 100644
index 1be6122a..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/api/pending-emails-api-client.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import Api from "app/features/global/framework/api-service";
-import { TdriveService } from "app/features/global/framework/registry-decorator-service";
-import { ChannelPendingEmail, ChannelPendingEmailResponse, ParamsChannelMember, PayloadChannelPendingEmail, ResponseChannelPendingEmail, ResponseDeletePendingEmailResponse } from "../types/channel-members";
-
-@TdriveService('ChannelPendingEmailMemberAPIClientService')
-class ChannelPendingEmailApiClient {
-    private readonly apiBaseUrl: string = '/internal/services/channels/v1/companies';
-
-    async list(params: ParamsChannelMember) {
-        const { companyId, workspaceId, channelId } = params;
-
-        return Api.get<ChannelPendingEmailResponse>(
-            `${this.apiBaseUrl}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails`,
-        ).then(({resources}) => resources);
-    }
-
-    async get(email: string, params: ParamsChannelMember) {
-        const { companyId, workspaceId, channelId } = params;
-
-        return Api.get<ChannelPendingEmail>(
-            `${this.apiBaseUrl}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails/${email}`,
-        );
-    }
-
-    async add(
-        guest: Partial<ChannelPendingEmail>,
-        params: ParamsChannelMember,
-    ) {
-        const { companyId, workspaceId, channelId } = params;
-
-        return Api.post<PayloadChannelPendingEmail, ResponseChannelPendingEmail>(
-            `${this.apiBaseUrl}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails`,
-            { resource: guest }
-        ).then(({resource}) => resource);
-    }
-
-    async delete(
-        email: string,
-        params: ParamsChannelMember,
-    ) {
-        const { companyId, workspaceId, channelId } = params;
-
-        return Api.delete<ResponseDeletePendingEmailResponse>(
-            `${this.apiBaseUrl}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails/${email}`,
-        );
-    }
-}
-
-export default new ChannelPendingEmailApiClient();
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/member-hook.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/member-hook.ts
deleted file mode 100644
index e2414d83..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/member-hook.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import ChannelMembersAPIClient from 'app/features/channel-members-search/api/members-api-client';
-import ChannelCurrentMemberAPIClient from 'app/features/channel-members/api/channel-members-api-client';
-import { useChannel } from 'app/features/channels/hooks/use-channel';
-import {
-  useDirectChannels,
-} from 'app/features/channels/hooks/use-direct-channels';
-import { useFavoriteChannels } from 'app/features/channels/hooks/use-favorite-channels';
-import {
-  usePublicOrPrivateChannels,
-  useRefreshPublicOrPrivateChannels,
-} from 'app/features/channels/hooks/use-public-or-private-channels';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
-import { ChannelMemberSelector } from '../state/store';
-import { ChannelMemberType, ParamsChannelMember } from '../types/channel-members';
-import { useRefreshChannelMembers } from './members-hook';
-
-export function useChannelMemberCurrentUser(channelId: string) {
-  const { favoriteChannels, refresh: refreshAllChannels } = useFavoriteChannels();
-  const { directChannels } = useDirectChannels();
-  const { publicChannels, privateChannels } = usePublicOrPrivateChannels();
-  const { channel } = useChannel(channelId);
-  const { user } = useCurrentUser();
-  const member = [...publicChannels, ...privateChannels, ...directChannels].find(
-    c => c.id === channelId,
-  )?.user_member;
-  return {
-    member,
-    favorite: favoriteChannels?.find(favoriteChannel => favoriteChannel.id === channel?.id),
-    setFavorite: async (favorite: boolean) => {
-      await ChannelCurrentMemberAPIClient.updateChannelMemberPreferences(
-        member as ChannelMemberType,
-        { favorite },
-        {
-          companyId: channel.company_id || '',
-          workspaceId: channel.workspace_id || '',
-          channelId: channel.id || '',
-          userId: user?.id || '',
-        },
-      );
-      await refreshAllChannels();
-    },
-    setNotificationPreference: async (preference: 'all' | 'none' | 'mentions' | 'me') => {
-      if (channel.company_id && channel.workspace_id && channel.id && user?.id) {
-        await ChannelCurrentMemberAPIClient.updateChannelMemberPreferences(
-          member as ChannelMemberType,
-          { notification_level: preference },
-          {
-            companyId: channel.company_id,
-            workspaceId: channel.workspace_id,
-            channelId: channel.id,
-            userId: user?.id,
-          },
-        );
-        await refreshAllChannels();
-      }
-    },
-  };
-}
-
-export function useChannelMember(userId: string, params?: ParamsChannelMember) {
-  const channelId = params?.channelId ? params.channelId : useRouterChannel();
-  const workspaceId = params?.workspaceId ? params.workspaceId : useRouterWorkspace();
-  const companyId = params?.companyId ? params.companyId : useRouterCompany();
-  const parameters = { companyId, workspaceId, channelId };
-
-  const member = useRecoilValue(ChannelMemberSelector({ channelId, userId }));
-  const { refresh } = useRefreshChannelMembers(parameters);
-  const { refresh: refreshChannelsBar } = useRefreshPublicOrPrivateChannels();
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const leave = async (userId: string) => {
-    setLoading(true);
-
-    await ChannelMembersAPIClient.deleteMember(userId, {
-      companyId,
-      workspaceId,
-      channelId,
-    });
-    refresh();
-    refreshChannelsBar();
-    setLoading(false);
-  };
-
-  const addMember = async (userId: string) => {
-    setLoading(true);
-
-    await ChannelMembersAPIClient.addMember(
-      { user_id: userId },
-      {
-        companyId,
-        workspaceId,
-        channelId,
-      },
-    );
-    setLoading(false);
-    refresh();
-  };
-
-  return {
-    member,
-    refresh,
-    leave,
-    addMember,
-    loading,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/members-hook.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/members-hook.ts
deleted file mode 100644
index 6abca125..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/members-hook.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import ChannelMembersApiClient from 'app/features/channel-members-search/api/members-api-client';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { useRecoilState } from 'recoil';
-import { ChannelMemberWithUser, ParamsChannelMember } from '../types/channel-members';
-import { ListChannelMembersStateFamily } from '../state/store';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-
-export const useRefreshChannelMembers = (parameters: ParamsChannelMember) => {
-  const [members, setMembers] = useRecoilState(ListChannelMembersStateFamily(parameters));
-  const [loading, setLoading] = useRecoilState(LoadingState('useChannelMembers'));
-
-  const refresh = async () => {
-    setLoading(true);
-    const listMembers = await ChannelMembersApiClient.getMembers(parameters);
-
-    if (listMembers) {
-      setMembers(listMembers);
-    }
-    setLoading(false);
-  };
-
-  return {
-    channelMembers: members,
-    loading,
-    refresh,
-  };
-};
-
-export function useChannelMembers(params?: ParamsChannelMember): {
-  channelMembers: ChannelMemberWithUser[];
-  loading: boolean;
-  refresh: () => Promise<void>;
-} {
-  const companyId = params?.companyId ? params.companyId : useRouterCompany();
-  const workspaceId = params?.workspaceId ? params.workspaceId : useRouterWorkspace();
-  const channelId = params?.channelId ? params.channelId : useRouterChannel();
-
-  const parameters = { companyId, workspaceId, channelId };
-
-  const { refresh, channelMembers, loading } = useRefreshChannelMembers(parameters);
-
-  //Will be called once only
-  useGlobalEffect(
-    'useChannelMembers',
-    () => {
-      refresh();
-    },
-    [],
-  );
-
-  return {
-    channelMembers,
-    loading,
-    refresh,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/search-channel-member.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/search-channel-member.ts
deleted file mode 100644
index 93b8b984..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/search-channel-member.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import ChannelMembersAPIClient from 'app/features/channel-members-search/api/members-api-client';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import { matchQuery } from 'app/features/global/utils/strings';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import _ from 'lodash';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { SearchChannelMemberInputState } from '../state/search-channel-member';
-import { ListChannelMembersStateFamily } from '../state/store';
-import { ParamsChannelMember, ChannelMemberWithUser } from '../types/channel-members';
-
-export const useRefreshSearchChannelMembers = (context: ParamsChannelMember) => {
-  const searchInput = useRecoilValue(SearchChannelMemberInputState);
-  const setLoading = useSetRecoilState(LoadingState('useSearchChannelMembers'));
-  const [listChannelMembers, setChannelMembers] = useRecoilState<ChannelMemberWithUser[]>(
-    ListChannelMembersStateFamily(context),
-  );
-
-  const refresh = async () => {
-    setLoading(true);
-    const response = await ChannelMembersAPIClient.getMembers(context, searchInput);
-
-    setChannelMembers(_.uniqBy([...listChannelMembers, ...response], 'user_id'));
-    setLoading(false);
-  };
-
-  return {
-    refresh,
-    listChannelMembers,
-  };
-};
-
-export const useSearchChannelMembers = (channelId: string) => {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-
-  const context: ParamsChannelMember = {
-    companyId,
-    workspaceId,
-    channelId: channelId ? channelId : useRouterChannel(),
-  };
-
-  const searchInput = useRecoilValue(SearchChannelMemberInputState);
-  const [loading, setLoading] = useRecoilState(LoadingState('useSearchChannelMembers'));
-  const { refresh, listChannelMembers } = useRefreshSearchChannelMembers(context);
-
-  useGlobalEffect(
-    'useSearchChannelMembers',
-    () => {
-      (async () => {
-        setLoading(true);
-        if (searchInput) {
-          delayRequest('useSearchChannelMembers', async () => {
-            await refresh();
-          });
-        }
-      })();
-    },
-    [searchInput],
-  );
-
-  const listChannelMembersFiltered = listChannelMembers.filter(cm => {
-    if (!cm.user) return false;
-    return matchQuery(
-      searchInput,
-      `${cm.user.email} ${cm.user.first_name} ${cm.user.last_name} ${cm.user.username}`,
-    );
-  });
-
-  return {
-    refresh,
-    loading,
-    listChannelMembers: listChannelMembersFiltered,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/search-pending-email.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/search-pending-email.ts
deleted file mode 100644
index d055faa4..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/search-pending-email.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useRecoilValue } from 'recoil';
-import { SearchChannelMemberInputState } from '../state/search-channel-member';
-import { ParamsChannelMember } from '../types/channel-members';
-import { useChannelPendingEmails } from './use-pending-emails';
-
-export const useSearchChannelPendingEmail = (params?: ParamsChannelMember) => {
-  const searchInput = useRecoilValue(SearchChannelMemberInputState);
-  const { pendingEmails } = useChannelPendingEmails(params);
-  let filteredList = pendingEmails;
-
-  if (searchInput) {
-    filteredList = pendingEmails.filter(({ email }) => {
-      return searchInput.split(' ').every(() => {
-        return email.includes(searchInput);
-      });
-    });
-  }
-
-  return {
-    filteredPendingEmails: filteredList,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/search-users.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/search-users.ts
deleted file mode 100644
index ae0979f9..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/search-users.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useSearchUsers } from 'app/features/users/hooks/use-search-user-list';
-import { useRecoilValue } from 'recoil';
-import { SearchChannelMemberInputState } from '../state/search-channel-member';
-
-export const useSearchFilteredUsers = () => {
-  const searchInput = useRecoilValue(SearchChannelMemberInputState);
-  const { result: filteredUsers } = useSearchUsers({ scope: 'company' });
-  let filteredList = filteredUsers;
-
-  if (searchInput) {
-    filteredList = filteredUsers.filter(({ email }) => {
-      return searchInput.split(' ').every(item => {
-        return email.includes(item);
-      });
-    });
-  }
-
-  return {
-    filteredPendingEmails: filteredList,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-email-hook.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-email-hook.ts
deleted file mode 100644
index 4d545306..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-email-hook.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import ChannelPendingEmailApiClient from 'app/features/channel-members-search/api/pending-emails-api-client';
-import ConsoleService from 'app/features/console/services/console-service';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useState } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { SearchChannelMemberInputState } from '../state/search-channel-member';
-import { PendingEmailSelector } from '../state/store';
-import { useChannelPendingEmails } from './use-pending-emails';
-
-export function usePendingEmail(email: string) {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const channelId = useRouterChannel();
-
-  const pEmail = useRecoilValue(PendingEmailSelector({ channelId, email }));
-  const { refresh } = useChannelPendingEmails();
-  const [loading, setLoading] = useState<boolean>(false);
-
-  const setSearchState = useSetRecoilState(SearchChannelMemberInputState);
-
-  const cancelInvite = async () => {
-    setLoading(true);
-
-    await ChannelPendingEmailApiClient.delete(email, {
-      companyId,
-      workspaceId,
-      channelId,
-    }).then(() => {
-      setLoading(false);
-      refresh();
-    });
-  };
-
-  const addInvite = async (role: 'guest' | 'member' = 'guest') => {
-    setLoading(true);
-
-    const guest = {
-      workspace_id: workspaceId,
-      channel_id: channelId,
-      company_id: companyId,
-      email: email,
-    };
-
-    await ChannelPendingEmailApiClient.add(guest, {
-      companyId,
-      workspaceId,
-      channelId,
-    }).then(() => {
-      setLoading(false);
-      setSearchState('');
-      refresh();
-    });
-
-    await ConsoleService.addMailsInWorkspace({
-      workspace_id: workspaceId,
-      company_id: companyId,
-      emails: [email],
-      workspace_role: 'member',
-      company_role: role,
-    });
-  };
-
-  return {
-    loading,
-    email: pEmail,
-    cancelInvite,
-    addInvite,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-emails.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-emails.ts
deleted file mode 100644
index 907648c6..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/use-pending-emails.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useRecoilState } from 'recoil';
-import { ListPendingEmailsStateFamily } from '../state/store';
-import { ChannelPendingEmail, ParamsChannelMember } from '../types/channel-members';
-import ChannelPendingEmailApiClient from 'app/features/channel-members-search/api/pending-emails-api-client';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-
-export function useChannelPendingEmails(params?: ParamsChannelMember): {
-  pendingEmails: ChannelPendingEmail[];
-  loading: boolean;
-  refresh: () => Promise<void>;
-} {
-  const companyId = params?.companyId ? params.companyId : useRouterCompany();
-  const channelId = params?.companyId ? params.companyId : useRouterChannel();
-  const workspaceId = params?.companyId ? params.companyId : useRouterWorkspace();
-
-  const parameters = { companyId, workspaceId, channelId };
-
-  const [loading, setLoading] = useRecoilState(LoadingState('useChannelPendingEmails'));
-  const [emails, setEmails] = useRecoilState(ListPendingEmailsStateFamily(parameters));
-
-  const refresh = async () => {
-    setLoading(true);
-    const listPendingEmails = await ChannelPendingEmailApiClient.list(parameters);
-
-    if (listPendingEmails) {
-      setEmails(listPendingEmails);
-    }
-    setLoading(false);
-  };
-
-  useGlobalEffect(
-    'useChannelPendingEmails',
-    () => {
-      refresh();
-    },
-    [channelId],
-  );
-
-  return {
-    pendingEmails: emails,
-    loading,
-    refresh,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channel-members-search/hooks/use-search-all.ts b/tdrive/frontend/src/app/features/channel-members-search/hooks/use-search-all.ts
deleted file mode 100644
index 8c35954f..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/hooks/use-search-all.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useSearchUsers } from 'app/features/users/hooks/use-search-user-list';
-import { UserType } from 'app/features/users/types/user';
-import _ from 'lodash';
-import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
-import { SearchChannelMemberInputState } from '../state/search-channel-member';
-import { ChannelMemberWithUser, ParamsChannelMember } from '../types/channel-members';
-import { useChannelMembers } from './members-hook';
-import { useSearchChannelMembers } from './search-channel-member';
-import { useSearchChannelPendingEmail } from './search-pending-email';
-import { useChannelPendingEmails } from './use-pending-emails';
-
-export const useSearchChannelMembersAll = (params: ParamsChannelMember) => {
-  const { channelMembers } = useChannelMembers(params);
-  const { listChannelMembers, refresh: refreshMembers } = useSearchChannelMembers(
-    params?.channelId || '',
-  );
-
-  const [searchState, setSearchState] = useRecoilState(SearchChannelMemberInputState);
-
-  const { pendingEmails } = useChannelPendingEmails(params);
-  const { filteredPendingEmails } = useSearchChannelPendingEmail(params);
-
-  const { result: usersList, search: searchUsers } = useSearchUsers({ scope: 'company' });
-
-  const pendingEmailList = searchState ? filteredPendingEmails : pendingEmails;
-  const channelMembersList = searchState ? listChannelMembers : channelMembers;
-
-  const refresh = async () => {
-    await refreshMembers();
-    searchUsers(searchState || '');
-  };
-
-  useEffect(() => {
-    searchUsers(searchState);
-  }, [searchState]);
-
-  const addEmailSuggestion =
-    !pendingEmailList.length &&
-    !!searchState.length &&
-    ![
-      ...pendingEmailList.map(e => e?.email.toLocaleLowerCase()),
-      ...channelMembersList.map(e => e.user?.email.toLocaleLowerCase()),
-      ...usersList.map(e => e?.email.toLocaleLowerCase()),
-    ].includes((searchState || '').toLocaleLowerCase());
-
-  return {
-    addEmailSuggestion,
-    usersList: _.differenceBy(
-      usersList,
-      channelMembersList || [],
-      item => (item as ChannelMemberWithUser).user_id || (item as UserType).id,
-    ),
-    pendingEmailList,
-    channelMembersList,
-    search: setSearchState,
-    query: searchState,
-    refresh,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/channel-members-search/state/search-channel-member.ts b/tdrive/frontend/src/app/features/channel-members-search/state/search-channel-member.ts
deleted file mode 100644
index edce16f8..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/state/search-channel-member.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { atom, useRecoilState } from "recoil";
-
-export const SearchChannelMemberInputState = atom<string>({
-    key: 'SearchChannelMemberInputState',
-    default: ''
-});
-
-const UsersSearchModalOpenState = atom<boolean>({ 
-    key: 'UsersSearchModalOpenState',
-    default: false 
-});
-
-export const useUsersSearchModal = () => {
-    const [open, setOpen] = useRecoilState(UsersSearchModalOpenState);
-    return {
-        open,
-        setOpen,
-    };
-};
diff --git a/tdrive/frontend/src/app/features/channel-members-search/state/store.ts b/tdrive/frontend/src/app/features/channel-members-search/state/store.ts
deleted file mode 100644
index b8b23701..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/state/store.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { atomFamily, selectorFamily, SerializableParam } from 'recoil';
-import { ChannelMemberWithUser, ChannelPendingEmail } from '../types/channel-members';
-
-// ChannelMemberType
-export const ListChannelMembersStateFamily = atomFamily<ChannelMemberWithUser[], SerializableParam>(
-  {
-    key: 'ListChannelMembersStateFamily',
-    default: [],
-  },
-);
-
-export const ListPendingEmailsStateFamily = atomFamily<ChannelPendingEmail[], SerializableParam>({
-  key: 'ListPendingEmailsStateFamily',
-  default: [],
-});
-
-export const ChannelMemberSelector = selectorFamily<
-  ChannelMemberWithUser | null,
-  { channelId: string; userId: string }
->({
-  key: 'ChannelMemberSelector',
-  get:
-    ({ channelId, userId }) =>
-    ({ get }) => {
-      const members = get(ListChannelMembersStateFamily(channelId));
-
-      const member = (members || []).find(m => m.user_id === userId);
-
-      if (member) {
-        return member;
-      }
-
-      return null;
-    },
-});
-
-export const PendingEmailSelector = selectorFamily<
-  ChannelPendingEmail | null,
-  { channelId: string; email: string }
->({
-  key: 'PendingEmailSelector',
-  get:
-    ({ channelId, email }) =>
-    ({ get }) => {
-      const pendingEmails = get(ListPendingEmailsStateFamily(channelId));
-
-      const guest = (pendingEmails || []).find(m => m.email === email);
-
-      if (guest) {
-        return guest;
-      }
-
-      return null;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/channel-members-search/types/channel-members.ts b/tdrive/frontend/src/app/features/channel-members-search/types/channel-members.ts
deleted file mode 100644
index 28160093..00000000
--- a/tdrive/frontend/src/app/features/channel-members-search/types/channel-members.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
-import { UserType } from 'app/features/users/types/user';
-
-export type ChannelMemberRole = 'member' | 'guest' | 'bot';
-
-export type ChannelMemberNotificationLevel = 'all' | 'none' | 'mentions' | 'me';
-
-export type ChannelMemberType = {
-  user_id?: string;
-  channel_id?: string;
-  type?: ChannelMemberRole;
-  last_access?: number; //Timestamp in seconds
-  last_increment?: number; //Number
-  favorite?: boolean; //Did the user add this channel to its favorites
-  notification_level?: ChannelMemberNotificationLevel;
-};
-
-export type ParamsChannelMember = {
-  companyId?: string;
-  workspaceId?: string;
-  channelId: string;
-};
-
-export type QueryChannelMember = {
-  search: string;
-};
-
-export type ResponseChannelMemberTypeList = {
-  resources: ChannelMemberWithUser[]; // before ChannelMemberType
-  websockets: WebsocketRoom[];
-};
-
-export type PayloadChannelMemberType = {
-  resource: Partial<ChannelMemberType>;
-};
-
-export type ResponseChannelMemberType = {
-  resource: ChannelMemberType;
-};
-
-export type ChannelPendingEmail = {
-  workspace_id: string;
-  channel_id: string;
-  company_id: string;
-  email: string;
-};
-
-export type ChannelPendingEmailResponse = {
-  resources: ChannelPendingEmail[];
-};
-
-export type PayloadChannelPendingEmail = {
-  resource: Partial<ChannelPendingEmail>;
-};
-
-export type ResponseChannelPendingEmail = {
-  resource: ChannelPendingEmail;
-};
-
-export type ResponseDeletePendingEmailResponse = { status: 'success' | 'error' };
-
-export type ChannelMemberWithUser = ChannelMemberType & { user: UserType };
diff --git a/tdrive/frontend/src/app/features/channel-members/api/channel-members-api-client.ts b/tdrive/frontend/src/app/features/channel-members/api/channel-members-api-client.ts
deleted file mode 100644
index 335b3bff..00000000
--- a/tdrive/frontend/src/app/features/channel-members/api/channel-members-api-client.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import Api from '../../global/framework/api-service';
-import { TdriveService } from '../../global/framework/registry-decorator-service';
-import {
-  ChannelMemberRole,
-  ChannelMemberType,
-} from 'app/features/channel-members/types/channel-member-types';
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
-import { ChannelMemberReadSectionType } from '../types/channel-member-read-section-type';
-
-type ChannelMembersSaveRequest = { resource: Partial<ChannelMemberType> };
-type ChannelMembersSaveResponse = { resource: ChannelMemberType };
-
-@TdriveService('ChannelMembersAPIClientService')
-class ChannelCurrentMemberAPIClientService {
-  private readonly prefix = '/internal/services/channels/v1/companies';
-  private realtime: Map<
-    { companyId: string; workspaceId: string; channelId: string },
-    WebsocketRoom[]
-  > = new Map();
-
-  websocket({
-    companyId,
-    workspaceId,
-    channelId,
-  }: {
-    companyId: string;
-    workspaceId: string;
-    channelId: string;
-  }): WebsocketRoom[] {
-    return this.realtime.get({ companyId, workspaceId, channelId }) || [];
-  }
-
-  /**
-   * Every member of the channel can list members of the channel.
-   * This returns a list of members in a channel.
-   *
-   * @param companyId string
-   * @param workspaceId string
-   * @param channelId string
-   * @returns ChannelMemberType[]
-   */
-  async list(
-    context: { companyId: string; workspaceId: string; channelId: string },
-    filters?: { role: ChannelMemberRole },
-  ) {
-    return Api.get<{ resources: ChannelMemberType[]; websockets: WebsocketRoom[] }>(
-      `${this.prefix}/${context.companyId}/workspaces/${context.workspaceId}/channels/${
-        context.channelId
-      }/members${filters?.role ? `?company_role=${filters.role}` : ''}?websockets=1`,
-    ).then(result => {
-      result.websockets && this.realtime.set(context, result.websockets);
-      return result.resources;
-    });
-  }
-
-  /**
-   * Channel member can update their own preferences
-   *
-   * @param channelMember ChannelMemberType
-   * @param partialsToUpdate Partial ChannelMemberType
-   * @param context Execution context of the update
-   */
-  async updateChannelMemberPreferences(
-    channelMember: ChannelMemberType,
-    partialsToUpdate: Partial<ChannelMemberType>,
-    context: { companyId: string; workspaceId: string; channelId: string; userId: string },
-  ) {
-    return Api.post<ChannelMembersSaveRequest, ChannelMembersSaveResponse>(
-      `${this.prefix}/${context.companyId}/workspaces/${context.workspaceId}/channels/${context.channelId}/members/${context.userId}`,
-      {
-        resource: { ...channelMember, ...partialsToUpdate },
-      },
-    ).then(result => result.resource);
-  }
-
-  /**
-   * Get the channel members read sections.
-   *
-   * @param context - channel members read sections context
-   * @returns {Promise<ChannelMemberReadSectionType[]>}
-   */
-  async getChannelMembersReadSections(context: {
-    companyId: string;
-    workspaceId: string;
-    channelId: string;
-  }): Promise<ChannelMemberReadSectionType[]> {
-    return Api.get<{ resources: ChannelMemberReadSectionType[] }>(
-      `${this.prefix}/${context.companyId}/workspaces/${context.workspaceId}/channels/${context.channelId}/members/read_sections`,
-    ).then(({ resources }) => resources);
-  }
-
-  /**
-   * Get the read sections for a specific member.
-   *
-   * @param context - channel member read sections context
-   * @returns {Promise<ChannelMemberReadSectionType>}
-   */
-  async getChannelMemberReadSection(context: {
-    companyId: string;
-    workspaceId: string;
-    channelId: string;
-    userId: string;
-  }): Promise<ChannelMemberReadSectionType> {
-    return Api.get<{ resource: ChannelMemberReadSectionType }>(
-      `${this.prefix}/${context.companyId}/workspaces/${context.workspaceId}/channels/${context.channelId}/members/${context.userId}/read_sections`,
-    ).then(({ resource }) => resource);
-  }
-}
-const ChannelCurrentMemberAPIClient = new ChannelCurrentMemberAPIClientService();
-
-export default ChannelCurrentMemberAPIClient;
diff --git a/tdrive/frontend/src/app/features/channel-members/hooks/use-channel-members-read-sections.ts b/tdrive/frontend/src/app/features/channel-members/hooks/use-channel-members-read-sections.ts
deleted file mode 100644
index 1ca05578..00000000
--- a/tdrive/frontend/src/app/features/channel-members/hooks/use-channel-members-read-sections.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { useRecoilState } from 'recoil';
-import ChannelMembersAPIClient from '../api/channel-members-api-client';
-import { ChannelMembersReadSectionsStateFamily } from '../state/channel-members-read-sections';
-import Numbers from 'app/features/global/utils/Numbers';
-
-export const useChannelMembersReadSections = (
-  companyId: string,
-  workspaceId: string,
-  channelId: string,
-) => {
-  const [loading, setLoading] = useRecoilState(LoadingState('useChannelMembersReadSections'));
-  const [sections, setSections] = useRecoilState(ChannelMembersReadSectionsStateFamily(channelId));
-
-  const refresh = async () => {
-    setLoading(true);
-    const sections = await ChannelMembersAPIClient.getChannelMembersReadSections({
-      companyId,
-      workspaceId,
-      channelId,
-    });
-
-    if (sections) {
-      setSections(sections);
-    }
-    setLoading(false);
-  };
-
-  const getMemberReadSection = (userId: string) => {
-    return sections.find(section => section.user_id === userId && section.channel_id === channelId);
-  };
-
-  const seen = (userId: string, messageId: string): boolean => {
-    const userSection = getMemberReadSection(userId);
-    if (!userSection) {
-      return false;
-    }
-
-    const [start, end] = userSection.read_section;
-    const startTime = Numbers.timeuuidToDate(start);
-    const endTime = Numbers.timeuuidToDate(end);
-    const messageTime = Numbers.timeuuidToDate(messageId);
-
-    return startTime <= messageTime && messageTime <= endTime;
-  };
-
-  return {
-    loading,
-    sections,
-    refresh,
-    getMemberReadSection,
-    seen,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/channel-members/state/channel-guests.ts b/tdrive/frontend/src/app/features/channel-members/state/channel-guests.ts
deleted file mode 100644
index 293715e9..00000000
--- a/tdrive/frontend/src/app/features/channel-members/state/channel-guests.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { atomFamily } from 'recoil';
-
-import {
-  AtomChannelMembersKey,
-  ChannelMemberType,
-} from 'app/features/channel-members/types/channel-member-types';
-
-export const ChannelGuestsState = atomFamily<ChannelMemberType[], AtomChannelMembersKey>({
-  key: 'ChannelGuestsState',
-  default: _key => [],
-});
diff --git a/tdrive/frontend/src/app/features/channel-members/state/channel-members-read-sections.ts b/tdrive/frontend/src/app/features/channel-members/state/channel-members-read-sections.ts
deleted file mode 100644
index 7a6eaaca..00000000
--- a/tdrive/frontend/src/app/features/channel-members/state/channel-members-read-sections.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { atomFamily, selectorFamily } from 'recoil';
-import { ChannelMemberReadSectionType } from '../types/channel-member-read-section-type';
-
-export const ChannelMembersReadSectionsStateFamily = atomFamily<ChannelMemberReadSectionType[], string>(
-  {
-    key: 'ChannelMembersReadSectionsStateFamily',
-    default: []
-  }
-);
-
-export const ChannelMembersReadSectionsSelector = selectorFamily<ChannelMemberReadSectionType[], { channelId: string }>(
-  {
-    key: 'ChannelMembersReadSectionsSelector',
-    get: ({ channelId }) => ({ get }) => {
-      const sections = get(ChannelMembersReadSectionsStateFamily(channelId));
-
-      if (sections) {
-        return sections;
-      }
-
-      return [];
-    }
-  }
-);
-
-export const ChannelMemberReadSectionSelector = selectorFamily<ChannelMemberReadSectionType | null, { channelId: string; userId: string }>({
-  key: 'ChannelMemberReadSectionSelector',
-  get: ({ channelId, userId }) => ({ get }) => {
-    const sections = get(ChannelMembersReadSectionsStateFamily(channelId));
-
-    const section = (sections || []).find(s => s.user_id === userId);
-
-    if (section) {
-      return section;
-    }
-
-    return null;
-  }
-});
diff --git a/tdrive/frontend/src/app/features/channel-members/state/channel-members.ts b/tdrive/frontend/src/app/features/channel-members/state/channel-members.ts
deleted file mode 100644
index ba673f86..00000000
--- a/tdrive/frontend/src/app/features/channel-members/state/channel-members.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { atomFamily } from 'recoil';
-
-import {
-  AtomChannelMembersKey,
-  ChannelMemberType,
-} from 'app/features/channel-members/types/channel-member-types';
-
-export const ChannelMembersState = atomFamily<ChannelMemberType[], AtomChannelMembersKey>({
-  key: 'ChannelMembersState',
-  default: _key => [],
-});
diff --git a/tdrive/frontend/src/app/features/channel-members/types/channel-member-read-section-type.ts b/tdrive/frontend/src/app/features/channel-members/types/channel-member-read-section-type.ts
deleted file mode 100644
index 0f8aa360..00000000
--- a/tdrive/frontend/src/app/features/channel-members/types/channel-member-read-section-type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type ChannelMemberReadSectionType = {
-  channel_id: string;
-  company_id: string;
-  user_id: string;
-  read_section: ReadSection;
-}
-
-export type ReadSection = [string, string];
diff --git a/tdrive/frontend/src/app/features/channel-members/types/channel-member-types.ts b/tdrive/frontend/src/app/features/channel-members/types/channel-member-types.ts
deleted file mode 100644
index c04dadd0..00000000
--- a/tdrive/frontend/src/app/features/channel-members/types/channel-member-types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type ChannelMemberRole = 'member' | 'guest' | 'bot';
-
-export type ChannelMemberNotificationLevel = 'all' | 'none' | 'mentions' | 'me';
-
-export type ChannelMemberType = {
-  user_id?: string;
-  channel_id?: string;
-  type?: ChannelMemberRole;
-  last_access?: number; //Timestamp in seconds
-  last_increment?: number; //Number
-  favorite?: boolean; //Did the user add this channel to its favorites
-  notification_level?: ChannelMemberNotificationLevel;
-};
-
-export type AtomChannelMembersKey = {
-  companyId: string;
-  workspaceId: string;
-  channelId: string;
-};
diff --git a/tdrive/frontend/src/app/features/channel-members/types/guest-types.ts b/tdrive/frontend/src/app/features/channel-members/types/guest-types.ts
deleted file mode 100644
index 5ed9f73c..00000000
--- a/tdrive/frontend/src/app/features/channel-members/types/guest-types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PendingEmail } from 'app/features/pending-emails/types/pending-email';
-import { ChannelMemberType } from './channel-member-types';
-
-export type GenericMemberType = 'pending-email' | 'guest';
-
-export type GenericMember = {
-  key: string;
-  type: GenericMemberType;
-  filterString: string;
-  resource: PendingEmail | ChannelMemberType;
-};
diff --git a/tdrive/frontend/src/app/features/channel-members/utils/channel-members-roles.ts b/tdrive/frontend/src/app/features/channel-members/utils/channel-members-roles.ts
deleted file mode 100644
index 391f733a..00000000
--- a/tdrive/frontend/src/app/features/channel-members/utils/channel-members-roles.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ChannelMemberRole } from '../types/channel-member-types';
-
-export const isGuestMember = (role: ChannelMemberRole) => {
-  return role === 'member';
-};
diff --git a/tdrive/frontend/src/app/features/channels/api/channel-api-client.ts b/tdrive/frontend/src/app/features/channels/api/channel-api-client.ts
deleted file mode 100644
index 7f6a92d8..00000000
--- a/tdrive/frontend/src/app/features/channels/api/channel-api-client.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import Api from '../../global/framework/api-service';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { TdriveService } from '../../global/framework/registry-decorator-service';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import { removeBadgesNow } from 'app/features/users/hooks/use-notifications';
-
-import Workspace from 'app/deprecated/workspaces/workspaces';
-import Logger from 'features/global/framework/logger-service';
-const PREFIX = '/internal/services/channels/v1/companies';
-
-export type SearchOptions = {
-  company_id: string;
-  page_token?: string;
-  limit?: number;
-};
-
-@TdriveService('ChannelAPIClientService')
-class ChannelAPIClientService {
-  private logger = Logger.getLogger('ChannelAPIClientService');
-
-  async getDirect(companyId: string, membersId: string[]) {
-    return Api.post<{ options: { members: string[] }; resource: unknown }, { resource: ChannelType }>(
-      `${PREFIX}/${companyId}/workspaces/direct/channels`,
-      { options: { members: membersId }, resource: {} },
-    ).then(result => result.resource);
-  }
-
-  async get(companyId: string, workspaceId: string, channelId: string): Promise<ChannelType> {
-    return Api.get<{ resource: ChannelType }>(
-      `${PREFIX}/${companyId}/workspaces/${workspaceId}/channels/${channelId}`,
-    ).then(result => result?.resource);
-  }
-
-  async save(
-    channel: ChannelType,
-    context: { companyId: string; workspaceId: string; channelId?: string },
-  ) {
-    return Api.post<{ resource: ChannelType }, { resource: ChannelType }>(
-      `${PREFIX}/${context.companyId}/workspaces/${context.workspaceId}/channels${
-        context?.channelId ? `/${context.channelId}` : ''
-      }`,
-      {
-        resource: channel,
-      },
-    ).then(result => result.resource);
-  }
-
-  async read(
-    companyId: string,
-    workspaceId: string,
-    channelId: string,
-    { status = true, requireFocus = false, now = false },
-  ): Promise<void> {
-    if (requireFocus && !document.hasFocus()) return;
-
-    if (status) removeBadgesNow('channel', channelId);
-
-    delayRequest(
-      'reach-end-read-channel-' + channelId,
-      async () =>
-        await Api.post<{ value: boolean }, void>(
-          `${PREFIX}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/read`,
-          {
-            value: status,
-          },
-        ),
-      { doInitialCall: now, timeout: 2000 },
-    );
-  }
-
-  async recent(companyId: string, limit: number): Promise<ChannelType[]> {
-    try {
-      const res = await Api.get<{ resources: ChannelType[] }>(
-        `${PREFIX}/${companyId}/channels/recent?limit=${limit}`,
-      );
-
-      return res.resources;
-    } catch (e) {
-      console.error("Can't retrieve channels", e);
-      return [];
-    }
-  }
-
-  async search(
-    searchString: string | null,
-    options: SearchOptions,
-  ): Promise<{ resources: ChannelType[] }> {
-    if (!searchString) {
-      return { resources: await this.recent(options.company_id, options?.limit || 100) };
-    }
-
-    const companyId = options?.company_id || Workspace.currentGroupId;
-    const query = `/internal/services/channels/v1/companies/${companyId}/search?q=${searchString}`;
-    const res = await Api.getWithParams<{ resources: ChannelType[] }>(query, options);
-    this.logger.debug(
-      `Search by name "${searchString}" with options`,
-      options,
-      '. Found',
-      res.resources.length,
-      'channels',
-    );
-    return res;
-  }
-}
-
-const ChannelAPIClient = new ChannelAPIClientService();
-export default ChannelAPIClient;
diff --git a/tdrive/frontend/src/app/features/channels/api/channels-mine-api-client.ts b/tdrive/frontend/src/app/features/channels/api/channels-mine-api-client.ts
deleted file mode 100644
index 794c8be6..00000000
--- a/tdrive/frontend/src/app/features/channels/api/channels-mine-api-client.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import Api from '../../global/framework/api-service';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { TdriveService } from '../../global/framework/registry-decorator-service';
-import { WebsocketRoom } from '../../global/types/websocket-types';
-
-type ChannelsMineGetResponse = { resources: ChannelType[]; websockets: WebsocketRoom[] };
-type ChannelsMineDeleteBaseResponse = {
-  statusCode: number;
-  error: string;
-  message: string;
-};
-
-@TdriveService('ChannelsMineAPIClientService')
-class ChannelsMineAPIClient {
-  private readonly prefix = '/internal/services/channels/v1/companies';
-  private readonly realtime: Map<string, WebsocketRoom[]> = new Map();
-
-  websockets(companyId: string, workspaceId: string): WebsocketRoom[] {
-    return this.realtime.get(this.getRealtimeKey(companyId, workspaceId)) || [];
-  }
-
-  getRealtimeKey(companyId: string, workspaceId: string) {
-    return `/companies/${companyId}/workspaces/${workspaceId}/channels`;
-  }
-
-  async save(
-    channel: ChannelType,
-    context: { companyId: string; workspaceId: string; channelId?: string },
-  ) {
-    return Api.post<{ resource: ChannelType }, { resource: ChannelType }>(
-      `${this.prefix}/${context.companyId}/workspaces/${context.workspaceId}/channels${
-        context?.channelId ? `/${context.channelId}` : ''
-      }`,
-      {
-        resource: channel,
-      },
-    ).then(result => result.resource);
-  }
-
-  /**
-   * @param companyId
-   * @param workspaceId
-   * @return channels that user is already a member
-   */
-  async get(context: { companyId: string; workspaceId?: string }): Promise<ChannelType[]> {
-    context.workspaceId = context.workspaceId || 'direct';
-
-    return Api.get<ChannelsMineGetResponse>(
-      `${this.prefix}/${context.companyId}/workspaces/${
-        context.workspaceId
-      }/channels?mine=1&websockets=1${context.workspaceId == 'direct' ? '&include_users=1' : ''}`,
-    ).then(result => {
-      this.realtime.set(
-        this.getRealtimeKey(context.companyId, context.workspaceId as string),
-        result.websockets,
-      );
-      return result.resources;
-    });
-  }
-
-  /**
-   * Remove user from a channel.
-   * Every user in the channel (except guests) can remove an user.
-   * A system message will be sent.
-   * We cannot call this route for direct channels.
-   * @param userId string
-   * @param context companyId - workspaceId - channelId
-   */
-  async removeUser(
-    userId: string,
-    context: { companyId: string; workspaceId: string; channelId: string },
-  ): Promise<ChannelsMineDeleteBaseResponse> {
-    return Api.delete<ChannelsMineDeleteBaseResponse>(
-      `${this.prefix}/${context.companyId}/workspaces/${context.workspaceId}/channels/${context.channelId}/members/${userId}`,
-    );
-  }
-
-  /**
-   * Remove a channel, this action is not reversible.
-   * Direct channels can not be removed.
-   * Only administrators and channel owner can remove a channel.
-   * @param companyId string
-   * @param workspaceId string
-   * @param channelId string
-   *
-   */
-  removeChannel(
-    companyId: string,
-    workspaceId: string,
-    channelId: string,
-  ): Promise<ChannelsMineDeleteBaseResponse> {
-    return Api.delete<ChannelsMineDeleteBaseResponse>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels/${channelId}`,
-    );
-  }
-}
-
-export default new ChannelsMineAPIClient();
diff --git a/tdrive/frontend/src/app/features/channels/api/channels-reachable-api-client.ts b/tdrive/frontend/src/app/features/channels/api/channels-reachable-api-client.ts
deleted file mode 100644
index 32df1ed2..00000000
--- a/tdrive/frontend/src/app/features/channels/api/channels-reachable-api-client.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  ChannelsReachableGetResponse,
-  ChannelsReachableInviteUserRequest,
-  ChannelsReachableInviteUserResponse,
-} from 'app/features/channels/types/channels-reachable-types';
-import Api from '../../global/framework/api-service';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { TdriveService } from '../../global/framework/registry-decorator-service';
-import { ChannelMemberType } from 'app/features/channel-members/types/channel-member-types';
-
-@TdriveService('ChannelsReachableAPIClientService')
-class ChannelsReachableAPIClientService {
-  private readonly prefix = '/internal/services/channels/v1/companies';
-
-  /**
-   * @param companyId
-   * @param workspaceId
-   * @return channels that user is not a member but could join
-   */
-  async get(companyId: string, workspaceId: string): Promise<ChannelType[]> {
-    return Api.get<ChannelsReachableGetResponse>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels`,
-    ).then(result => result.resources);
-  }
-
-  /**
-   * Add user to a channel.
-   * Every user in the channel (except guests) can invite or remove someone.
-   * A system message will be sent on invitations.
-   * @param companyId string
-   * @param workspaceId string
-   * @param userId string
-   *
-   */
-  async inviteUser(
-    companyId: string,
-    workspaceId: string,
-    channelId: string,
-    userId: string,
-  ): Promise<ChannelMemberType> {
-    return Api.post<ChannelsReachableInviteUserRequest, ChannelsReachableInviteUserResponse>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/members`,
-      {
-        resource: {
-          user_id: userId,
-        },
-      },
-    ).then(result => result.resource);
-  }
-}
-const ChannelsReachableAPIClient = new ChannelsReachableAPIClientService();
-export default ChannelsReachableAPIClient;
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-autoselect-channel.ts b/tdrive/frontend/src/app/features/channels/hooks/use-autoselect-channel.ts
deleted file mode 100644
index 37698294..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-autoselect-channel.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect } from 'react';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import RouterServices from 'app/features/router/services/router-service';
-import { useDirectChannels } from './use-direct-channels';
-import { usePublicOrPrivateChannels } from './use-public-or-private-channels';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-
-const fromLocalStorage = LocalStorage.getItem('default_channel_id_per_workspace');
-const activeChannelPerWorkspace: { [key: string]: string } =
-  (typeof fromLocalStorage === 'object' ? (fromLocalStorage as any) : {}) || {};
-
-export function useAutoSelectChannel() {
-  const workspaceId = useRouterWorkspace();
-  const channelId = useRouterChannel();
-  const { directChannels } = useDirectChannels();
-  const { publicChannels, privateChannels } = usePublicOrPrivateChannels();
-  const channels = [...directChannels, ...publicChannels, ...privateChannels];
-
-  useEffect(() => {
-    if (channelId) {
-      activeChannelPerWorkspace[workspaceId] = channelId;
-      LocalStorage.setItem('default_channel_id_per_workspace', activeChannelPerWorkspace);
-    }
-  }, [channelId]);
-
-  useEffect(() => {
-    if (!channelId && channels.length > 0) {
-      let preferedChannelId = activeChannelPerWorkspace[workspaceId];
-
-      if (!preferedChannelId || !channels.find(c => c.id === preferedChannelId)) {
-        preferedChannelId =
-          channels.sort((a, b) => (b.last_activity || 0) - (a.last_activity || 0))[0]?.id ||
-          preferedChannelId;
-      }
-
-      if (preferedChannelId) {
-        const url = RouterServices.generateRouteFromState({
-          channelId: preferedChannelId,
-        });
-        RouterServices.replace(url);
-      }
-    }
-  }, [workspaceId, channels.length > 0]);
-}
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-channel-media-files.ts b/tdrive/frontend/src/app/features/channels/hooks/use-channel-media-files.ts
deleted file mode 100644
index a12fa22e..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-channel-media-files.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useRecoilState } from 'recoil';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import messageApiClient from 'app/features/messages/api/message-api-client';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import {
-  channelAttachmentFileState,
-  channelAttachmentListState,
-  channelAttachmentMediaState,
-} from '../state/channel-attachment-list';
-import _ from 'lodash';
-
-export const useChannelAttachmentList = (type: 'file' | 'media') => {
-  const limit = 25;
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const channelId = useRouterChannel();
-  const [loading, setLoading] = useRecoilState(
-    LoadingState(`useChannelAttachmentList-${type}-${companyId}-${workspaceId}-${channelId}`),
-  );
-  const [isOpen] = useRecoilState(channelAttachmentListState);
-  const [, setchannelFiles] = useRecoilState(channelAttachmentFileState(companyId));
-  const [, setchannelMedia] = useRecoilState(channelAttachmentMediaState(companyId));
-
-  const [result, setResult] = useRecoilState(
-    type === 'media'
-      ? channelAttachmentMediaState(companyId)
-      : channelAttachmentFileState(companyId),
-  );
-
-  const options = _.omitBy(
-    {
-      limit,
-      is_file: type === 'file' || undefined,
-      is_media: type === 'media' || undefined,
-      workspace_id: workspaceId,
-      channel_id: channelId,
-    },
-    _.isUndefined,
-  );
-
-  const loadItems = async () => {
-    setLoading(true);
-
-    const response = await messageApiClient.searchFile(null, options);
-    const results = (response.resources || []).sort(
-      (a, b) => (b?.message?.created_at || 0) - (a?.message?.created_at || 0),
-    );
-
-    const update = {
-      results,
-      nextPage: response.next_page_token || null,
-    };
-
-    setResult(update);
-    setLoading(false);
-  };
-
-  const loadMore = async () => {
-    if (result.nextPage && result.results.length % limit === 0) {
-      const response = await messageApiClient.searchFile(null, { ...options, next_page_token: result.nextPage });
-      const results = (response.resources || []).sort(
-        (a, b) => (b?.message?.created_at || 0) - (a?.message?.created_at || 0),
-      );
-
-      const update = {
-        results: _.uniqBy([...result.results, ...results] || [], 'id'),
-        nextPage: response.next_page_token || null,
-      };
-
-      setResult(update);
-    }
-  }
-
-  const reset = () => {
-    const update = {
-      results: [],
-      nextPage: null,
-    }
-
-    setchannelFiles(update);
-    setchannelMedia(update);
-  }
-
-  useGlobalEffect(
-    `useChannelAttachmentList${type}`,
-    () => {
-      if (!isOpen) {
-        reset();
-      }
-    },
-    [channelId, workspaceId, isOpen],
-  );
-
-  return {
-    loading,
-    result: result.results,
-    loadItems,
-    loadMore,
-  };
-};
-
-export const useChannelMediaList = () => {
-  return useChannelAttachmentList('media');
-};
-
-export const useChannelFileList = () => {
-  return useChannelAttachmentList('file');
-};
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-channel-writing-activity.ts b/tdrive/frontend/src/app/features/channels/hooks/use-channel-writing-activity.ts
deleted file mode 100644
index 7d3ba4cf..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-channel-writing-activity.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import WorkspaceAPIClient from 'app/features/workspaces/api/workspace-api-client';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
-import {
-  ChannelWritingActivityState,
-  ChannelWritingActivityType,
-} from '../state/channel-writing-activity';
-
-import { ThreadWritingActivitySelector } from '../../messages/state/selectors/thread-writing-activity';
-import UserService from 'app/features/users/services/current-user-service';
-import useRouterCompany from '../../router/hooks/use-router-company';
-import { useCallback, useRef } from 'react';
-import { useCurrentUser } from '../../users/hooks/use-current-user';
-
-const MAX_DELAY_BETWEEN_KEYDOWN = 500;
-const MIN_DELAY_BETWEEN_EMIT = 8000;
-const MAX_DELAY_AFTER_LAST_WRITE_EVENT = 10000;
-
-export type WritingEvent = {
-  type: 'writing';
-  event: {
-    channel_id: string;
-    thread_id: string;
-    user_id: string;
-    name: string;
-    is_writing: boolean;
-  };
-};
-
-export type ChannelWritingActivityTypeEmit = {
-  iAmWriting: (writing: boolean) => void;
-};
-
-export function useChannelWritingActivityState(
-  channelId: string,
-  threadId?: string | null,
-): ChannelWritingActivityType[] {
-  const threadIdSelector = useRecoilValue(
-    ThreadWritingActivitySelector({ channelId: channelId, threadId: threadId || '' }),
-  );
-  return threadIdSelector;
-}
-
-const receivedWritingTimeout = new Map<string, number>();
-
-export default function useChannelWritingActivity() {
-  const companyId = useRouterCompany();
-  const { user } = useCurrentUser();
-
-  const setChannelWritingActivityState = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async (event: WritingEvent['event']) => {
-        let currentList: ChannelWritingActivityType[] = await snapshot.getPromise(
-          ChannelWritingActivityState(event.channel_id),
-        );
-        const newEvent: ChannelWritingActivityType = {
-          threadId: event.thread_id,
-          userId: event.user_id,
-          name: event.name,
-        };
-        currentList = currentList.filter(elem => elem.userId !== newEvent.userId);
-        if (event.is_writing) {
-          currentList = [...currentList, newEvent];
-        }
-        currentList = currentList.filter(elem => elem.userId !== user?.id);
-        set(ChannelWritingActivityState(event.channel_id), currentList);
-
-        //Fallback stop is_writing in case of lost connection
-        if (receivedWritingTimeout.has(event.user_id))
-          clearTimeout(receivedWritingTimeout.get(event.user_id));
-        if (event.is_writing) {
-          receivedWritingTimeout.set(
-            event.user_id,
-            window.setTimeout(() => {
-              setChannelWritingActivityState({ ...event, is_writing: false });
-            }, MAX_DELAY_AFTER_LAST_WRITE_EVENT),
-          );
-        }
-      },
-  );
-
-  useRealtimeRoom<WritingEvent>(
-    WorkspaceAPIClient.websockets(companyId)[0],
-    'useChannelWritingActivity',
-    (action, resource) => {
-      if (action === 'event' && resource.type === 'writing') {
-        setChannelWritingActivityState(resource.event);
-      }
-    },
-  );
-}
-
-export function useChannelWritingActivityEmit(
-  channelId: string,
-  threadId: string | null,
-): ChannelWritingActivityTypeEmit {
-  const companyId = useRouterCompany();
-  const { user } = useCurrentUser();
-
-  const { send } = useRealtimeRoom<WritingEvent>(
-    WorkspaceAPIClient.websockets(companyId)[0],
-    'useChannelWritingActivityEmit',
-    () => undefined,
-  );
-  (window as any).send = send;
-
-  const iAmWriting = useCallback(
-    async (writing: boolean) => {
-      if (user)
-        send({
-          type: 'writing',
-          event: {
-            channel_id: channelId,
-            thread_id: threadId,
-            user_id: user.id,
-            name: UserService.getFullName(user),
-            is_writing: writing,
-          },
-        } as WritingEvent);
-    },
-    [send],
-  );
-  return { iAmWriting };
-}
-
-/** Keyboard typeing detection helper */
-let writeTimeout = setTimeout(() => {}, 0);
-export const useWritingDetector = () => {
-  const lastEmit = useRef(new Date().getTime());
-
-  const onKeydown = useCallback((emit: (value: boolean) => unknown) => {
-    const now = new Date().getTime();
-    if (now - lastEmit.current > MIN_DELAY_BETWEEN_EMIT) {
-      lastEmit.current = now;
-      emit(true);
-    }
-
-    if (writeTimeout) {
-      clearTimeout(writeTimeout);
-    }
-    writeTimeout = setTimeout(() => {
-      emit(false);
-      lastEmit.current = 0;
-    }, MAX_DELAY_BETWEEN_KEYDOWN);
-  }, []);
-
-  return { onKeydown };
-};
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-channel.ts b/tdrive/frontend/src/app/features/channels/hooks/use-channel.ts
deleted file mode 100644
index 2dcf4932..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-channel.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
-
-import { ChannelType } from 'app/features/channels/types/channel';
-import { ChannelsState, ChannelSelector } from '../state/channels';
-import ChannelAPIClient from '../api/channel-api-client';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-
-//Keep the channels in a easy to use variable
-let channelsKeeper: ChannelType[] = [];
-
-export function useChannel(
-  channelId: string,
-  options?: { companyId: string; workspaceId: string },
-) {
-  const companyId = options?.companyId || useRouterCompany();
-  const workspaceId = options?.workspaceId || useRouterWorkspace();
-
-  const hookId = 'useChannel-' + companyId + '-' + workspaceId + '-' + channelId;
-  const [loading, setLoading] = useRecoilState(LoadingState(hookId));
-
-  const channel = useRecoilValue(ChannelSelector(channelId)) as ChannelType;
-  const { set } = useSetChannel();
-
-  const save = async (channel: ChannelType) => {
-    setLoading(true);
-    await ChannelAPIClient.save(channel, {
-      companyId: channel.company_id || '',
-      workspaceId: channel.workspace_id || '',
-      channelId: channel.id,
-    });
-    set(channel);
-    setLoading(false);
-  };
-
-  const refresh = async () => {
-    setLoading(true);
-    const ch = await ChannelAPIClient.get(companyId, workspaceId, channelId);
-    if (ch && ch?.id) {
-      set(ch);
-    } else {
-      set({
-        id: channelId,
-        name: '',
-        visibility: 'private',
-      });
-    }
-    setLoading(false);
-  };
-
-  useGlobalEffect(
-    hookId,
-    async () => {
-      if (!channel) refresh();
-    },
-    [],
-  );
-
-  return { channel, save, loading, refresh };
-}
-
-export const useIsChannelMember = (channelId: string) => {
-  return !!useChannel(channelId)?.channel?.user_member?.user_id;
-};
-
-export const useIsReadOnlyChannel = (channelId: string) => {
-  return useChannel(channelId)?.channel?.is_readonly;
-};
-
-export function getChannel(channelId: string) {
-  return channelsKeeper.find(ch => ch.id === channelId);
-}
-
-export function getAllChannelsCache() {
-  return channelsKeeper;
-}
-
-export function useSetChannel() {
-  const set = useRecoilCallback(({ set }) => (channel: ChannelType) => {
-    if (channel.id) {
-      channelsKeeper = channelsKeeper.filter(c => c.id !== channel.id);
-      channelsKeeper.push(channel);
-      set(ChannelsState, channelsKeeper);
-    }
-  });
-  return { set };
-}
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-channels-bar-loader.ts b/tdrive/frontend/src/app/features/channels/hooks/use-channels-bar-loader.ts
deleted file mode 100644
index 7ceebc75..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-channels-bar-loader.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useRecoilValue } from 'recoil';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-
-export const useChannelsBarLoader = ({
-  companyId,
-  workspaceId,
-}: {
-  companyId: string;
-  workspaceId: string;
-}) => {
-  const publicOrPrivateContext = useRecoilValue(
-    LoadingState(`channels-${companyId}-${workspaceId}`),
-  );
-  const applicationContext = useRecoilValue(LoadingState(`applications-${companyId}`));
-  const directContext = useRecoilValue(LoadingState(`channels-direct-${companyId}`));
-
-  return { loading: publicOrPrivateContext || applicationContext || directContext };
-};
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-direct-channels.ts b/tdrive/frontend/src/app/features/channels/hooks/use-direct-channels.ts
deleted file mode 100644
index fd0c079c..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-direct-channels.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useRecoilState, useSetRecoilState } from 'recoil';
-
-import { ChannelType } from 'app/features/channels/types/channel';
-import { DirectChannelsState } from '../state/channels';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import ChannelsMineAPIClient from 'app/features/channels/api/channels-mine-api-client';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { useSetUserList } from 'app/features/users/hooks/use-user-list';
-import { UserType } from 'app/features/users/types/user';
-import { getChannel, useSetChannel } from './use-channel';
-import ChannelAPIClient from '../api/channel-api-client';
-import MenusManager from 'app/components/menus/menus-manager.jsx';
-import RouterService from 'app/features/router/services/router-service';
-
-export function useRefreshDirectChannels(): {
-  refresh: () => Promise<void>;
-} {
-  const companyId = useRouterCompany();
-  const { set: setUserList } = useSetUserList('useRefreshDirectChannels');
-  const { set } = useSetChannel();
-
-  const _setDirectChannels = useSetRecoilState(DirectChannelsState(companyId));
-
-  const refresh = async () => {
-    const directChannels = await ChannelsMineAPIClient.get({ companyId, workspaceId: 'direct' });
-
-    if (directChannels) _setDirectChannels(directChannels);
-
-    const users: UserType[] = [];
-
-    directChannels.forEach(c => {
-      if (c.users) users.push(...c.users);
-    });
-
-    directChannels.forEach(c => set(c));
-
-    if (users) setUserList(users);
-  };
-
-  return { refresh };
-}
-
-export function useDirectChannelsSetup() {
-  const companyId = useRouterCompany();
-  const [, setLoading] = useRecoilState(LoadingState(`channels-direct-${companyId}`));
-  const [didLoad, setDidLoad] = useRecoilState(
-    LoadingState(`channels-direct-did-load-${companyId}`),
-  );
-  const { refresh } = useRefreshDirectChannels();
-  const { set } = useSetChannel();
-
-  useGlobalEffect(
-    'useDirectChannels',
-    async () => {
-      if (!didLoad) setLoading(true);
-      await refresh();
-      setLoading(false);
-      setDidLoad(true);
-    },
-    [companyId],
-  );
-
-  useRealtimeRoom<ChannelType & { _type: string }>(
-    ChannelsMineAPIClient.websockets(companyId, 'direct')[0],
-    'useDirectChannels',
-    (_action, event) => {
-      //TODO replace this to avoid calling backend every time
-      if (_action === 'saved') refresh();
-      if (_action === 'updated' && event._type === 'channel_activity') {
-        if (event.id)
-          set({ ...getChannel(event.id), stats: event.stats, last_message: event.last_message });
-      }
-    },
-  );
-}
-
-export function useDirectChannels(): {
-  directChannels: ChannelType[];
-  refresh: () => Promise<void>;
-  openDiscussion: (membersId: string[]) => Promise<void>;
-} {
-  const companyId = useRouterCompany();
-  const [directChannels] = useRecoilState(DirectChannelsState(companyId));
-  const { refresh } = useRefreshDirectChannels();
-
-  const openDiscussion = async (membersIds: string[]) => {
-    const channel = await ChannelAPIClient.getDirect(companyId, membersIds);
-    await refresh();
-    if (channel) {
-      RouterService.push(
-        RouterService.generateRouteFromState({
-          channelId: channel.id,
-          companyId: channel.company_id,
-        }),
-      );
-    }
-    MenusManager.closeMenu();
-  };
-
-  return {
-    refresh,
-    directChannels,
-    openDiscussion,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-favorite-channels.ts b/tdrive/frontend/src/app/features/channels/hooks/use-favorite-channels.ts
deleted file mode 100644
index e8b94e4e..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-favorite-channels.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import { useDirectChannels, useRefreshDirectChannels } from './use-direct-channels';
-import {
-  usePublicOrPrivateChannels,
-  useRefreshPublicOrPrivateChannels,
-} from './use-public-or-private-channels';
-
-export function useRefreshFavoriteChannels(): {
-  refresh: () => Promise<void>;
-} {
-  const { refresh: refreshPublicOrPrivateChannels } = useRefreshPublicOrPrivateChannels();
-  const { refresh: refreshDirectChannels } = useRefreshDirectChannels();
-
-  const refresh = async () => {
-    await refreshPublicOrPrivateChannels();
-    await refreshDirectChannels();
-  };
-
-  return { refresh };
-}
-
-export function useFavoriteChannels(): {
-  favoriteChannels: ChannelType[];
-  refresh: () => Promise<void>;
-} {
-  const { publicChannels, privateChannels } = usePublicOrPrivateChannels();
-  const { directChannels } = useDirectChannels();
-
-  const { refresh } = useRefreshFavoriteChannels();
-
-  return {
-    favoriteChannels: [...publicChannels, ...privateChannels, ...directChannels].filter(
-      c => c.user_member?.favorite,
-    ),
-    refresh,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-public-or-private-channels.ts b/tdrive/frontend/src/app/features/channels/hooks/use-public-or-private-channels.ts
deleted file mode 100644
index 8eaf81c9..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-public-or-private-channels.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useRecoilState, useSetRecoilState } from 'recoil';
-
-import { ChannelType } from 'app/features/channels/types/channel';
-import { MineChannelsState } from '../state/channels';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import ChannelsMineAPIClient from 'app/features/channels/api/channels-mine-api-client';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { isPrivateChannel, isPublicChannel } from 'app/features/channels/utils/utils';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { getChannel, useSetChannel } from './use-channel';
-
-export function useRefreshPublicOrPrivateChannels(): {
-  refresh: () => Promise<void>;
-} {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const _setMineChannels = useSetRecoilState(MineChannelsState({ companyId, workspaceId }));
-  const { set } = useSetChannel();
-
-  const refresh = async () => {
-    const res = await ChannelsMineAPIClient.get({ companyId, workspaceId });
-    res.forEach(c => set(c));
-    if (res) _setMineChannels(res);
-  };
-
-  return { refresh };
-}
-
-export function usePublicOrPrivateChannelsSetup() {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const [, setLoading] = useRecoilState(LoadingState(`channels-${companyId}-${workspaceId}`));
-  const [didLoad, setDidLoad] = useRecoilState(
-    LoadingState(`channels-did-load-${companyId}-${workspaceId}`),
-  );
-  const { refresh } = useRefreshPublicOrPrivateChannels();
-  const { set } = useSetChannel();
-
-  useGlobalEffect(
-    'usePublicOrPrivateChannels',
-    async () => {
-      if (!didLoad) setLoading(true);
-      await refresh();
-      setLoading(false);
-      setDidLoad(true);
-    },
-    [companyId, workspaceId],
-  );
-
-  //Public channels
-  useRealtimeRoom<ChannelType & { _type: string }>(
-    ChannelsMineAPIClient.websockets(companyId, workspaceId)[0],
-    'usePublicOrPrivateChannelsPublic',
-    (_action, event) => {
-      //TODO replace this to avoid calling backend every time
-      if (_action === 'saved') refresh();
-      if (_action === 'updated' && event._type === 'channel_activity') {
-        if (event.id)
-          set({ ...getChannel(event.id), stats: event.stats, last_message: event.last_message });
-      }
-    },
-  );
-
-  //Private channels
-  useRealtimeRoom<ChannelType & { _type: string }>(
-    ChannelsMineAPIClient.websockets(companyId, workspaceId)[1],
-    'usePublicOrPrivateChannelsPrivate',
-    (_action, event) => {
-      //TODO replace this to avoid calling backend every time
-      if (_action === 'saved') refresh();
-      if (_action === 'updated' && event._type === 'channel_activity') {
-        if (event.id)
-          set({ ...getChannel(event.id), stats: event.stats, last_message: event.last_message });
-      }
-    },
-  );
-}
-
-export function usePublicOrPrivateChannels(): {
-  privateChannels: ChannelType[];
-  publicChannels: ChannelType[];
-  refresh: () => Promise<void>;
-} {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const [mineChannels] = useRecoilState(
-    MineChannelsState({ companyId, workspaceId }),
-  );
-
-  const { refresh } = useRefreshPublicOrPrivateChannels();
-
-  return {
-    refresh: refresh,
-    privateChannels: (mineChannels || [])?.filter(
-      c => c.visibility && isPrivateChannel(c.visibility),
-    ),
-    publicChannels: (mineChannels || [])?.filter(
-      c => c.visibility && isPublicChannel(c.visibility),
-    ),
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channels/hooks/use-reachable-channels.ts b/tdrive/frontend/src/app/features/channels/hooks/use-reachable-channels.ts
deleted file mode 100644
index 72098770..00000000
--- a/tdrive/frontend/src/app/features/channels/hooks/use-reachable-channels.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
-
-import { ChannelType } from 'app/features/channels/types/channel';
-import { ReachableChannelsState } from '../state/channels';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import ChannelsReachableAPIClient from 'app/features/channels/api/channels-reachable-api-client';
-import { useSetChannel } from './use-channel';
-
-export function useReachableChannels(): {
-  reachableChannels: ChannelType[];
-  refresh: () => void;
-} {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const [reachableChannels, _setReachableChannels] = useRecoilState(
-    ReachableChannelsState({ companyId, workspaceId }),
-  );
-  const { set } = useSetChannel();
-
-  const refresh = async () => {
-    const channels = await ChannelsReachableAPIClient.get(companyId, workspaceId);
-
-    channels.forEach(channel => {
-      set(channel);
-    });
-
-    if (channels) _setReachableChannels(channels);
-  };
-
-  useEffect(() => {
-    companyId.length > 1 && workspaceId.length > 1 && refresh();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [companyId, workspaceId]);
-
-  return {
-    refresh,
-    reachableChannels,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/channels/services/channels-bar-service.ts b/tdrive/frontend/src/app/features/channels/services/channels-bar-service.ts
deleted file mode 100755
index a0360c11..00000000
--- a/tdrive/frontend/src/app/features/channels/services/channels-bar-service.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import Observable from 'app/deprecated/Observable/Observable';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-
-class ChannelsBarService extends Observable {
-  private callbacks = new Map<string, (state: boolean) => void>();
-  private ready = new Map<string, boolean>();
-
-  collectionIsReady(companyId: string, workspaceId: string, suffix?: string[]): void {
-    const callbackId = this.getCallbackId(companyId, workspaceId, suffix);
-
-    if (!this.ready.has(callbackId)) {
-      this.ready.set(callbackId, true);
-      this.notify();
-    }
-  }
-
-  isReady(companyId = '', workspaceId = '', suffix?: string[]): boolean {
-    return !!this.ready.get(this.getCallbackId(companyId, workspaceId, suffix));
-  }
-
-  updateCurrentChannelId(
-    companyId = '',
-    workspaceId = '',
-    channelId = '',
-  ): void {
-    LocalStorage.setItem(this.getLocalStorageKey(companyId, workspaceId), channelId);
-  }
-
-  private getLocalStorageKey(companyId: string, workspaceId: string): string {
-    return `${companyId}:${workspaceId}:channel`;
-  }
-
-  private getCallbackId(companyId: string, workspaceId: string, suffix?: string[]): string {
-    let key = `${companyId}+${workspaceId}`;
-
-    if (suffix && suffix.length) {
-      key = [key, ...suffix].join('+');
-    }
-
-    return key;
-  }
-}
-
-export default new ChannelsBarService();
diff --git a/tdrive/frontend/src/app/features/channels/state/channel-attachment-list.ts b/tdrive/frontend/src/app/features/channels/state/channel-attachment-list.ts
deleted file mode 100644
index eff07265..00000000
--- a/tdrive/frontend/src/app/features/channels/state/channel-attachment-list.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-
-import { MessageFileType } from 'app/features/messages/types/message';
-import { atom, atomFamily } from 'recoil';
-
-export type ChannelAttachment = {
-  results: MessageFileType[];
-  nextPage: string | null;
-};
-
-export const activeChannelAttachementListTabState = atom<number>({
-  key: 'activeChannelAttachementListTabState',
-  default: 0,
-});
-
-export const channelAttachmentListState = atom<boolean>({
-  key: 'channelAttachmentListState',
-  default: false,
-});
-
-export const channelAttachmentMediaState = atomFamily<ChannelAttachment, string>({
-  key: 'channelAttachmentMediaState',
-  default: () => ({ results: [], nextPage: '' }),
-});
-
-export const channelAttachmentFileState = atomFamily<ChannelAttachment, string>({
-  key: 'channelAttachmentFileState',
-  default: () => ({ results: [], nextPage: '' }),
-});
diff --git a/tdrive/frontend/src/app/features/channels/state/channel-writing-activity.ts b/tdrive/frontend/src/app/features/channels/state/channel-writing-activity.ts
deleted file mode 100644
index 72e4bc7f..00000000
--- a/tdrive/frontend/src/app/features/channels/state/channel-writing-activity.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { atomFamily } from 'recoil';
-
-export type ChannelWritingActivityType = {
-  threadId: string;
-  userId: string;
-  name: string;
-};
-
-export const ChannelWritingActivityState = atomFamily<ChannelWritingActivityType[], string>({
-  key: 'ChannelWritingActivityState',
-  default: [],
-});
diff --git a/tdrive/frontend/src/app/features/channels/state/channels.ts b/tdrive/frontend/src/app/features/channels/state/channels.ts
deleted file mode 100644
index 8ba17111..00000000
--- a/tdrive/frontend/src/app/features/channels/state/channels.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { atom, atomFamily, selectorFamily } from 'recoil';
-import _ from 'lodash';
-
-import { ChannelType } from 'app/features/channels/types/channel';
-
-type ChannelsListContextType = { companyId: string; workspaceId: string };
-
-export const ChannelsState = atom<ChannelType[]>({
-  key: 'ChannelsState',
-  default: [],
-});
-
-export const ChannelSelector = selectorFamily<ChannelType | undefined, string>({
-  key: 'ChannelSelector',
-  get:
-    channelId =>
-    ({ get }) => {
-      const channels = get(ChannelsState);
-      return _.find(channels, { id: channelId });
-    },
-});
-
-export const MineChannelsState = atomFamily<ChannelType[], ChannelsListContextType>({
-  key: 'MineChannelsState',
-  default: [],
-});
-
-export const ReachableChannelsState = atomFamily<ChannelType[], ChannelsListContextType>({
-  key: 'ReachableChannelsState',
-  default: [],
-});
-
-export const DirectChannelsState = atomFamily<ChannelType[], string>({
-  key: 'DirectChannelsState',
-  default: [],
-});
diff --git a/tdrive/frontend/src/app/features/channels/types/channel.ts b/tdrive/frontend/src/app/features/channels/types/channel.ts
deleted file mode 100644
index a095a672..00000000
--- a/tdrive/frontend/src/app/features/channels/types/channel.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ChannelMemberType } from 'app/features/channel-members/types/channel-member-types';
-import { UserType } from 'app/features/users/types/user';
-import _ from 'lodash';
-
-export type ChannelType = {
-  company_id?: string;
-  workspace_id?: string | null; //Null for direct messages
-  type?: string;
-  id?: string;
-  icon?: string;
-  name?: string;
-  description?: string;
-  channel_group?: string;
-  visibility?: 'public' | 'direct' | 'private';
-  is_default?: boolean;
-  members?: string[];
-  owner?: string;
-  members_count?: number;
-  guests_count?: number;
-  messages_count?: number;
-  archived?: false | true;
-  archivation_date?: number; //Timestamp
-  user_member?: ChannelMemberType;
-  connectors?: string[];
-  last_activity?: number;
-  last_message?: {
-    date: number;
-    sender: string;
-    title: string;
-    text: string;
-  };
-  stats?: {
-    members: number;
-    messages: number;
-  };
-  users?: UserType[];
-  is_readonly?: boolean;
-};
-
-export const createDirectChannelFromUsers = (companyId: string, users: UserType[]): ChannelType => {
-  users = _.uniqBy(users, 'id');
-  const id = users.map(u => u.id).join('_') + '_frontend';
-  return {
-    company_id: companyId,
-    workspace_id: 'direct',
-    visibility: 'direct',
-    id: id,
-    members: users.map(u => u.id).filter(a => a) as string[],
-    owner: users[0].id,
-    members_count: users.length,
-    guests_count: 0,
-    messages_count: 0,
-    archived: false,
-    user_member: {
-      user_id: users[0].id,
-      channel_id: id,
-    },
-    connectors: [],
-    users: users,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/channels/types/channels-reachable-types.ts b/tdrive/frontend/src/app/features/channels/types/channels-reachable-types.ts
deleted file mode 100644
index 21fb63d2..00000000
--- a/tdrive/frontend/src/app/features/channels/types/channels-reachable-types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ChannelMemberType } from 'app/features/channel-members/types/channel-member-types';
-import { ChannelType } from './channel';
-
-export type ChannelsReachableGetResponse = { resources: ChannelType[] };
-export type ChannelsReachableInviteUserResponse = { resource: ChannelMemberType };
-export type ChannelsReachableInviteUserRequest = {
-  resource: {
-    user_id: string;
-  };
-};
-
-export type ChannelsReachableRemoveUserResponse = {
-  status: 'success' | 'error';
-  errors: string[]; //List of errors
-};
diff --git a/tdrive/frontend/src/app/features/channels/utils/utils.ts b/tdrive/frontend/src/app/features/channels/utils/utils.ts
deleted file mode 100644
index 1a779737..00000000
--- a/tdrive/frontend/src/app/features/channels/utils/utils.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Channel visibility utils
-export function isPublicChannel(visibility: string): boolean {
-  return visibility === 'public' ? true : false;
-}
-
-export function isPrivateChannel(visibility: string): boolean {
-  return visibility === 'private' ? true : false;
-}
-
-export function isDirectChannel(visibility: string): boolean {
-  return visibility === 'direct' ? true : false;
-}
diff --git a/tdrive/frontend/src/app/features/companies/api/company-api-client.ts b/tdrive/frontend/src/app/features/companies/api/company-api-client.ts
index 79507aa8..b75f0891 100644
--- a/tdrive/frontend/src/app/features/companies/api/company-api-client.ts
+++ b/tdrive/frontend/src/app/features/companies/api/company-api-client.ts
@@ -1,5 +1,5 @@
-import { CompanyType } from 'app/features/companies/types/company';
-import { WorkspaceType } from 'app/features/workspaces/types/workspace';
+import { CompanyType } from '@features/companies/types/company';
+import { WorkspaceType } from '@features/workspaces/types/workspace';
 import Api from '../../global/framework/api-service';
 import { TdriveService } from '../../global/framework/registry-decorator-service';
 import { WebsocketRoom } from '../../global/types/websocket-types';
diff --git a/tdrive/frontend/src/app/features/companies/hooks/use-companies.ts b/tdrive/frontend/src/app/features/companies/hooks/use-companies.ts
index e195b9df..f386c264 100644
--- a/tdrive/frontend/src/app/features/companies/hooks/use-companies.ts
+++ b/tdrive/frontend/src/app/features/companies/hooks/use-companies.ts
@@ -2,19 +2,19 @@ import { CompaniesState } from '../state/companies';
 import useRouterCompany from '../../router/hooks/use-router-company';
 import { useRecoilState } from 'recoil';
 import { CurrentUserState } from '../../users/state/atoms/current-user';
-import { CompanyType } from 'app/features/companies/types/company';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import { UserType } from 'app/features/users/types/user';
+import { CompanyType } from '@features/companies/types/company';
+import LocalStorage from '@features/global/framework/local-storage-service';
+import { UserType } from '@features/users/types/user';
 import { useCurrentUser } from '../../users/hooks/use-current-user';
 import _ from 'lodash';
-import RouterService from 'app/features/router/services/router-service';
-import WorkspacesService from 'app/deprecated/workspaces/workspaces.jsx';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import Groups from 'app/deprecated/workspaces/groups.js';
-import LoginService from 'app/features/auth/login-service';
-import UserAPIClient from 'app/features/users/api/user-api-client';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import CompanyAPIClient from 'app/features/companies/api/company-api-client';
+import RouterService from '@features/router/services/router-service';
+import WorkspacesService from '@deprecated/workspaces/workspaces.jsx';
+import AccessRightsService from '@features/workspace-members/services/workspace-members-access-rights-service';
+import Groups from '@deprecated/workspaces/groups.js';
+import LoginService from '@features/auth/login-service';
+import UserAPIClient from '@features/users/api/user-api-client';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
+import CompanyAPIClient from '@features/companies/api/company-api-client';
 
 /**
  * Will return the companies of the current user
diff --git a/tdrive/frontend/src/app/features/companies/state/companies.ts b/tdrive/frontend/src/app/features/companies/state/companies.ts
index 67aa2494..8fe73a1f 100644
--- a/tdrive/frontend/src/app/features/companies/state/companies.ts
+++ b/tdrive/frontend/src/app/features/companies/state/companies.ts
@@ -1,8 +1,8 @@
 import { atomFamily } from 'recoil';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
 
-import { CompanyType } from 'app/features/companies/types/company';
-import CompanyAPIClient from 'app/features/companies/api/company-api-client';
+import { CompanyType } from '@features/companies/types/company';
+import CompanyAPIClient from '@features/companies/api/company-api-client';
 import _ from 'lodash';
 
 const companies: { [key: string]: CompanyType } = {};
diff --git a/tdrive/frontend/src/app/features/companies/types/company.ts b/tdrive/frontend/src/app/features/companies/types/company.ts
index 5606d46a..2c791d59 100644
--- a/tdrive/frontend/src/app/features/companies/types/company.ts
+++ b/tdrive/frontend/src/app/features/companies/types/company.ts
@@ -1,4 +1,4 @@
-import { FeatureValueType } from 'app/features/global/services/feature-toggles-service';
+import { FeatureValueType } from '@features/global/services/feature-toggles-service';
 
 export type CompanyRoleType = 'owner' | 'admin' | 'member' | 'guest';
 
@@ -12,7 +12,7 @@ export type CompanyBillingObjectType = {
 export enum CompanyLimitsEnum {
   CHAT_MESSAGE_HISTORY_LIMIT = 'chat:message_history_limit',
   COMPANY_MEMBERS_LIMIT = 'company:members_limit', // 100
-  COMPANY_GUESTS_LIMIT = 'company:guests_limit'
+  COMPANY_GUESTS_LIMIT = 'company:guests_limit',
 }
 
 export type CompanyLimitsObjectType = {
diff --git a/tdrive/frontend/src/app/features/console/api/console-api-client.ts b/tdrive/frontend/src/app/features/console/api/console-api-client.ts
index b21b2d21..ded75b0f 100644
--- a/tdrive/frontend/src/app/features/console/api/console-api-client.ts
+++ b/tdrive/frontend/src/app/features/console/api/console-api-client.ts
@@ -1,6 +1,6 @@
-import Api from 'app/features/global/framework/api-service';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-import JWTStorage, { JWTDataType } from 'app/features/auth/jwt-storage-service';
+import Api from '@features/global/framework/api-service';
+import { TdriveService } from '@features/global/framework/registry-decorator-service';
+import JWTStorage, { JWTDataType } from '@features/auth/jwt-storage-service';
 
 type LoginParams = {
   email: string;
diff --git a/tdrive/frontend/src/app/features/console/services/console-service.ts b/tdrive/frontend/src/app/features/console/services/console-service.ts
index 593f86ce..06698328 100644
--- a/tdrive/frontend/src/app/features/console/services/console-service.ts
+++ b/tdrive/frontend/src/app/features/console/services/console-service.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Api from 'app/features/global/framework/api-service';
-import InitService from 'app/features/global/services/init-service';
-import Languages from 'app/features/global/services/languages-service';
-import { ToasterService as Toaster } from 'app/features/global/services/toaster-service';
-import { ConsoleMemberRole } from 'app/features/console/types/types';
-import Logger from 'app/features/global/framework/logger-service';
-import { JWTDataType } from 'app/features/auth/jwt-storage-service';
+import Api from '@features/global/framework/api-service';
+import InitService from '@features/global/services/init-service';
+import Languages from '@features/global/services/languages-service';
+import { ToasterService as Toaster } from '@features/global/services/toaster-service';
+import { ConsoleMemberRole } from '@features/console/types/types';
+import Logger from '@features/global/framework/logger-service';
+import { JWTDataType } from '@features/auth/jwt-storage-service';
 
 class ConsoleService {
   logger: Logger.Logger;
diff --git a/tdrive/frontend/src/app/features/drive-tdrive/api-client/api-client.ts b/tdrive/frontend/src/app/features/drive-tdrive/api-client/api-client.ts
deleted file mode 100644
index cc64f22b..00000000
--- a/tdrive/frontend/src/app/features/drive-tdrive/api-client/api-client.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import Api from '../../global/framework/api-service';
-import { DriveTdriveTab } from '../types';
-
-export class DriveTdriveApiClient {
-  static async getTab(companyId: string, tabId: string) {
-    return await Api.get<DriveTdriveTab>(
-      `/internal/services/documents/v1/companies/${companyId}/tabs/${tabId}`,
-    );
-  }
-
-  static async setTab(
-    companyId: string,
-    tabId: string,
-    channelId: string,
-    itemId: string,
-    level: 'write' | 'read',
-  ) {
-    return await Api.post<DriveTdriveTab, DriveTdriveTab>(
-      `/internal/services/documents/v1/companies/${companyId}/tabs/${tabId}`,
-      {
-        company_id: companyId,
-        tab_id: tabId,
-        channel_id: channelId,
-        item_id: itemId,
-        level,
-      },
-    );
-  }
-}
diff --git a/tdrive/frontend/src/app/features/drive-tdrive/hooks/use-drive-tdrive-tab.tsx b/tdrive/frontend/src/app/features/drive-tdrive/hooks/use-drive-tdrive-tab.tsx
deleted file mode 100644
index f4ec9718..00000000
--- a/tdrive/frontend/src/app/features/drive-tdrive/hooks/use-drive-tdrive-tab.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
-import { DriveTdriveApiClient } from '../api-client/api-client';
-import { DriveTdriveTabAtom } from '../state/store';
-
-export const useDriveTdriveTab = (channelId: string, tabId: string) => {
-  const companyId = useRouterCompany();
-  const [tab, setTab] = useRecoilState(DriveTdriveTabAtom(tabId));
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-    DriveTdriveApiClient.getTab(companyId, tabId)
-      .then(setTab)
-      .finally(() => setLoading(false));
-  }, [companyId, tabId]);
-
-  return {
-    tab,
-    setTab: async (itemId: string, level: 'read' | 'write') => {
-      setLoading(true);
-      const tab = await DriveTdriveApiClient.setTab(companyId, tabId, channelId, itemId, level);
-      if (tab.item_id) setTab(tab);
-      setLoading(false);
-    },
-    loading,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/drive-tdrive/state/store.ts b/tdrive/frontend/src/app/features/drive-tdrive/state/store.ts
deleted file mode 100644
index c9c367a6..00000000
--- a/tdrive/frontend/src/app/features/drive-tdrive/state/store.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { atomFamily } from 'recoil';
-import { DriveTdriveTab } from '../types';
-
-export const DriveTdriveTabAtom = atomFamily<DriveTdriveTab | null, string>({
-  key: 'DriveTdriveTabAtom',
-  default: () => null,
-});
diff --git a/tdrive/frontend/src/app/features/drive-tdrive/types.ts b/tdrive/frontend/src/app/features/drive-tdrive/types.ts
deleted file mode 100644
index e9c6bc56..00000000
--- a/tdrive/frontend/src/app/features/drive-tdrive/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type DriveTdriveTab = {
-  company_id: string;
-  tab_id: string;
-  channel_id: string;
-  item_id: string;
-  level: 'write' | 'read';
-};
diff --git a/tdrive/frontend/src/app/features/drive/api-client/api-client.ts b/tdrive/frontend/src/app/features/drive/api-client/api-client.ts
index c5fe36ef..24132e69 100644
--- a/tdrive/frontend/src/app/features/drive/api-client/api-client.ts
+++ b/tdrive/frontend/src/app/features/drive/api-client/api-client.ts
@@ -1,6 +1,6 @@
 import Api from '../../global/framework/api-service';
 import { DriveItem, DriveItemDetails, DriveItemVersion } from '../types';
-import Workspace from 'app/deprecated/workspaces/workspaces';
+import Workspace from '@deprecated/workspaces/workspaces';
 import Logger from 'features/global/framework/logger-service';
 export interface BaseSearchOptions {
   company_id?: string;
@@ -116,9 +116,9 @@ export class DriveApiClient {
     const companyId = options?.company_id ? options.company_id : Workspace.currentGroupId;
     const query = `/internal/services/documents/v1/companies/${companyId}/search`;
     const searchData = {
-      "search": searchString
+      search: searchString,
     };
-    const res = await Api.post<SearchDocumentsBody,{ entities: DriveItem[] }>(query, searchData);
+    const res = await Api.post<SearchDocumentsBody, { entities: DriveItem[] }>(query, searchData);
     this.logger.debug(
       `Drive search by text "${searchString}". Found`,
       res.entities.length,
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-actions.tsx b/tdrive/frontend/src/app/features/drive/hooks/use-drive-actions.tsx
index 7b88ba56..87cb0dbc 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-actions.tsx
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-actions.tsx
@@ -1,5 +1,5 @@
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import { ToasterService } from '@features/global/services/toaster-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import { useCallback } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { DriveApiClient } from '../api-client/api-client';
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx b/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx
index c10c28fe..7efb829b 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-item.tsx
@@ -1,6 +1,6 @@
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import { LoadingStateInitTrue } from 'app/features/global/state/atoms/Loading';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import { ToasterService } from '@features/global/services/toaster-service';
+import { LoadingStateInitTrue } from '@features/global/state/atoms/Loading';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { DriveItemAtom, DriveItemChildrenAtom } from '../state/store';
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts b/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
index fac75b56..8238182c 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-preview.ts
@@ -1,7 +1,7 @@
-import fileUploadApiClient from 'app/features/files/api/file-upload-api-client';
-import fileUploadService from 'app/features/files/services/file-upload-service';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
+import fileUploadApiClient from '@features/files/api/file-upload-api-client';
+import fileUploadService from '@features/files/services/file-upload-service';
+import { useGlobalEffect } from '@features/global/hooks/use-global-effect';
+import { LoadingState } from '@features/global/state/atoms/Loading';
 import { useRecoilState } from 'recoil';
 import { DriveApiClient } from '../api-client/api-client';
 import { DriveViewerState } from '../state/viewer';
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-realtime.tsx b/tdrive/frontend/src/app/features/drive/hooks/use-drive-realtime.tsx
index 2f1f7a8c..c9698103 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-realtime.tsx
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-realtime.tsx
@@ -1,4 +1,4 @@
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
 import { useDriveActions } from './use-drive-actions';
 import { useDriveItem } from './use-drive-item';
 
diff --git a/tdrive/frontend/src/app/features/drive/hooks/use-drive-upload.tsx b/tdrive/frontend/src/app/features/drive/hooks/use-drive-upload.tsx
index 35a1ec2c..655b4943 100644
--- a/tdrive/frontend/src/app/features/drive/hooks/use-drive-upload.tsx
+++ b/tdrive/frontend/src/app/features/drive/hooks/use-drive-upload.tsx
@@ -1,6 +1,6 @@
-import { FileTreeObject } from 'app/components/uploads/file-tree-utils';
-import FileUploadService from 'app/features/files/services/file-upload-service';
-import { ToasterService } from 'app/features/global/services/toaster-service';
+import { FileTreeObject } from '@components/uploads/file-tree-utils';
+import FileUploadService from '@features/files/services/file-upload-service';
+import { ToasterService } from '@features/global/services/toaster-service';
 import { DriveApiClient } from '../api-client/api-client';
 import { useDriveActions } from './use-drive-actions';
 
diff --git a/tdrive/frontend/src/app/features/files/api/file-upload-api-client.ts b/tdrive/frontend/src/app/features/files/api/file-upload-api-client.ts
index f2e69b1e..b1b7af7d 100644
--- a/tdrive/frontend/src/app/features/files/api/file-upload-api-client.ts
+++ b/tdrive/frontend/src/app/features/files/api/file-upload-api-client.ts
@@ -1,6 +1,6 @@
-import Api from 'app/features/global/framework/api-service';
-import { FileType } from 'app/features/files/types/file';
-import { MessageFileType } from 'app/features/messages/types/message';
+import Api from '@features/global/framework/api-service';
+import { FileType } from '@features/files/types/file';
+import { AttachedFileType } from '@features/files/types/file';
 import extensionToMime from '../utils/extension-to-mime';
 import { fileTypeMimes } from '../utils/type-mimes';
 import AceModeList from '@features/global/utils/ace_modelist.js';
@@ -70,7 +70,7 @@ class FileUploadAPIClient {
     })}/thumbnails/${file.thumbnails?.[0]?.index}`;
   }
 
-  public getFileThumbnailUrlFromMessageFile(file: MessageFileType): string {
+  public getFileThumbnailUrlFromMessageFile(file: AttachedFileType): string {
     if (file.metadata?.source !== 'internal') return file.metadata?.thumbnails?.[0]?.url || '';
     if (!file.metadata?.thumbnails?.[0]) {
       return '';
diff --git a/tdrive/frontend/src/app/features/files/hooks/use-upload-zones.ts b/tdrive/frontend/src/app/features/files/hooks/use-upload-zones.ts
index 1d881e35..343e85a5 100644
--- a/tdrive/frontend/src/app/features/files/hooks/use-upload-zones.ts
+++ b/tdrive/frontend/src/app/features/files/hooks/use-upload-zones.ts
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import FileUploadService from 'app/features/files/services/file-upload-service';
-import { MessageFileType } from 'app/features/messages/types/message';
+import FileUploadService from '@features/files/services/file-upload-service';
+import { AttachedFileType } from '@features/files/types/file';
 import { useRecoilState } from 'recoil';
 import { PendingUploadZonesListState } from '../state/atoms/pending-upload-zones-list';
 import { useUpload } from './use-upload';
-import { FileType, PendingFileType } from 'app/features/files/types/file';
+import { FileType, PendingFileType } from '@features/files/types/file';
 
 export const useUploadZones = (zoneId: string) => {
   const { currentTask, getOnePendingFile } = useUpload();
@@ -51,7 +51,7 @@ export const useUploadZones = (zoneId: string) => {
   };
 };
 
-const pendingFileToMessageFile = (f: MessageFileType, upToDate: PendingFileType) => {
+const pendingFileToMessageFile = (f: AttachedFileType, upToDate: PendingFileType) => {
   return {
     ...f,
     company_id: upToDate.backendFile?.company_id,
@@ -67,5 +67,5 @@ const pendingFileToMessageFile = (f: MessageFileType, upToDate: PendingFileType)
       name: upToDate.backendFile?.metadata?.name,
       thumbnails: upToDate.backendFile?.thumbnails,
     },
-  } as MessageFileType;
+  } as AttachedFileType;
 };
diff --git a/tdrive/frontend/src/app/features/files/hooks/use-upload.ts b/tdrive/frontend/src/app/features/files/hooks/use-upload.ts
index f228f4e6..d9534f6f 100644
--- a/tdrive/frontend/src/app/features/files/hooks/use-upload.ts
+++ b/tdrive/frontend/src/app/features/files/hooks/use-upload.ts
@@ -1,9 +1,9 @@
-import FileUploadService from 'app/features/files/services/file-upload-service';
+import FileUploadService from '@features/files/services/file-upload-service';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { PendingFilesListState } from '../state/atoms/pending-files-list';
 import { CurrentTaskSelector } from '../state/selectors/current-task';
-import RouterServices from 'app/features/router/services/router-service';
-import { MessageFileType } from 'app/features/messages/types/message';
+import RouterServices from '@features/router/services/router-service';
+import { AttachedFileType } from '@features/files/types/file';
 
 export const useUpload = () => {
   const { companyId } = RouterServices.getStateFromRoute();
@@ -25,16 +25,12 @@ export const useUpload = () => {
   const downloadOneFile = ({
     companyId,
     fileId,
-    messageFile,
     blob,
   }: {
     companyId: string;
     fileId: string;
-    messageFile: MessageFileType;
     blob?: boolean;
   }) => {
-    if (messageFile) FileUploadService.markAsDownloadedFromMessage(messageFile);
-
     if (blob) {
       return FileUploadService.download({ companyId, fileId });
     }
diff --git a/tdrive/frontend/src/app/features/files/services/file-upload-service.ts b/tdrive/frontend/src/app/features/files/services/file-upload-service.ts
index 6d3e4425..01a8c3aa 100644
--- a/tdrive/frontend/src/app/features/files/services/file-upload-service.ts
+++ b/tdrive/frontend/src/app/features/files/services/file-upload-service.ts
@@ -2,16 +2,15 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { v1 as uuid } from 'uuid';
 
-import { FileType, PendingFileType } from 'app/features/files/types/file';
-import JWTStorage from 'app/features/auth/jwt-storage-service';
-import RouterServices from 'app/features/router/services/router-service';
-import Resumable from 'app/features/files/utils/resumable';
+import { FileType, PendingFileType } from '@features/files/types/file';
+import JWTStorage from '@features/auth/jwt-storage-service';
+import RouterServices from '@features/router/services/router-service';
+import Resumable from '@features/files/utils/resumable';
 import FileUploadAPIClient from '../api/file-upload-api-client';
 import { isPendingFileStatusPending } from '../utils/pending-files';
-import Logger from 'app/features/global/framework/logger-service';
+import Logger from '@features/global/framework/logger-service';
 import _ from 'lodash';
-import { MessageFileType } from 'app/features/messages/types/message';
-import MessageAPIClient from 'app/features/messages/api/message-api-client';
+import { AttachedFileType } from '@features/files/types/file';
 
 export enum Events {
   ON_CHANGE = 'notify',
@@ -266,10 +265,6 @@ class FileUploadService {
       fileId: fileId,
     });
   }
-
-  public async markAsDownloadedFromMessage(messageFile: MessageFileType) {
-    await MessageAPIClient.download(messageFile);
-  }
 }
 
 export default new FileUploadService();
diff --git a/tdrive/frontend/src/app/features/files/state/atoms/pending-files-list.ts b/tdrive/frontend/src/app/features/files/state/atoms/pending-files-list.ts
index ef2ff9cc..93540a6f 100644
--- a/tdrive/frontend/src/app/features/files/state/atoms/pending-files-list.ts
+++ b/tdrive/frontend/src/app/features/files/state/atoms/pending-files-list.ts
@@ -1,5 +1,5 @@
 import { atom } from 'recoil';
-import { PendingFileRecoilType } from 'app/features/files/types/file';
+import { PendingFileRecoilType } from '@features/files/types/file';
 
 export const PendingFilesListState = atom<PendingFileRecoilType[] | undefined>({
   key: 'PendingFilesListState',
diff --git a/tdrive/frontend/src/app/features/files/state/atoms/pending-upload-zones-list.ts b/tdrive/frontend/src/app/features/files/state/atoms/pending-upload-zones-list.ts
index ad854e28..4b3345ba 100644
--- a/tdrive/frontend/src/app/features/files/state/atoms/pending-upload-zones-list.ts
+++ b/tdrive/frontend/src/app/features/files/state/atoms/pending-upload-zones-list.ts
@@ -1,7 +1,7 @@
-import { MessageFileType } from 'app/features/messages/types/message';
+import { AttachedFileType } from '@features/files/types/file';
 import { atomFamily } from 'recoil';
 
-export const PendingUploadZonesListState = atomFamily<MessageFileType[], string>({
+export const PendingUploadZonesListState = atomFamily<AttachedFileType[], string>({
   key: 'PendingUploadZonesListState',
   default: () => [],
 });
diff --git a/tdrive/frontend/src/app/features/files/state/selectors/current-task.ts b/tdrive/frontend/src/app/features/files/state/selectors/current-task.ts
index 94fa8686..0ff96e3b 100644
--- a/tdrive/frontend/src/app/features/files/state/selectors/current-task.ts
+++ b/tdrive/frontend/src/app/features/files/state/selectors/current-task.ts
@@ -1,4 +1,4 @@
-import FileUploadService from 'app/features/files/services/file-upload-service';
+import FileUploadService from '@features/files/services/file-upload-service';
 import { selector } from 'recoil';
 import { PendingFilesListState } from '../atoms/pending-files-list';
 
diff --git a/tdrive/frontend/src/app/features/files/types/file.ts b/tdrive/frontend/src/app/features/files/types/file.ts
index f79d69b8..bada26ad 100644
--- a/tdrive/frontend/src/app/features/files/types/file.ts
+++ b/tdrive/frontend/src/app/features/files/types/file.ts
@@ -1,6 +1,36 @@
-import Resumable from 'app/features/files/utils/resumable';
-import { ThumbnailType } from '../../messages/types/message';
-import { UserType } from 'app/features/users/types/user';
+import Resumable from '@features/files/utils/resumable';
+import { UserType } from '@features/users/types/user';
+
+export type ThumbnailType = {
+  width?: number; //Thumbnail width (for images only)
+  height?: number; //Thumbnail height (for images only)
+  id?: string; //Url to thumbnail (or set it to undefined if no relevant)
+  index?: number;
+  size?: number;
+  mime?: string;
+  type?: string;
+  url: string;
+};
+
+export type AttachedFileMetadataSource = 'internal' | 'drive' | string;
+
+export type AttachedFileType = {
+  //Primary key
+  id?: string;
+  company_id?: string; // optional
+  message_id?: string; // optional
+  thread_id?: string; // optional
+
+  metadata?: {
+    //File information when attached (it can change if edited)
+    source?: AttachedFileMetadataSource;
+    external_id: string | { company_id: string; id: string } | any;
+    name?: string; //Original name
+    size?: number; //Original weight
+    mime?: string;
+    thumbnails?: ThumbnailType[];
+  };
+};
 
 export type MetaDataType = {
   thumbnails?: ThumbnailType[];
diff --git a/tdrive/frontend/src/app/features/files/utils/pending-files.ts b/tdrive/frontend/src/app/features/files/utils/pending-files.ts
index d52fcc13..82d83279 100644
--- a/tdrive/frontend/src/app/features/files/utils/pending-files.ts
+++ b/tdrive/frontend/src/app/features/files/utils/pending-files.ts
@@ -1,4 +1,4 @@
-import { PendingFileRecoilType } from 'app/features/files/types/file';
+import { PendingFileRecoilType } from '@features/files/types/file';
 
 export const isPendingFileStatusPause = (status: PendingFileRecoilType['status']): boolean => {
   return status === 'pause' ? true : false;
diff --git a/tdrive/frontend/src/app/features/global/framework/api-service.ts b/tdrive/frontend/src/app/features/global/framework/api-service.ts
index 5f9d5037..67974984 100755
--- a/tdrive/frontend/src/app/features/global/framework/api-service.ts
+++ b/tdrive/frontend/src/app/features/global/framework/api-service.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Requests from 'app/features/global/framework/requests-api-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import Requests from '@features/global/framework/requests-api-service';
 
 class GroupedQueryApi {
   private groupedQueryBuffer: any;
diff --git a/tdrive/frontend/src/app/features/global/framework/registry-decorator-service.ts b/tdrive/frontend/src/app/features/global/framework/registry-decorator-service.ts
index 83548932..2e9603e0 100644
--- a/tdrive/frontend/src/app/features/global/framework/registry-decorator-service.ts
+++ b/tdrive/frontend/src/app/features/global/framework/registry-decorator-service.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ServiceRegistry from 'app/features/global/framework/registry-service';
+import ServiceRegistry from '@features/global/framework/registry-service';
 
 const SERVICE_SUFFIX = 'ChannelServiceImpl';
 
diff --git a/tdrive/frontend/src/app/features/global/framework/requests-api-service.ts b/tdrive/frontend/src/app/features/global/framework/requests-api-service.ts
index 0cf955c7..c45f1389 100755
--- a/tdrive/frontend/src/app/features/global/framework/requests-api-service.ts
+++ b/tdrive/frontend/src/app/features/global/framework/requests-api-service.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import JWTStorage from 'app/features/auth/jwt-storage-service';
+import JWTStorage from '@features/auth/jwt-storage-service';
 import Logger from './logger-service';
 
 class Requests {
diff --git a/tdrive/frontend/src/app/features/global/hooks/use-http.ts b/tdrive/frontend/src/app/features/global/hooks/use-http.ts
index cea3b187..41fdfab7 100644
--- a/tdrive/frontend/src/app/features/global/hooks/use-http.ts
+++ b/tdrive/frontend/src/app/features/global/hooks/use-http.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Maybe } from 'app/features/global/types/global-types';
+import { Maybe } from '@features/global/types/global-types';
 import Globals from '../services/globals-tdrive-app-service';
 import JWTStorage from '../../auth/jwt-storage-service';
 import Logger from '../framework/logger-service';
diff --git a/tdrive/frontend/src/app/features/global/hooks/use-interval.ts b/tdrive/frontend/src/app/features/global/hooks/use-interval.ts
index 52f5f9d6..70cf6fe5 100644
--- a/tdrive/frontend/src/app/features/global/hooks/use-interval.ts
+++ b/tdrive/frontend/src/app/features/global/hooks/use-interval.ts
@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'react';
-import Logger from 'app/features/global/framework/logger-service';
+import Logger from '@features/global/framework/logger-service';
 
 const logger = Logger.getLogger('useInterval');
 
diff --git a/tdrive/frontend/src/app/features/global/hooks/use-realtime.ts b/tdrive/frontend/src/app/features/global/hooks/use-realtime.ts
index 672587a8..f7d7b59c 100644
--- a/tdrive/frontend/src/app/features/global/hooks/use-realtime.ts
+++ b/tdrive/frontend/src/app/features/global/hooks/use-realtime.ts
@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import useWebSocket from 'app/features/global/hooks/use-websocket';
-import Logger from 'app/features/global/framework/logger-service';
+import useWebSocket from '@features/global/hooks/use-websocket';
+import Logger from '@features/global/framework/logger-service';
 import {
   RealtimeBaseAction,
   RealtimeBaseEvent,
   RealtimeResourceEvent,
 } from '../types/realtime-types';
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
+import { WebsocketRoom } from '@features/global/types/websocket-types';
 
 const logger = Logger.getLogger('useRealtimeRoom');
 
diff --git a/tdrive/frontend/src/app/features/global/hooks/use-usetiful.ts b/tdrive/frontend/src/app/features/global/hooks/use-usetiful.ts
index 750e07d1..6586cb56 100644
--- a/tdrive/frontend/src/app/features/global/hooks/use-usetiful.ts
+++ b/tdrive/frontend/src/app/features/global/hooks/use-usetiful.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from 'react';
 
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Logger from 'app/features/global/framework/logger-service';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import Logger from '@features/global/framework/logger-service';
 
 let initiatedService = false;
 const logger = Logger.getLogger(`app/features/global/use-usetiful`);
diff --git a/tdrive/frontend/src/app/features/global/hooks/use-websocket.ts b/tdrive/frontend/src/app/features/global/hooks/use-websocket.ts
index a25a058a..4eba4d17 100644
--- a/tdrive/frontend/src/app/features/global/hooks/use-websocket.ts
+++ b/tdrive/frontend/src/app/features/global/hooks/use-websocket.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import WebSocketFactory, { WebsocketEvents } from 'app/features/global/types/websocket-types';
-import WebSocketService from 'app/features/global/services/websocket-service';
+import WebSocketFactory, { WebsocketEvents } from '@features/global/types/websocket-types';
+import WebSocketService from '@features/global/services/websocket-service';
 
 const useWebSocket = () => {
   const wsRef = useRef<WebSocketService>();
diff --git a/tdrive/frontend/src/app/features/global/services/alert-manager-service.ts b/tdrive/frontend/src/app/features/global/services/alert-manager-service.ts
index db488b8a..ac3a0661 100755
--- a/tdrive/frontend/src/app/features/global/services/alert-manager-service.ts
+++ b/tdrive/frontend/src/app/features/global/services/alert-manager-service.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { Modal } from 'antd';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import { TdriveService } from '../framework/registry-decorator-service';
 
 const { confirm, info } = Modal;
diff --git a/tdrive/frontend/src/app/features/global/services/globals-tdrive-app-service.ts b/tdrive/frontend/src/app/features/global/services/globals-tdrive-app-service.ts
index 413e2905..206179db 100755
--- a/tdrive/frontend/src/app/features/global/services/globals-tdrive-app-service.ts
+++ b/tdrive/frontend/src/app/features/global/services/globals-tdrive-app-service.ts
@@ -3,7 +3,7 @@ import environment from 'environment/environment';
 import version from 'environment/version';
 import * as Sentry from '@sentry/browser';
 import LocalStorage from '../framework/local-storage-service';
-import { EnvironmentType, EnvironmentVersionType } from 'app/environment/types';
+import { EnvironmentType, EnvironmentVersionType } from '@environment/types';
 import ServiceRegistry from '../framework/registry-service';
 
 if (process.env.NODE_ENV === 'production' && (window as any).sentry_dsn) {
diff --git a/tdrive/frontend/src/app/features/global/services/init-service.ts b/tdrive/frontend/src/app/features/global/services/init-service.ts
index 52e39555..1d9a1833 100644
--- a/tdrive/frontend/src/app/features/global/services/init-service.ts
+++ b/tdrive/frontend/src/app/features/global/services/init-service.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Logger from 'app/features/global/framework/logger-service';
-import Observable from 'app/deprecated/Observable/Observable';
-import Api from 'app/features/global/framework/api-service';
-import { getCompany } from 'app/features/companies/state/companies';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
+import Logger from '@features/global/framework/logger-service';
+import Observable from '@deprecated/Observable/Observable';
+import Api from '@features/global/framework/api-service';
+import { getCompany } from '@features/companies/state/companies';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
 
 export type ConsoleConfiguration = {
   authority: string;
diff --git a/tdrive/frontend/src/app/features/global/services/languages-service.ts b/tdrive/frontend/src/app/features/global/services/languages-service.ts
index 5d48436e..d826fb14 100755
--- a/tdrive/frontend/src/app/features/global/services/languages-service.ts
+++ b/tdrive/frontend/src/app/features/global/services/languages-service.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-types */
-import Observable from 'app/deprecated/CollectionsV1/observable';
-import DateTime from 'app/features/global/utils/datetime';
+import Observable from '@deprecated/CollectionsV1/observable';
+import DateTime from '@features/global/utils/datetime';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import Version from 'app/environment/version';
+import Version from '@environment/version';
 class LanguagesService extends Observable {
   private i18nt: Function | null = null;
   private language = '';
diff --git a/tdrive/frontend/src/app/features/global/services/pseudo-markdown-compiler-service.ts b/tdrive/frontend/src/app/features/global/services/pseudo-markdown-compiler-service.ts
deleted file mode 100644
index e5219e40..00000000
--- a/tdrive/frontend/src/app/features/global/services/pseudo-markdown-compiler-service.ts
+++ /dev/null
@@ -1,869 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import UserService from 'app/features/users/services/current-user-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import PseudoMarkdownDictionary from 'components/twacode/pseudo-markdown-dictionary';
-import anchorme from 'anchorme';
-import emojis_original_service from 'emojione';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-
-class PseudoMarkdownCompiler {
-  saved_messages: { [key: string]: any } = {};
-  alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-  bullets: { [key: string]: any } = {
-    '• ': () => '• ',
-    '- ': () => '- ',
-    '([0-9]+)\\. ': (match: any) => {
-      const i = parseInt(match[1]);
-      return i + 1 + '. ';
-    },
-    '([a-z])\\. ': (match: any) => {
-      const i = this.alphabet.toLowerCase().indexOf(match[1]);
-      return this.alphabet.toLowerCase()[i + 1] + '. ';
-    },
-    '([A-Z])\\. ': (match: any) => {
-      const i = this.alphabet.indexOf(match[1]);
-      return this.alphabet[i + 1] + '. ';
-    },
-  };
-
-  pseudo_markdown: { [key: string]: any } = {
-    text_block_parent: {
-      name: 'text',
-      object: PseudoMarkdownDictionary.render_block.text_block_parent.object,
-      simple_object: (child: any) => child,
-    },
-    text: {
-      name: 'text',
-      object: PseudoMarkdownDictionary.render_block.text.object,
-      simple_object: (child: any) => child,
-    },
-    '\n': {
-      name: 'br',
-      end: '^',
-      allowed_chars: '.',
-      object: PseudoMarkdownDictionary.render_block.br.object,
-      simple_object: (child: any) => child,
-    },
-    '[': {
-      name: 'markdown_link',
-      allowed_char_before: '', //"(^| )",
-      allowed_chars: '.+?\\]\\([^ ]+',
-      disable_recursion: true,
-      end: '\\)',
-      object: PseudoMarkdownDictionary.render_block.markdown_link.object,
-    },
-    ':': {
-      name: 'emoji',
-      allowed_char_before: '', //"(^| )",
-      allowed_chars: '[a-z_]+',
-      disable_recursion: true,
-      end: ':',
-      object: PseudoMarkdownDictionary.render_block.emoji.object,
-    },
-    '@': {
-      name: 'user',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '[a-z_.-A-Z0-9:]+',
-      disable_recursion: true,
-      after_end: ' |$|[^a-zA-Z0-9]',
-      object: PseudoMarkdownDictionary.render_block.user.object,
-      simple_object: (_child: any, obj: any) => '@' + (obj.content || '').split(':')[0] + ' ',
-      text_transform: (PseudoMarkdownDictionary.render_block.user as any).text_transform,
-    },
-    '#': {
-      name: 'channel',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '[a-z_.-A-Z0-9\u00C0-\u017F:]+',
-      disable_recursion: true,
-      after_end: ' |$[^a-zA-Z0-9]',
-      object: PseudoMarkdownDictionary.render_block.channel.object,
-      simple_object: (_child: any, obj: any) => '#' + (obj.content || '').split(':')[0] + ' ',
-      text_transform: (PseudoMarkdownDictionary.render_block.channel as any).text_transform,
-    },
-    '```': {
-      name: 'mcode',
-      end: '```',
-      after_end: '$|\n',
-      view: true,
-      allowed_chars: '(.|\n)',
-      disable_recursion: true,
-      object: PseudoMarkdownDictionary.render_block.mcode.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.mcode as any).text_transform,
-      simple_object: (_child: any, obj: any) => {
-        const str = (obj.content || '').trim();
-        return str.length > 40 ? str.substr(0, 37) + '...' : str;
-      },
-    },
-    '`': {
-      name: 'icode',
-      end: '`',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '.',
-      disable_recursion: true,
-      object: PseudoMarkdownDictionary.render_block.icode.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.icode as any).text_transform,
-    },
-    __: {
-      name: 'underline',
-      end: '__',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '.',
-      object: PseudoMarkdownDictionary.render_block.underline.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.underline as any).text_transform,
-    },
-    '~~': {
-      name: 'strikethrough',
-      end: '~~',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '.',
-      object: PseudoMarkdownDictionary.render_block.strikethrough.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.strikethrough as any).text_transform,
-    },
-    '**': {
-      name: 'bold',
-      end: '\\*\\*',
-      allowed_char_before: '(^|\\B|.)',
-      allowed_chars: '.',
-      object: PseudoMarkdownDictionary.render_block.bold.object,
-      text_transform: PseudoMarkdownDictionary.render_block.bold.text_transform,
-    },
-    '*': {
-      name: 'italic',
-      end: '\\*',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '.',
-      object: PseudoMarkdownDictionary.render_block.italic.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.italic as any).text_transform,
-    },
-    _: {
-      name: 'italic',
-      end: '_',
-      allowed_char_before: '(^|\\B)',
-      allowed_chars: '.',
-      object: PseudoMarkdownDictionary.render_block.italic.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.italic as any).text_transform,
-    },
-    '>>>': {
-      name: 'mquote',
-      allowed_char_before: '^',
-      view: true,
-      end: false,
-      allowed_chars: '(.|\n)',
-      object: PseudoMarkdownDictionary.render_block.mquote.object,
-      simple_object: () => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.mquote as any).text_transform,
-    },
-    '>': {
-      name: 'quote',
-      view: true,
-      allowed_char_before: '^',
-      after_end: '$|\n',
-      object: PseudoMarkdownDictionary.render_block.quote.object,
-      simple_object: () => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.quote as any).text_transform,
-    },
-  };
-
-  pseudo_markdown_types: { [key: string]: any } = {
-    nop: {
-      object: PseudoMarkdownDictionary.render_block.nop.object,
-      simple_object: (child: any) => child,
-      text_transform: (PseudoMarkdownDictionary.render_block.nop as any).text_transform,
-    },
-    url: {
-      object: PseudoMarkdownDictionary.render_block.url.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.url as any).text_transform,
-    },
-    email: {
-      object: PseudoMarkdownDictionary.render_block.email.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.email as any).text_transform,
-    },
-    system: {
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.system.object,
-      simple_object: (child: any) => child,
-      text_transform: (PseudoMarkdownDictionary.render_block.system as any).text_transform,
-    },
-    file: {
-      view: true,
-      object: PseudoMarkdownDictionary.render_block.file.object,
-      simple_object: () => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.file as any).text_transform,
-    },
-    iframe: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.iframe.object,
-      simple_object: () => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.iframe as any).text_transform,
-    },
-    image: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.image.object,
-      simple_object: () => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.image as any).text_transform,
-    },
-    icon: {
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.icon.object,
-      text_transform: (PseudoMarkdownDictionary.render_block.icon as any).text_transform,
-    },
-    progress_bar: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.progress_bar.object,
-      simple_object: (_child: any, object: any) => (object.progress || 0) + '%',
-      text_transform: (PseudoMarkdownDictionary.render_block.progress_bar as any).text_transform,
-    },
-    attachment: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.attachment.object,
-      simple_object: (child: any) => child,
-      text_transform: (PseudoMarkdownDictionary.render_block.attachment as any).text_transform,
-    },
-    button: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.button.object,
-      simple_object: (_child: any) => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.button as any).text_transform,
-    },
-    copiable: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.copiable.object,
-      simple_object: (_child: any) => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.copiable as any).text_transform,
-    },
-    input: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.input.object,
-      simple_object: (_child: any) => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.input as any).text_transform,
-    },
-    select: {
-      view: true,
-      apps_only: true,
-      object: PseudoMarkdownDictionary.render_block.select.object,
-      simple_object: (_child: any) => '',
-      text_transform: (PseudoMarkdownDictionary.render_block.select as any).text_transform,
-    },
-  };
-
-  constructor() {
-    Object.keys(this.pseudo_markdown).forEach(id => {
-      const item = this.pseudo_markdown[id];
-      this.pseudo_markdown_types[item.name] = item;
-    });
-
-    (Globals.window as any).pmc = this;
-  }
-
-  compileStringToLinkObject(string: string) {
-    //Monkey hack for new markdown links, not the best place for this code
-    const link_found = anchorme(string.replace(/\[.*?\]\(.*?\)/gm, ''), {
-      list: true,
-      ips: false,
-      files: false,
-    });
-
-    let result: any[] = [];
-
-    if (link_found.length === 0) {
-      return [string];
-    } else {
-      const first_link = link_found[0];
-      const pos = string.indexOf(first_link.raw);
-      if (pos > 0) {
-        result = result.concat(this.compileStringToLinkObject(string.slice(0, pos)));
-      }
-      result.push({
-        type: first_link.reason,
-        content: first_link.raw,
-      });
-      if (pos + first_link.raw.length < string.length) {
-        result = result.concat(
-          this.compileStringToLinkObject(string.slice(pos + first_link.raw.length)),
-        );
-      }
-    }
-
-    return result;
-  }
-
-  transformChannelsUsers(str: string) {
-    //Users
-    str = (str || '').replace(
-      /(\B@)([a-z_.-A-Z0-9]*[a-z_A-Z0-9-])(( |$|([^a-zA-Z0-9]|$){2}))/g,
-      (full_match, match1, username, match3) => {
-        const values = username.split(':');
-        if (values.length === 1) {
-          if (username === 'me') {
-            username = UserService.getCurrentUser().username;
-          }
-          let user_id = Collections.get('users').findBy({ username: username })[0];
-          if (user_id && user_id.id) {
-            user_id = user_id.id;
-            return match1 + username + ':' + user_id + match3;
-          } else {
-            return full_match;
-          }
-        } else {
-          return full_match;
-        }
-      },
-    );
-    //Channels
-    str = str.replace(
-      /(\B#)([a-z_.-A-Z0-9\u00C0-\u017F]*[a-z_A-Z0-9-])(( |$|([^a-zA-Z0-9]|$){2}))/g,
-      (full_match, match1, channel, match3) => {
-        const values = channel.split(':');
-        if (values.length === 1) {
-          let channel_id = Collections.get('channels')
-            .findBy({})
-            .filter(
-              (item: { [key: string]: any }) =>
-                (item.name || '').toLocaleLowerCase().replace(/[^a-z0-9_\-.\u00C0-\u017F]/g, '') ===
-                channel,
-            )[0];
-          if (channel_id && channel_id.id) {
-            channel_id = channel_id.id;
-            return match1 + channel + ':' + channel_id + match3;
-          } else {
-            return full_match;
-          }
-        } else {
-          return full_match;
-        }
-      },
-    );
-    return str;
-  }
-
-  transformBackChannelsUsers(str: string) {
-    //Users
-    str = (str || '').replace(/\B(@[^\s]*?):.*?(( |$|[^a-zA-Z0-9-]))/g, '$1$2');
-    //Channels
-    str = str.replace(/\B(#[^\s]*?):.*?(( |$|[^a-zA-Z0-9-]))/g, '$1$2');
-    return str;
-  }
-
-  compileToJSON(str: string, recursive: any = false) {
-    if (!recursive) {
-      const result: any[] = [];
-      const original_str = str;
-      const _str = str.split('```'); //Priority to code
-      _str.forEach((str, i) => {
-        if (i % 2 === 0) {
-          if (str) {
-            str = this.transformChannelsUsers(str);
-
-            emojis_original_service.ascii = true;
-            str = emojis_original_service.shortnameToUnicode(str);
-            str = emojis_original_service.toShort(str);
-
-            const links = this.compileStringToLinkObject(str);
-            links.forEach(item => {
-              if (typeof item === 'string') {
-                result.push(this.compileToJSON(item, true));
-              } else {
-                result.push(item);
-              }
-            });
-          }
-        } else {
-          const object = {
-            start: '```',
-            content: str,
-            end: '\n```',
-          };
-          result.push(object);
-          //original_str += "```\n"+str+"\n```";
-        }
-      });
-
-      const all = {
-        original_str: original_str,
-        fallback_string: original_str.substr(0, 280) + (original_str.length > 280 ? '...' : ''),
-        prepared: result,
-      };
-
-      return all;
-    }
-
-    // eslint-disable-next-line no-redeclare
-    const original_str = str;
-
-    // eslint-disable-next-line no-redeclare
-    let result: any = [];
-
-    let min_index_of = -1;
-    let min_index_of_key: any = null;
-
-    let ret: any = [];
-    Object.keys(this.pseudo_markdown)
-      .sort((a, b) => b.length - a.length)
-      .forEach(starting_value => {
-        if (starting_value === 'text') {
-          return;
-        }
-
-        const allowed_char_before = this.pseudo_markdown[starting_value].allowed_char_before;
-        let tmp = str;
-        let offset = 0;
-        const indexes = [];
-        let did_match = -1;
-        do {
-          did_match = tmp.indexOf(starting_value);
-
-          let match_char_before =
-            !allowed_char_before ||
-            null !== tmp.slice(0, did_match).match(new RegExp(allowed_char_before + '$', 'gmi'));
-          match_char_before = match_char_before && tmp[did_match - 1] !== '\\';
-
-          tmp = tmp.slice(did_match + 1);
-          if (did_match >= 0 && match_char_before) indexes.push(did_match + offset);
-          offset = offset + did_match + 1;
-        } while (did_match >= 0);
-
-        if (indexes.length > 0) {
-          const mini = Math.min(...indexes);
-          if (min_index_of < 0 || mini < min_index_of) {
-            min_index_of = mini;
-            min_index_of_key = starting_value;
-          }
-        }
-      });
-
-    str = original_str;
-
-    if (min_index_of_key) {
-      let str_left = str.substr(0, min_index_of);
-      const char = min_index_of_key;
-      let str_right = str.substr(min_index_of + char.length);
-
-      //Seach end of element in str_right
-      let match: any = -1;
-      let add_to_value = '';
-      while (match < 0 || (match && match[1][match[1].length - 1] === '\\')) {
-        if (match && match !== -1) {
-          //It mean we found an antislashed element
-          add_to_value += match[0];
-        }
-        const countManaged =
-          (this.pseudo_markdown[char].allowed_chars || '').slice(-1) === '+' ||
-          (this.pseudo_markdown[char].allowed_chars || '').slice(-1) === '}';
-        const regex =
-          '^(' +
-          (this.pseudo_markdown[char].allowed_chars || '.') +
-          (countManaged ? '' : '*') +
-          (this.pseudo_markdown[char].end ? '?' : '') +
-          ')' +
-          (this.pseudo_markdown[char].end ? '(' + this.pseudo_markdown[char].end + ')' : '');
-        match = str_right.substr(add_to_value.length).match(new RegExp(regex, ''));
-      }
-      let completion_end_char = '';
-      if (match) {
-        match[0] = add_to_value + match[0];
-        match[1] = add_to_value + match[1];
-        completion_end_char = this.pseudo_markdown[char].after_end ? match[3] || '' : '';
-      }
-
-      if (!match) {
-        str_left = str_left + char;
-        result = result.concat(str_left);
-      } else {
-        if (str_left) {
-          result = result.concat(str_left);
-        }
-
-        //Generate object
-        const object = {
-          start: char,
-          content: this.pseudo_markdown[char].disable_recursion
-            ? match[1]
-            : this.compileToJSON(match[1], 1),
-          end: match[2],
-        };
-        result.push(object);
-
-        str_right = completion_end_char + str_right.substr(match[0].length);
-      }
-
-      result = result.concat(this.compileToJSON(str_right, 1));
-
-      ret = result;
-    } else {
-      if (original_str) {
-        ret = original_str;
-      } else {
-        ret = [];
-      }
-    }
-
-    return ret;
-  }
-
-  compileToHTML(
-    json: any,
-    is_app: any = false,
-    event_container: any = undefined,
-    text_transform: any = undefined,
-  ) {
-    if (!text_transform) {
-      text_transform = {};
-    }
-
-    if (!json) {
-      return this.pseudo_markdown['text'].object('');
-    }
-
-    if (json.formatted || json.prepared) json = json.formatted || json.prepared;
-
-    if (typeof json === 'string') {
-      json = [json];
-    }
-
-    if (json.type || json.start) {
-      json = [json];
-    }
-
-    let el = null;
-    let child_contain_view = false;
-    const result: any = [];
-    try {
-      json.forEach((item: any) => {
-        if (typeof item === 'string') {
-          result.push(
-            this.pseudo_markdown['text'].object(item, is_app, event_container, text_transform),
-          );
-        } else if (Array.isArray(item)) {
-          el = this.compileToHTML(item, is_app, event_container, text_transform);
-          child_contain_view = child_contain_view || el.child_contain_view;
-          result.push(el);
-        } else {
-          let type = this.pseudo_markdown[item.start];
-          if (item.type === 'compile' && is_app && typeof item.content === 'string') {
-            el = this.compileToHTML(
-              this.compileToJSON(item.content),
-              is_app,
-              event_container,
-              text_transform,
-            );
-            child_contain_view = child_contain_view || el.child_contain_view;
-            result.push(el);
-          } else {
-            if (item.type) {
-              type = this.pseudo_markdown_types[item.type];
-            }
-            if (type) {
-              if (!type.apps_only || is_app) {
-                //If text transform do it
-                const old_text_transform = JSON.parse(JSON.stringify(text_transform));
-                text_transform = JSON.parse(JSON.stringify(text_transform));
-                if (type.text_transform) {
-                  Object.keys(type.text_transform).forEach(key => {
-                    text_transform[key] = type.text_transform[key];
-                  });
-                }
-
-                el = this.compileToHTML(
-                  item.content || '',
-                  is_app,
-                  event_container,
-                  text_transform,
-                );
-                if (type.view) {
-                  child_contain_view = true;
-                }
-                child_contain_view = child_contain_view || el.child_contain_view;
-
-                result.push(
-                  type.object(el, item, event_container, text_transform, child_contain_view),
-                );
-
-                text_transform = old_text_transform;
-              }
-            }
-          }
-        }
-      });
-    } catch (e) {
-      return this.pseudo_markdown['text'].object('An error occured while showing this message.');
-    }
-    result.child_contain_view = child_contain_view;
-
-    result.forEach((item: any) => {
-      if (!item.child_contain_view && child_contain_view) {
-        item = this.pseudo_markdown['text_block_parent'].object(item);
-      }
-    });
-
-    return result;
-  }
-
-  compileToSimpleHTML(
-    json: any,
-    is_app = false,
-    text_transform: any = undefined,
-    result_analysis: any = undefined,
-  ) {
-    if (!text_transform) {
-      text_transform = {};
-    }
-
-    if (!json) {
-      return this.pseudo_markdown['text'].object('');
-    }
-
-    if (!result_analysis) {
-      result_analysis = {
-        has_string: false,
-      };
-    }
-
-    if (json.formatted || json.prepared) json = json.formatted || json.prepared;
-
-    if (typeof json === 'string') {
-      json = [json];
-    }
-
-    if (json.type || json.start) {
-      json = [json];
-    }
-
-    const result: any = [];
-    try {
-      json.forEach((item: any) => {
-        if (typeof item === 'string') {
-          result_analysis.has_string = true;
-          result.push(
-            this.pseudo_markdown['text'].object(item, is_app, {}, text_transform, result_analysis),
-          );
-        } else if (Array.isArray(item)) {
-          result.push(this.compileToSimpleHTML(item, is_app, text_transform, result_analysis));
-        } else {
-          let type = this.pseudo_markdown[item.start];
-          if (item.type) {
-            type = this.pseudo_markdown_types[item.type];
-          }
-          if (type) {
-            if (item.type === 'compile' && is_app && typeof item.content === 'string') {
-              result.push(
-                this.compileToSimpleHTML(
-                  this.compileToJSON(item.content),
-                  is_app,
-                  text_transform,
-                  result_analysis,
-                ),
-              );
-            } else {
-              if (item.type) {
-                type = this.pseudo_markdown_types[item.type];
-              }
-              if (type) {
-                if (!type.apps_only || is_app) {
-                  //If text transform do it
-                  const old_text_transform = JSON.parse(JSON.stringify(text_transform));
-                  text_transform = JSON.parse(JSON.stringify(text_transform));
-                  if (type.text_transform) {
-                    Object.keys(type.text_transform).forEach(key => {
-                      text_transform[key] = type.text_transform[key];
-                    });
-                  }
-
-                  result.push(
-                    (type.simple_object || type.object)(
-                      this.compileToSimpleHTML(
-                        item.content || '',
-                        is_app,
-                        text_transform,
-                        result_analysis,
-                      ),
-                      item,
-                      {},
-                    ),
-                  );
-
-                  text_transform = old_text_transform;
-                }
-              }
-            }
-          }
-        }
-      });
-    } catch (e) {
-      console.log(e);
-      return this.pseudo_markdown['text'].object('An error occured while showing this message.');
-    }
-
-    if (!result_analysis.has_string) {
-      return this.pseudo_markdown['text'].object('No text content to display.');
-    }
-
-    return result;
-  }
-
-  compileToText(json: any) {
-    if (!json) {
-      return '';
-    }
-
-    if (typeof json === 'string') {
-      json = [json];
-    }
-
-    if (json.original_str) {
-      return this.transformBackChannelsUsers(json.original_str);
-    }
-
-    if (json.type || json.start) {
-      json = [json];
-    }
-
-    let result = '';
-    try {
-      json.forEach((item: any) => {
-        if (typeof item === 'string') {
-          let tmp = item;
-          Object.keys(this.pseudo_markdown).forEach(starting_value => {
-            let starting_value_reg = starting_value;
-            const allowed_chars = this.pseudo_markdown[starting_value].allowed_chars;
-            if (starting_value === '*') {
-              starting_value_reg = '\\*';
-            }
-            if (allowed_chars) {
-              const reg = new RegExp(starting_value_reg, 'gm');
-              tmp = tmp.replace(reg + '(' + allowed_chars + ')', '\\' + starting_value + '$1');
-            } else {
-              // eslint-disable-next-line no-redeclare
-              const reg = new RegExp(starting_value_reg, 'gm');
-              tmp = tmp.replace(reg, '\\' + starting_value);
-            }
-          });
-
-          result += tmp;
-        } else if (Array.isArray(item)) {
-          result += this.compileToText(item);
-        } else {
-          result += item.start || '';
-          result += this.compileToText(item.content);
-          result += item.end || '';
-        }
-      });
-    } catch (e) {
-      return '';
-    }
-
-    return this.transformBackChannelsUsers(result);
-  }
-
-  insertAtCursor(myField: any, myValue: any) {
-    //IE support
-    if ((document as any).selection) {
-      myField.focus();
-      const sel = (document as any).selection.createRange();
-      sel.text = myValue;
-    }
-    //MOZILLA and others
-    else if (myField.selectionStart || myField.selectionStart === '0') {
-      const startPos = myField.selectionStart;
-      const endPos = myField.selectionEnd;
-      myField.value =
-        myField.value.substring(0, startPos) +
-        myValue +
-        myField.value.substring(endPos, myField.value.length);
-    } else {
-      myField.value += myValue;
-    }
-  }
-
-  //Call this function after each line break
-  autoCompleteBulletList(input: any, didEnter: any) {
-    const getCursorPos = (input: any) => {
-      if ('selectionStart' in input && document.activeElement === input) {
-        return {
-          start: input.selectionStart,
-          end: input.selectionEnd,
-        };
-      } else if (input.createTextRange) {
-        const sel = (document as any).selection.createRange();
-        if (sel.parentElement() === input) {
-          const rng = input.createTextRange();
-          rng.moveToBookmark(sel.getBookmark());
-          let len = 0;
-          for (len; rng.compareEndPoints('EndToStart', rng) > 0; rng.moveEnd('character', -1)) {
-            len++;
-            rng.setEndPoint('StartToStart', input.createTextRange());
-          }
-          const pos = { start: 0, end: len };
-          for (pos; rng.compareEndPoints('EndToStart', rng) > 0; rng.moveEnd('character', -1)) {
-            pos.start++;
-            pos.end++;
-          }
-          return pos;
-        }
-      }
-      return -1;
-    };
-    const setCaretPosition = (ctrl: any, pos: any) => {
-      // Modern browsers
-      if (ctrl.setSelectionRange) {
-        ctrl.focus();
-        ctrl.setSelectionRange(pos, pos);
-
-        // IE8 and below
-      } else if (ctrl.createTextRange) {
-        const range = ctrl.createTextRange();
-        range.collapse(true);
-        range.moveEnd('character', pos);
-        range.moveStart('character', pos);
-        range.select();
-      }
-    };
-
-    if (didEnter) {
-      //@ts-ignore
-      const cursor_position = (getCursorPos(input) || {}).start;
-      if (cursor_position === false || cursor_position < 0) {
-        return;
-      }
-      const value = input.value;
-
-      const str_before = value.substr(0, cursor_position);
-      const str_after = value.substr(cursor_position);
-
-      const src_line_before = str_before.split('\n').pop();
-      let addon = '';
-      let to_remove = 0;
-      Object.keys(this.bullets).forEach(regex => {
-        const match = src_line_before.match(new RegExp('^' + regex, ''));
-        if (match) {
-          if (src_line_before.length > match[0].length) {
-            addon = this.bullets[regex](match);
-          } else {
-            to_remove = src_line_before.length;
-          }
-        }
-      });
-
-      if (to_remove > 0) {
-        input.value = str_before.substr(0, str_before.length - to_remove) + str_after;
-        setCaretPosition(input, cursor_position - to_remove);
-      } else {
-        input.value = str_before + '\n' + addon + str_after;
-        setCaretPosition(input, cursor_position + addon.length + 1);
-      }
-
-      return input.value;
-    }
-  }
-}
-
-const service = new PseudoMarkdownCompiler();
-export default service;
diff --git a/tdrive/frontend/src/app/features/global/services/search-list-manager-service.ts b/tdrive/frontend/src/app/features/global/services/search-list-manager-service.ts
deleted file mode 100644
index 52c94feb..00000000
--- a/tdrive/frontend/src/app/features/global/services/search-list-manager-service.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import { UserType } from 'app/features/users/types/user';
-import Strings from 'app/features/global/utils/strings';
-import UsersService from 'app/features/users/services/current-user-service';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import RouterServices from 'app/features/router/services/router-service';
-import { getUserParts } from 'app/components/member/user-parts';
-import Observable from 'app/deprecated/Observable/Observable';
-import UserAPIClient from '../../users/api/user-api-client';
-import ChannelsReachableAPIClient from '../../channels/api/channels-reachable-api-client';
-import ChannelsMineAPIClient from '../../channels/api/channels-mine-api-client';
-
-export type GenericChannel = {
-  type: 'user' | 'direct' | 'workspace';
-  sortString: string;
-  filterString: string;
-  lastActivity?: number;
-  resource: UserType | ChannelType;
-};
-
-class SearchListManager extends Observable {
-  private workspaceChannels: GenericChannel[];
-  private directChannels: GenericChannel[];
-  private users: GenericChannel[];
-  public list: GenericChannel[];
-
-  constructor() {
-    super();
-    this.workspaceChannels = [];
-    this.directChannels = [];
-    this.users = [];
-    this.list = [];
-  }
-
-  public async searchAll(
-    search: string,
-    opts?: {
-      onlyChannel?: boolean;
-      userListState?: UserType[];
-    },
-  ): Promise<void> {
-    const { workspaceId, companyId } = RouterServices.getStateFromRoute();
-
-    // Reachable
-    let channels: ChannelType[] = [];
-
-    // Direct Channels
-    let directChannels: ChannelType[] = [];
-
-    // Mine
-    let mineWorkspaceChannels: ChannelType[] = [];
-
-    const usersSearched: UserType[] = opts?.userListState ? opts.userListState : [];
-    if (companyId && workspaceId) {
-      channels = await ChannelsReachableAPIClient.get(companyId, workspaceId);
-      directChannels = await ChannelsMineAPIClient.get({ companyId, workspaceId: 'direct' });
-      mineWorkspaceChannels = await ChannelsMineAPIClient.get({ companyId, workspaceId });
-    }
-
-    // Filters
-    this.workspaceChannels = this.filterWorkspaceChannels({
-      channels,
-      mineWorkspaceChannels,
-    });
-
-    this.directChannels = opts?.onlyChannel
-      ? []
-      : this.filterDirectChannels({ channels: directChannels });
-
-    this.users = this.filterUsers({ users: usersSearched });
-    // Concat list
-    this.list = [...this.workspaceChannels, ...this.directChannels, ...this.users];
-
-    this.removeDuplicate();
-
-    this.list = this.list
-      .filter(({ filterString }) => {
-        return filterString.toUpperCase().indexOf(search.toUpperCase()) > -1;
-      })
-      .sort((a, b) => (b.lastActivity || 0) - (a.lastActivity || 0));
-    this.notify();
-  }
-
-  private async searchUsers(text: string) {
-    return UserAPIClient.search<UserType>(Strings.removeAccents(text), {
-      scope: 'company',
-      companyId: Workspaces.currentGroupId,
-    });
-  }
-
-  private filterWorkspaceChannels({
-    channels,
-    mineWorkspaceChannels,
-  }: {
-    channels: ChannelType[];
-    mineWorkspaceChannels: ChannelType[];
-  }) {
-    const workspaceChannels: GenericChannel[] = channels.map(channel => {
-      return {
-        sortString: channel.name || '',
-        filterString: channel.name || '',
-        type: 'workspace',
-        lastActivity: channel.last_activity || 0,
-        resource: channel,
-      };
-    });
-
-    return workspaceChannels.filter(channel => {
-      if (channel.type === 'workspace') {
-        const resource = channel.resource as ChannelType;
-        const isNotAbleToSeeChannel =
-          !this.isChannelMember(mineWorkspaceChannels, resource) &&
-          resource.visibility === 'private';
-        return !isNotAbleToSeeChannel;
-      }
-      return undefined;
-    });
-  }
-
-  private filterDirectChannels({ channels }: { channels: ChannelType[] }) {
-    const directChannels: GenericChannel[] = channels.map((channel: ChannelType) => {
-      const { name } = getUserParts({
-        usersIds: channel.members || [],
-      });
-
-      return {
-        sortString: name,
-        filterString: name,
-        type: 'direct',
-        lastActivity: channel.last_activity || 0,
-        resource: channel,
-      };
-    });
-
-    return directChannels;
-  }
-
-  private filterUsers({ users }: { users: UserType[] }) {
-    const usersSearched: GenericChannel[] = users.map(user => {
-
-      return (
-        user && {
-          sortString: UsersService.getFullName(user),
-          filterString: UsersService.getFullName(user),
-          type: 'user',
-          resource: user,
-        }
-      );
-    });
-
-    return usersSearched;
-  }
-
-  /**
-   * Remove duplicates between direct channels and users
-   */
-  private removeDuplicate() {
-    const existingUsersIdAsDirectChannels = this.list
-      .filter(
-        userOrChannel =>
-          userOrChannel.type === 'direct' &&
-          ((userOrChannel.resource as ChannelType).members?.length || 0) <= 2,
-      )
-      .map(userOrChannel => {
-        const channel = userOrChannel.resource as ChannelType;
-        if (channel.members?.length === 1) {
-          return channel.members[0];
-        }
-        if (channel.members?.length === 2) {
-          const otherUserId = channel.members.filter(
-            id => id !== UsersService.getCurrentUserId(),
-          )[0];
-          return otherUserId;
-        }
-        return undefined;
-      });
-
-    this.list = this.list.filter(userOrChannel => {
-      if (userOrChannel.type === 'user') {
-        const user = userOrChannel.resource as UserType;
-        return !existingUsersIdAsDirectChannels.includes(user.id);
-      }
-      return true;
-    });
-  }
-
-  private isChannelMember(mine: ChannelType[], resource: ChannelType) {
-    return mine.some(channel => resource.id === channel.id && channel.user_member?.user_id);
-  }
-}
-
-const SearchListManagerService = new SearchListManager();
-
-export default SearchListManagerService;
diff --git a/tdrive/frontend/src/app/features/global/services/websocket-service.ts b/tdrive/frontend/src/app/features/global/services/websocket-service.ts
index 02547a0d..331fbc7c 100644
--- a/tdrive/frontend/src/app/features/global/services/websocket-service.ts
+++ b/tdrive/frontend/src/app/features/global/services/websocket-service.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import io from 'socket.io-client';
 import { EventEmitter } from 'events';
-import Logger from 'app/features/global/framework/logger-service';
+import Logger from '@features/global/framework/logger-service';
 import { WebsocketEvents, WebSocketListener, WebsocketRoomActions } from '../types/websocket-types';
-import { Maybe } from 'app/features/global/types/global-types';
+import { Maybe } from '@features/global/types/global-types';
 
 export type WebSocketOptions = {
   url: string;
diff --git a/tdrive/frontend/src/app/features/global/utils/Autocomplete.js b/tdrive/frontend/src/app/features/global/utils/Autocomplete.js
index e5034f7d..8dfbfb45 100755
--- a/tdrive/frontend/src/app/features/global/utils/Autocomplete.js
+++ b/tdrive/frontend/src/app/features/global/utils/Autocomplete.js
@@ -1,4 +1,4 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
+import Observable from '@deprecated/CollectionsV1/observable.js';
 
 class Autocomplete extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/features/global/utils/URLUtils.ts b/tdrive/frontend/src/app/features/global/utils/URLUtils.ts
index 4d41bbb5..1aee3bac 100644
--- a/tdrive/frontend/src/app/features/global/utils/URLUtils.ts
+++ b/tdrive/frontend/src/app/features/global/utils/URLUtils.ts
@@ -1,5 +1,5 @@
-import environment from 'app/environment/environment';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import environment from '@environment/environment';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 export function addApiUrlIfNeeded(url: string, asCssUrl?: boolean): string {
   function _wrap(url: string): string {
diff --git a/tdrive/frontend/src/app/features/global/utils/datetime.js b/tdrive/frontend/src/app/features/global/utils/datetime.js
index d6048d16..9a180be7 100755
--- a/tdrive/frontend/src/app/features/global/utils/datetime.js
+++ b/tdrive/frontend/src/app/features/global/utils/datetime.js
@@ -4,10 +4,10 @@ import 'moment/locale/fr';
 import 'moment/locale/de';
 import 'moment/locale/ja';
 import 'moment/locale/es';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import UserService from 'app/features/users/services/current-user-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import UserService from '@features/users/services/current-user-service';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class DateTime extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/features/global/utils/window.ts b/tdrive/frontend/src/app/features/global/utils/window.ts
index feab6a08..3b4a44c6 100755
--- a/tdrive/frontend/src/app/features/global/utils/window.ts
+++ b/tdrive/frontend/src/app/features/global/utils/window.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { capitalize } from 'lodash';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 class WindowState {
   public readonly app_name: string = 'Tdrive';
diff --git a/tdrive/frontend/src/app/features/global/utils/workspacePicker.js b/tdrive/frontend/src/app/features/global/utils/workspacePicker.js
index b07018f8..f78e07cb 100755
--- a/tdrive/frontend/src/app/features/global/utils/workspacePicker.js
+++ b/tdrive/frontend/src/app/features/global/utils/workspacePicker.js
@@ -1,5 +1,5 @@
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import Api from 'app/features/global/framework/api-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import Api from '@features/global/framework/api-service';
 
 class WorkspacePicker extends Observable {
   constructor() {
diff --git a/tdrive/frontend/src/app/features/invitation/api/invitation-api-client.ts b/tdrive/frontend/src/app/features/invitation/api/invitation-api-client.ts
deleted file mode 100644
index 4aecfe64..00000000
--- a/tdrive/frontend/src/app/features/invitation/api/invitation-api-client.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import Api from 'app/features/global/framework/api-service';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-import { InvitationType as InvitationRoleType, InvitedUser } from '../state/invitation';
-import Logger from 'app/features/global/framework/logger-service';
-
-type InvitationType = {
-  email: string;
-  role: string;
-  company_role: InvitationRoleType;
-};
-
-type WorkspaceUserInvitationResponseType = {
-  email: string;
-  status: 'ok' | 'error';
-  message?: string;
-};
-
-type WorkspaceUserInvitationPayloadType = {
-  invitations: InvitationType[];
-  channels: string[];
-};
-
-type WorkspaceInvitationTokenResponseType = {
-  resource: {
-    token: string;
-  };
-};
-
-type WorkspaceInvitationTokenPayloadType = {
-  channels: string[];
-};
-
-@TdriveService('InvitationApiClientService')
-class InvitationApiClient {
-  private readonly apiBaseUrl: string = '/internal/services/workspaces/v1/companies';
-  logger: Logger.Logger;
-
-  constructor() {
-    this.logger = Logger.getLogger('Invitation');
-  }
-
-  /**
-   * Creates an invitation token to the workspace
-   *
-   * @param {String} companyId    - the company
-   * @param {String} workspaceId  - the workspace to be invited in.
-   * @param {String[]} channels   - the channels to be invited in.
-   * @returns {String}            - the invitation token.
-   */
-  async createInvitationToken(
-    companyId: string,
-    workspaceId: string,
-    channels: string[],
-  ): Promise<string> {
-    return Api.post<WorkspaceInvitationTokenPayloadType, WorkspaceInvitationTokenResponseType>(
-      `${this.apiBaseUrl}/${companyId}/workspaces/${workspaceId}/users/tokens`,
-      { channels },
-    ).then(({ resource }) => resource.token);
-  }
-
-  /**
-   * Invite users to workspace by email
-   *
-   * @param {String} companyId - the company id.
-   * @param {String} workspaceId - the workspace id.
-   * @param {InvitedUser[]} invitedUsers - the array of emails to invite with their roles.
-   */
-  async inviteToWorkspace(companyId: string, workspaceId: string, invitedUsers: InvitedUser[], channels: string[]) {
-    const response = await Api.post<
-      WorkspaceUserInvitationPayloadType,
-      { resources: WorkspaceUserInvitationResponseType[] }
-    >(`${this.apiBaseUrl}/${companyId}/workspaces/${workspaceId}/users/invite`, {
-      invitations: [
-        ...invitedUsers.map(({ email, role }) => ({
-          email,
-          role: 'member',
-          company_role: role,
-        })),
-      ],
-      channels,
-    });
-
-    if (!response.resources || !response.resources.length) {
-      this.logger.error('Failed to invite users to the workspace');
-      throw Error('Failed to invite users to the workspace');
-    }
-
-    if (response.resources.filter(({ message }) => message && message.includes('403')).length) {
-      this.logger.error('No access rights to invite to this company');
-      throw Error('Failed to invite users: No access rights to invite to this company');
-    }
-
-    if (response.resources.filter(({ status }) => status === 'error').length === response.resources.length) {
-      this.logger.error('Failed to invite users to the company');
-      throw Error('Failed to invite users');
-    }
-
-    response.resources
-      .filter(({ status }) => status === 'error')
-      .forEach(({ email, message }) => {
-        this.logger.error(`Failed to invite ${email}: ${message}`);
-      });
-
-    return response;
-  }
-}
-
-export default new InvitationApiClient();
diff --git a/tdrive/frontend/src/app/features/invitation/hooks/use-invitation-channels.ts b/tdrive/frontend/src/app/features/invitation/hooks/use-invitation-channels.ts
deleted file mode 100644
index beb97191..00000000
--- a/tdrive/frontend/src/app/features/invitation/hooks/use-invitation-channels.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { usePublicOrPrivateChannels } from 'app/features/channels/hooks/use-public-or-private-channels';
-import { ChannelType } from 'app/features/channels/types/channel';
-import { uniqBy } from 'lodash';
-import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
-import { invitationChannelListState, invitationChannelSelectionState } from '../state/invitation';
-
-export const useInvitationChannels = () => {
-  const [channels, setSelectedChannels] = useRecoilState(invitationChannelListState);
-  const [open, setOpen] = useRecoilState(invitationChannelSelectionState);
-  const { publicChannels } = usePublicOrPrivateChannels();
-  const defaultChannels = (publicChannels || []).filter(({ is_default }) => is_default);
-
-  const setChannels = (channels: ChannelType[]): void => {
-    setSelectedChannels(uniqBy([...channels, ...defaultChannels], 'id'));
-  };
-
-  useEffect(() => {
-    setSelectedChannels(uniqBy([...channels, ...defaultChannels], 'id'));
-  }, []);
-
-  return {
-    openSelection: () => setOpen(true),
-    closeSelection: () => setOpen(false),
-    setChannels,
-    selectedChannels: channels,
-    open,
-    reset: () => setSelectedChannels(defaultChannels),
-  };
-};
diff --git a/tdrive/frontend/src/app/features/invitation/hooks/use-invitation-users.ts b/tdrive/frontend/src/app/features/invitation/hooks/use-invitation-users.ts
deleted file mode 100644
index ac3a5e5d..00000000
--- a/tdrive/frontend/src/app/features/invitation/hooks/use-invitation-users.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
-import { invitationEmailsState, InvitationType, invitationTypeState } from '../state/invitation';
-
-export const useInvitationUsers = () => {
-  const { company } = useCurrentCompany();
-  const [invitedUsers, setInvitedUsers] = useRecoilState(invitationEmailsState);
-  const [role] = useRecoilState(invitationTypeState);
-  const { user: currentUser } = useCurrentUser();
-  const currentUserEmailDomain = currentUser?.email.split('@').pop();
-  const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
-
-  const [allowedMembers, setAllowedMembers] = useState<number>(
-    company.plan?.limits?.['company:members_limit'] === -1
-      ? Infinity
-      : company.plan?.limits?.['company:members_limit'] || Infinity,
-  );
-  const [allowedGuests, setAllowedGuests] = useState<number>(
-    company.plan?.limits?.['company:guests_limit'] === -1
-      ? Infinity
-      : company.plan?.limits?.['company:guests_limit'] || Infinity,
-  );
-  const [canAddInvitations, setCanAddInvitations] = useState<boolean>(
-    role === InvitationType.member ? allowedMembers > 0 : allowedGuests > 0,
-  );
-  const [membersLimitReached, setMembersLimitReached] = useState<boolean>(false);
-
-  useEffect(() => {
-    const invitedMembers = invitedUsers.filter(({ role }) => role === InvitationType.member);
-    const invitedGuests = invitedUsers.filter(({ role }) => role === InvitationType.guest);
-
-    setAllowedMembers(
-      (company.plan?.limits?.['company:members_limit'] === -1
-        ? Infinity
-        : company.plan?.limits?.['company:members_limit'] || Infinity) - invitedMembers.length,
-    );
-    setAllowedGuests(
-      (company.plan?.limits?.['company:guests_limit'] === -1
-        ? Infinity
-        : company.plan?.limits?.['company:guests_limit'] || Infinity) - invitedGuests.length,
-    );
-
-    if (role === InvitationType.member) {
-      setMembersLimitReached(allowedMembers <= 0);
-    } else {
-      setMembersLimitReached(false);
-    }
-
-    setCanAddInvitations(role === InvitationType.member ? allowedMembers > 0 : allowedGuests > 0);
-  }, []);
-
-  const addInvitation = (email: string): void => {
-    if (!emailRegex.test(email)) return;
-    if (email.split('@').pop() !== currentUserEmailDomain) return;
-    if (role === InvitationType.member && allowedMembers <= 0) return;
-    if (role === InvitationType.guest && allowedGuests <= 0) return;
-    if (invitedUsers.find(invitation => invitation.email === email)) return;
-
-    setInvitedUsers([...invitedUsers, { email, role }]);
-  };
-
-  return {
-    allowed_members: allowedMembers,
-    allowed_guests: allowedGuests,
-    addInvitation,
-    can_add_invitations: canAddInvitations,
-    members_limit_reached: membersLimitReached,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/invitation/hooks/use-invitation.ts b/tdrive/frontend/src/app/features/invitation/hooks/use-invitation.ts
deleted file mode 100644
index 2af31317..00000000
--- a/tdrive/frontend/src/app/features/invitation/hooks/use-invitation.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { useRecoilState } from 'recoil';
-import invitationApiClient from '../api/invitation-api-client';
-import { invitationChannelListState, invitationEmailsState, invitationSentState } from '../state/invitation';
-import { useInvitationChannels } from './use-invitation-channels';
-
-export const useInvitation = () => {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const [invitedUsers, setInvitedUsers] = useRecoilState(invitationEmailsState);
-  const [channels] = useRecoilState(invitationChannelListState);
-  const [, setSentState] = useRecoilState(invitationSentState);
-  const { reset: resetChannels } = useInvitationChannels();
-
-  const send = async () => {
-    try {
-      await invitationApiClient.inviteToWorkspace(
-        companyId,
-        workspaceId,
-        invitedUsers,
-        channels.map(channel => channel.id as string),
-      );
-      setSentState(true);
-    }
-    catch(error) {
-     ToasterService.error((error as Error).toString());
-    }
-  }
-
-  const generateInvitationLink = async () => {
-    try {
-      const token = await invitationApiClient.createInvitationToken(
-        companyId,
-        workspaceId,
-        channels.map(channel => channel.id as string),
-      );
-
-      return `${window.location.origin}/?join=${token}`;
-    }
-    catch(error) {
-      ToasterService.error((error as Error).toString());
-    }
-  }
-
-  const reset = () => {
-    setSentState(false);
-    setInvitedUsers([]);
-    resetChannels();
-  }
-
-  return { send, generateInvitationLink, reset };
-};
diff --git a/tdrive/frontend/src/app/features/invitation/state/invitation.ts b/tdrive/frontend/src/app/features/invitation/state/invitation.ts
deleted file mode 100644
index ba2aa872..00000000
--- a/tdrive/frontend/src/app/features/invitation/state/invitation.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import { atom } from 'recoil';
-
-export enum InvitationType {
-  guest = "guest",
-  member = "member",
-}
-
-export type InvitedUser = {
-  email: string,
-  role: InvitationType
-}
-
-export const invitationState = atom<boolean>({
-  default: false,
-  key: 'invitationState',
-});
-
-export const invitationActiveTab = atom<number>({
-  default: 0,
-  key: 'invitationActiveTabState',
-});
-
-export const invitationTypeState = atom<InvitationType>({
-  default: InvitationType.member,
-  key: 'invitationTypeState',
-});
-
-export const invitationEmailsState = atom<InvitedUser[]>({
-  default: [],
-  key: 'invitationEmailsState',
-});
-
-export const invitationChannelSelectionState = atom<boolean>({
-  default: false,
-  key: 'invitationChannelSelectionState',
-});
-
-export const invitationChannelListState = atom<ChannelType[]>({
-  default: [],
-  key: 'invitationChannelListState',
-});
-
-export const invitationSentState = atom<boolean>({
-  default: false,
-  key: 'invitationSentState',
-});
diff --git a/tdrive/frontend/src/app/features/messages/api/message-api-client.ts b/tdrive/frontend/src/app/features/messages/api/message-api-client.ts
deleted file mode 100644
index d5a0007f..00000000
--- a/tdrive/frontend/src/app/features/messages/api/message-api-client.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import { TdriveService } from '../../global/framework/registry-decorator-service';
-import {
-  Message,
-  MessageExtended,
-  MessageFileType,
-  MessageSeenType,
-  MessageWithReplies,
-  NodeMessage,
-} from 'app/features/messages/types/message';
-import MessageViewAPIClient from './message-view-api-client';
-import MessageThreadAPIClient from './message-thread-api-client';
-import Api from 'app/features/global/framework/api-service';
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
-import Numbers from 'app/features/global/utils/Numbers';
-import { MetaDataType } from 'features/files/types/file';
-import Workspace from 'app/deprecated/workspaces/workspaces';
-import Logger from 'features/global/framework/logger-service';
-import { UserType } from 'features/users/types/user';
-import { AtomMessageKey } from '../state/atoms/messages';
-
-/**
- * This service is to get, update, create, list messages in a thread
- */
-
-export interface BaseSearchOptions {
-  company_id?: string;
-  workspace_id?: string;
-  channel_id?: string;
-  page_token?: string;
-  limit?: number;
-}
-
-export interface FileSearchOptions extends BaseSearchOptions {
-  sender?: string;
-  is_file?: boolean;
-  is_media?: boolean;
-  extension?: string;
-  workspace_id?: string;
-  channel_id?: string;
-  next_page_token?: string;
-}
-
-@TdriveService('MessageAPIClientService')
-class MessageAPIClient {
-  private readonly prefixUrl: string = '/internal/services/messages/v1';
-  private realtime: Map<string, WebsocketRoom[]> = new Map();
-  private readonly _viewService = MessageViewAPIClient;
-  private readonly threadService = MessageThreadAPIClient;
-  private logger = Logger.getLogger('MessageAPIClientService');
-
-  websockets(threadId: string): WebsocketRoom[] {
-    return this.realtime.get(threadId) || [];
-  }
-
-  async list(
-    companyId: string,
-    threadId: string,
-    {
-      limit = 25,
-      pageToken = '',
-      direction = 'future',
-    }: { limit?: number; pageToken?: string; direction?: 'future' | 'history' } = {},
-  ) {
-    const response = await Api.get<{ resources: NodeMessage[]; websockets: WebsocketRoom[] }>(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages?limit=${limit}&include_users=1&page_token=${pageToken}&direction=${direction}`,
-    );
-    this.realtime.set(threadId, response.websockets);
-    return (response.resources || []).sort((a, b) => Numbers.compareTimeuuid(a.id, b.id));
-  }
-
-  async get(companyId: string, threadId: string, messageId: string) {
-    const response = await Api.get<{ resource: MessageWithReplies }>(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages/${messageId}?include_users=1`,
-    );
-    return response.resource;
-  }
-
-  async reaction(companyId: string, threadId: string, messageId: string, reactions: string[] = []) {
-    const response = await Api.post<{ reactions: string[] }, { resource: NodeMessage }>(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages/${messageId}/reaction`,
-      { reactions },
-    );
-    return response.resource;
-  }
-
-  async bookmark(
-    companyId: string,
-    threadId: string,
-    messageId: string,
-    bookmarkId: string,
-    active = true,
-  ) {
-    const response = await Api.post<
-      { bookmark_id: string; active: boolean },
-      { resource: NodeMessage }
-    >(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages/${messageId}/bookmark`,
-      { bookmark_id: bookmarkId, active },
-    );
-    return response.resource;
-  }
-
-  async pin(companyId: string, threadId: string, messageId: string, pin = true) {
-    const response = await Api.post<{ pin: boolean }, { resource: NodeMessage }>(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages/${messageId}/pin`,
-      { pin },
-    );
-    return response.resource;
-  }
-
-  async delete(companyId: string, threadId: string, messageId: string) {
-    const response = await Api.post<unknown, { resource: NodeMessage }>(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages/${messageId}/delete`,
-      {},
-    );
-    return response.resource;
-  }
-
-  async save(
-    companyId: string,
-    threadId: string,
-    message: Partial<NodeMessage>,
-    {
-      movedFromThread = undefined,
-    }: {
-      movedFromThread?: string;
-    } = {},
-  ) {
-    const response = await Api.post<
-      { resource: Partial<NodeMessage>; options: { previous_thread?: string } },
-      { resource: NodeMessage }
-    >(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages${
-        message.id ? '/' + message.id : ''
-      }`,
-      { resource: message, options: { previous_thread: movedFromThread } },
-    );
-    return response.resource;
-  }
-
-  async download(messageFile: MessageFileType) {
-    if (messageFile.thread_id)
-      await Api.post(
-        `${this.prefixUrl}/companies/${messageFile.company_id}/threads/${messageFile.thread_id}/messages/${messageFile.message_id}/download/${messageFile.id}`,
-        {},
-      );
-  }
-
-  /**
-   * Delete a link preview from a message
-   *
-   * @param {String} companyId - The company id
-   * @param {String} threadId - The thread id
-   * @param {String} messageId - The message id
-   * @param {String} url - The url to delete from the previews
-   * @returns {Promise<void>}
-   */
-  async deleteLinkPreview(companyId: string, threadId: string, messageId: string, url: string) {
-    const response = await Api.post<{ url: string }, { resource: NodeMessage }>(
-      `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages/${messageId}/deletelink`,
-      { url },
-    );
-
-    return response.resource;
-  }
-
-  async search(searchString: string, options?: BaseSearchOptions) {
-    const companyId = options?.company_id ? options.company_id : Workspace.currentGroupId;
-    const query = `/internal/services/messages/v1/companies/${companyId}/search?q=${searchString}&include_users=1`;
-    const res = await Api.getWithParams<{ resources: MessageExtended[] }>(query, options);
-    this.logger.debug(
-      `Message search by text "${searchString}". Found`,
-      res.resources.length,
-      'messages',
-    );
-
-    return res;
-  }
-
-  async searchFile(searchString: string | null, options?: FileSearchOptions) {
-    try {
-      const companyId = options?.company_id ? options.company_id : Workspace.currentGroupId;
-      let query = `/internal/services/messages/v1/companies/${companyId}/files/search`;
-      if (searchString) {
-        query += `?q=${searchString}`;
-      }
-      const res = await Api.getWithParams<{
-        resources: (MessageFileType & {
-          company_id: string;
-          metadata: MetaDataType;
-          created_at: number;
-          message: Message;
-          user: UserType;
-        })[];
-        next_page_token: string;
-      }>(query, options);
-
-      return {
-        resources: res.resources,
-        next_page_token: res.next_page_token,
-      };
-    } catch (e) {
-      return { resources: [], next_page_token: null };
-    }
-  }
-
-  /**
-   * Mark messages as seen
-   *
-   * @param {String} companyId - The company id
-   * @param {String} channelId - The channel
-   * @param {String} workspaceId - the workspace
-   * @param {AtomMessageKey[]} messages - the messages to mark as seen
-   * @returns {Promise<boolean>} - true if the messages were marked as seen
-   */
-  async read(
-    companyId: string,
-    channelId: string,
-    workspaceId: string,
-    messages: AtomMessageKey[],
-  ): Promise<boolean> {
-    if (!messages || !messages.length) {
-      return true;
-    }
-
-    const body = {
-      messages: messages.map(message => ({
-        thread_id: message.threadId,
-        message_id: message.id || message.threadId,
-      })),
-      channel_id: channelId,
-    };
-
-    return await Api.post<MessageSeenType, boolean>(
-      `${this.prefixUrl}/companies/${companyId}/workspaces/${workspaceId}/threads/read`,
-      body,
-    );
-  }
-
-  /**
-   * List the users who've seen the message
-   *
-   * @param {String} messageId - the message id
-   * @param {String} companyId - the company id
-   * @param {String} workspaceId - the workspace id
-   * @returns {Promise<UserType[]>} - the users list
-   */
-  async seenBy(
-    messageId: string,
-    threadId: string,
-    companyId: string,
-    workspaceId: string,
-  ): Promise<UserType[]> {
-    const { resources } = await Api.get<{ resources: UserType[] }>(
-      `${this.prefixUrl}/companies/${companyId}/workspaces/${workspaceId}/threads/${threadId}/messages/${messageId}/seen`,
-    );
-
-    return resources;
-  }
-}
-
-export default new MessageAPIClient();
diff --git a/tdrive/frontend/src/app/features/messages/api/message-thread-api-client.ts b/tdrive/frontend/src/app/features/messages/api/message-thread-api-client.ts
deleted file mode 100644
index 254c7011..00000000
--- a/tdrive/frontend/src/app/features/messages/api/message-thread-api-client.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  NodeMessage,
-  Thread,
-  Participant,
-  MessageWithReplies,
-} from 'app/features/messages/types/message';
-import Api from 'app/features/global/framework/api-service';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-
-/**
- * This service is to create and update a thread
- */
-@TdriveService('MessageThreadAPIClient')
-class MessageThreadAPIClient {
-  private readonly prefixUrl: string = '/internal/services/messages/v1';
-
-  buildChannelParticipant(companyId: string, workspaceId: string, channelId: string) {
-    return {
-      type: 'channel',
-      company_id: companyId,
-      workspace_id: workspaceId,
-      id: channelId,
-    } as Participant;
-  }
-
-  async save(
-    companyId: string,
-    options: { message: NodeMessage; participants?: Participant[] },
-  ): Promise<MessageWithReplies> {
-    const response = await Api.post<
-      { resource: { participants: Participant[] }; options: { message: NodeMessage } },
-      { resource: Thread & { message: NodeMessage } }
-    >(`${this.prefixUrl}/companies/${companyId}/threads`, {
-      resource: { participants: options.participants || [] },
-      options: { message: options.message },
-    });
-    return {
-      ...response.resource.message,
-      last_replies: [],
-      stats: {
-        last_activity: response.resource.created_at,
-        replies: 0,
-      },
-    };
-  }
-
-  async participants(
-    companyId: string,
-    threadId: string,
-    participants: { add: Participant[]; remove: Participant[] },
-  ) {
-    const response = await Api.post<
-      { resource: unknown; options: { participants: { add: Participant[]; remove: Participant[] } } },
-      { resource: Thread }
-    >(`${this.prefixUrl}/companies/${companyId}/threads/${threadId}`, {
-      resource: {},
-      options: { participants: participants },
-    });
-    return response.resource;
-  }
-}
-
-export default new MessageThreadAPIClient();
diff --git a/tdrive/frontend/src/app/features/messages/api/message-view-api-client.ts b/tdrive/frontend/src/app/features/messages/api/message-view-api-client.ts
deleted file mode 100644
index 2a9ce4e1..00000000
--- a/tdrive/frontend/src/app/features/messages/api/message-view-api-client.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { MessageWithReplies } from 'app/features/messages/types/message';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-import Api from 'app/features/global/framework/api-service';
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
-import Numbers from 'app/features/global/utils/Numbers';
-
-/**
- * This service is to get messages using views.
- * A view can be:
- *  - channel feed view
- *  - channel pinned messages view
- *  - my active threads view
- *  - ...
- */
-@TdriveService('MessageViewAPIClientService')
-class MessageViewAPIClient {
-  private readonly prefixUrl: string = '/internal/services/messages/v1';
-  private realtime: Map<string, WebsocketRoom[]> = new Map();
-
-  feedWebsockets(channelId: string): WebsocketRoom[] {
-    return this.realtime.get('feed-' + channelId) || [];
-  }
-
-  async feed(
-    companyId: string,
-    workspaceId: string,
-    channelId: string,
-    { repliesPerThread = 5, limit = 25, pageToken = '', direction = 'future' } = {},
-  ) {
-    if (!companyId || !workspaceId || !channelId) {
-      return;
-    }
-
-    const response = await Api.get<{
-      resources: MessageWithReplies[];
-      websockets: WebsocketRoom[];
-    }>(
-      `${this.prefixUrl}/companies/${companyId}/workspaces/${workspaceId}/channels/${channelId}/feed?replies_per_thread=${repliesPerThread}&limit=${limit}&include_users=1&page_token=${pageToken}&direction=${direction}&websockets=1`,
-    );
-    this.realtime.set('feed-' + channelId, response.websockets);
-    return (response.resources || []).sort((a, b) =>
-      Numbers.compareTimeuuid(a.thread_id, b.thread_id),
-    );
-  }
-}
-
-export default new MessageViewAPIClient();
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-add-to-windowed-list.ts b/tdrive/frontend/src/app/features/messages/hooks/use-add-to-windowed-list.ts
deleted file mode 100644
index d5828379..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-add-to-windowed-list.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import Numbers from 'app/features/global/utils/Numbers';
-import _ from 'lodash';
-import { RecoilState, useRecoilCallback } from 'recoil';
-
-/**
- * This is the hook to work with feed window (from where to where we are looking the messages)
- * useful mostly in case of jumps
- */
-export type WindowType = {
-  loaded: boolean;
-  start: string;
-  end: string;
-  reachedStart: boolean;
-  reachedEnd: boolean;
-};
-const windows: Map<string, WindowType> = new Map();
-(window as any).windows = windows;
-export const getListWindow = (key: string) => {
-  if (!windows.has(key))
-    windows.set(key, { loaded: false, start: '', end: '', reachedEnd: false, reachedStart: false });
-  let window = windows.get(key) as WindowType;
-
-  const updateWindowFromIds = (ids: string[]) => {
-    let window = windows.get(key) as WindowType;
-    const min = ids.reduce((a, b) => Numbers.minTimeuuid(a, b), ids[0]);
-    const max = ids.reduce((a, b) => Numbers.maxTimeuuid(a, b), ids[0]);
-    if (max !== window.end || min !== window.start) {
-      windows.set(key, {
-        ...window,
-        start: min,
-        end: max,
-      });
-    }
-    window = windows.get(key) as WindowType;
-    return window;
-  };
-
-  const reachEdge = (status: { reachedStart?: boolean; reachedEnd?: boolean }) => {
-    status = _.pick(status, 'reachedEnd', 'reachedStart');
-    windows.set(key, {
-      ...window,
-      ...status,
-    });
-    window = windows.get(key) as WindowType;
-    return window;
-  };
-
-  const isInWindow = (id: string) => {
-    const window = windows.get(key) as WindowType;
-    return (
-      (Numbers.compareTimeuuid(id, window.start) >= 0 || !window.start) &&
-      (Numbers.compareTimeuuid(id, window.end) <= 0 || !window.end)
-    );
-  };
-
-  const setLoaded = (loaded = true) => {
-    const window = windows.get(key) as WindowType;
-    windows.set(key, {
-      ...window,
-      loaded,
-    });
-  };
-
-  return {
-    window,
-    updateWindowFromIds,
-    reachEdge,
-    isInWindow,
-    setLoaded,
-    setWindow: (window: WindowType) => windows.set(key, window),
-    getWindow: () => windows.get(key) as WindowType,
-  };
-};
-
-export type AddToWindowOptions = {
-  atBottom?: boolean; //Messages are new and should be added at the end of the full list
-  reachedEnd?: boolean; //We know that we reached the end while adding this messages
-  reachedStart?: boolean; //We know that we reached the start while adding this messages
-  inWindow?: boolean; //We know that this new messages are in or glued to the current window
-};
-
-export type AddToWindowedListOptions<T> = {
-  windowKey: string; //The key of the window managing this list
-  atom: RecoilState<T[]>; //The atom containing the list
-  getId?: (item: T) => string; //A method to get the id
-} & AddToWindowOptions;
-
-export type RemoveFromWindowedListOptions<T> = {
-  atom: RecoilState<T[]>; //The atom containing the list
-  getId?: (item: T) => string; //A method to get the id
-};
-
-export const useAddToWindowedList = (companyId: string) => {
-  return useRecoilCallback(
-    ({ set, snapshot }) =>
-      async <T>(items: T[], options: AddToWindowedListOptions<T>) => {
-        const getId = options.getId || ((m: any) => m?.id);
-
-        //Update the current window
-        const {
-          window: _window,
-          updateWindowFromIds,
-          reachEdge,
-        } = getListWindow(options.windowKey);
-        let window = _window;
-        if (options.reachedEnd || (options.atBottom && !window.end))
-          options = { ...options, reachedEnd: true };
-        if (options.reachedEnd || options.reachedStart) window = reachEdge(options);
-        if (((options.atBottom && window.reachedEnd) || options.inWindow) && items?.length > 0)
-          updateWindowFromIds([window.start, window.end, ...items.map(m => getId(m))]);
-
-        if (items?.length === 0) return;
-
-        const atom = options.atom;
-        const newList = _.uniqBy(
-          [...(snapshot.getLoadable(atom).valueMaybe() || []), ...(items || [])],
-          m => getId(m),
-        );
-
-        set(atom, newList);
-      },
-    [companyId],
-  );
-};
-
-export const useRemoveFromWindowedList = (companyId: string) => {
-  return useRecoilCallback(
-    ({ set, snapshot }) =>
-      async <T>(items: T[], options: RemoveFromWindowedListOptions<T>) => {
-        if (items.length === 0) return;
-
-        const getId = options.getId || ((m: any) => m?.id);
-
-        const toRemove = items.map(m => getId(m));
-
-        const atom = options.atom;
-
-        const newList = (snapshot.getLoadable(atom).valueMaybe() || []).filter(
-          m => !toRemove.includes(getId(m)),
-        );
-
-        set(atom, newList);
-      },
-    [companyId],
-  );
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-channel-messages.ts b/tdrive/frontend/src/app/features/messages/hooks/use-channel-messages.ts
deleted file mode 100644
index 8c60886b..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-channel-messages.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import { MessageWithReplies, NodeMessage } from 'app/features/messages/types/message';
-import MessageViewAPIClient from 'app/features/messages/api/message-view-api-client';
-import LoginService from 'app/features/auth/login-service';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import _ from 'lodash';
-import { useRecoilState } from 'recoil';
-import { AtomChannelKey, AtomMessageKey, ChannelMessagesState } from '../state/atoms/messages';
-import { useSetMessage } from './use-message';
-import { useAddMessageToThread } from './use-thread-messages';
-import {
-  AddToWindowOptions,
-  getListWindow,
-  useAddToWindowedList,
-  useRemoveFromWindowedList,
-} from './use-add-to-windowed-list';
-import AwaitLock from 'await-lock';
-import { cleanFrontMessagesFromListOfMessages } from './use-message-editor';
-
-const lock = new AwaitLock();
-
-export const useChannelMessages = (key: AtomChannelKey) => {
-  const { window, isInWindow, setWindow, getWindow, setLoaded, updateWindowFromIds } =
-    getListWindow(key.channelId);
-  const [_messages, setMessages] = useRecoilState(ChannelMessagesState(key));
-  let messages = _messages;
-  const addToChannel = useAddMessageToChannel(key);
-  if (messages.length > 0 && !window.loaded) setLoaded(true);
-
-  const setMessage = useSetMessage(key.companyId);
-  const addToThread = useAddMessageToThread(key.companyId);
-
-  const addMore = async (
-    direction: 'future' | 'history' | 'replace' = 'future',
-    newMessages: MessageWithReplies[],
-    options?: { reachedEnd?: boolean },
-  ) => {
-    newMessages?.forEach(m => {
-      setMessage(m);
-      m.last_replies.forEach(m2 => {
-        setMessage(m2);
-      });
-    });
-
-    newMessages?.forEach(m => {
-      addToThread([m, ...m.last_replies], {
-        threadId: m.thread_id,
-        atBottom: true,
-        reachedStart: m.last_replies.length >= m.stats.replies,
-      });
-    });
-
-    let newMessagesKeys = convertToKeys(key.companyId, newMessages);
-
-    let newList = messages;
-    if (direction === 'future') {
-      newMessagesKeys = _.differenceBy(newMessagesKeys, messages, 'id');
-      newList = [...messages, ...newMessagesKeys];
-    }
-    if (direction === 'history') {
-      newMessagesKeys = _.differenceBy(newMessagesKeys, messages, 'id');
-      newList = [...newMessagesKeys, ...messages];
-    }
-    if (direction === 'replace') {
-      newList = newMessagesKeys;
-    }
-
-    setWindow({
-      ...updateWindowFromIds(newList.map(message => message.threadId)),
-      loaded: true,
-      reachedEnd:
-        window.reachedEnd ||
-        options?.reachedEnd ||
-        (newMessages.length <= 1 && direction === 'future'),
-      reachedStart: window.reachedStart || (newMessages.length <= 1 && direction === 'history'),
-    });
-
-    setMessages(_.uniqBy(newList, 'threadId'));
-  };
-
-  const loadMore = async (
-    direction: 'future' | 'history' = 'future',
-    limit?: number,
-    offset?: string,
-    options?: { ignoreStateUpdate?: boolean; keepOffsetMessage?: boolean },
-  ): Promise<MessageWithReplies[]> => {
-    await lock.acquireAsync();
-    try {
-      const window = getWindow();
-
-      if (window.reachedStart && direction === 'history' && !options?.ignoreStateUpdate) {
-        lock.release();
-        return [];
-      }
-
-      if (offset && !isInWindow(offset) && !options?.ignoreStateUpdate) {
-        lock.release();
-        return [];
-      }
-
-      offset = offset !== undefined ? offset : direction === 'future' ? window.end : window.start;
-      let messages =
-        (await MessageViewAPIClient.feed(key.companyId, key.workspaceId, key.channelId, {
-          direction,
-          limit,
-          pageToken: offset,
-        })) || [];
-
-      if (window.end !== getWindow().end || window.start !== getWindow().start) {
-        lock.release();
-      }
-
-      if (!options?.keepOffsetMessage)
-        messages = messages.filter(message => message.thread_id !== offset);
-      if (!options?.ignoreStateUpdate)
-        addMore(
-          direction,
-          messages,
-          direction === 'history' && !offset ? { reachedEnd: true } : {},
-        );
-
-      lock.release();
-      return messages;
-    } catch (err) {
-      console.error(err);
-      lock.release();
-      return [];
-    }
-  };
-
-  const jumpTo = async (threadId: string) => {
-    await lock.acquireAsync();
-    setWindow({
-      start: threadId,
-      end: threadId,
-      reachedStart: false,
-      reachedEnd: false,
-      loaded: false,
-    });
-    setLoaded(false);
-    lock.release();
-    let newMessages: MessageWithReplies[] = [];
-    if (threadId) {
-      newMessages = await loadMore('future', 20, threadId, {
-        ignoreStateUpdate: true,
-        keepOffsetMessage: true,
-      });
-    }
-    newMessages = [
-      ...(await loadMore('history', 20, threadId, {
-        ignoreStateUpdate: true,
-        keepOffsetMessage: true,
-      })),
-      ...newMessages,
-    ];
-    addMore('replace', newMessages);
-    setLoaded(false);
-    setLoaded(true);
-  };
-
-  useRealtimeRoom<MessageWithReplies>(
-    MessageViewAPIClient.feedWebsockets(key.channelId)[0],
-    'useChannelMessages',
-    // eslint-disable-next-line
-    async (action: string, event: any) => {
-      if (action === 'created' || action === 'updated') {
-        const message = event as NodeMessage;
-        if (message.ephemeral) return;
-
-        //This will make sure the realtime event doesn't arrive before the server response
-        if (event?.user_id === LoginService.currentUserId && action === 'created')
-          await new Promise(r => setTimeout(r, 1000));
-
-        setMessage(message);
-        if (message.thread_id === message.id) {
-          addToChannel([message], {
-            atBottom: true,
-          });
-        } else {
-          addToThread([message], {
-            threadId: message.thread_id,
-            atBottom: true,
-          });
-        }
-      }
-    },
-  );
-
-  messages = cleanFrontMessagesFromListOfMessages(messages);
-
-  return {
-    messages,
-    window,
-    loadMore,
-    jumpTo,
-    convertToKeys,
-  };
-};
-
-const convertToKeys = (companyId: string, msgs: MessageWithReplies[] | NodeMessage[]) => {
-  return msgs.map(m => {
-    const lastReplies = (m as MessageWithReplies).last_replies || [];
-    return {
-      id: m.id,
-      threadId: m.thread_id,
-      companyId: companyId,
-      sortId: lastReplies[lastReplies.length - 1]?.id || m.thread_id,
-    };
-  });
-};
-
-export const useAddMessageToChannel = (key: AtomChannelKey) => {
-  const updater = useAddToWindowedList(key.companyId);
-  return (messages: NodeMessage[], options?: AddToWindowOptions) => {
-    const windowKey = key.channelId;
-    const atom = ChannelMessagesState(key);
-    updater<AtomMessageKey>(convertToKeys(key.companyId, messages), {
-      ...options,
-      windowKey,
-      atom,
-      getId: m => m.threadId || '',
-    });
-  };
-};
-
-export const useRemoveMessageFromChannel = (key: AtomChannelKey) => {
-  const remover = useRemoveFromWindowedList(key.companyId);
-  return (messages: NodeMessage[]) => {
-    const atom = ChannelMessagesState(key);
-    remover<AtomMessageKey>(convertToKeys(key.companyId, messages), {
-      atom,
-      getId: m => m.threadId || '',
-    });
-  };
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-ephemeral-messages.ts b/tdrive/frontend/src/app/features/messages/hooks/use-ephemeral-messages.ts
deleted file mode 100644
index 4b94d93c..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-ephemeral-messages.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { MessageWithReplies, NodeMessage } from 'app/features/messages/types/message';
-import MessageViewAPIClient from 'app/features/messages/api/message-view-api-client';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import CurrentUser from 'app/deprecated/user/CurrentUser';
-import { atomFamily, useRecoilCallback, useRecoilState } from 'recoil';
-import { useSetMessage } from './use-message';
-import { v4 as uuidv4 } from 'uuid';
-const EphemeralMessageState = atomFamily<NodeMessage | null, string>({
-  key: 'EphemeralMessageState',
-  default: () => null,
-});
-
-export const useEphemeralMessages = (key: { companyId: string; channelId: string }) => {
-  const [lastEphemeral, setLastEphemeral] = useRecoilState(EphemeralMessageState(key.channelId));
-  const getLastEphemeral = useRecoilCallback(
-    ({ snapshot }) =>
-      (key: { companyId: string; channelId: string }) => {
-        return snapshot.getLoadable(EphemeralMessageState(key.channelId)).valueMaybe();
-      },
-  );
-  const setMessage = useSetMessage(key.companyId);
-
-  useRealtimeRoom<MessageWithReplies>(
-    MessageViewAPIClient.feedWebsockets(key.channelId)[0],
-    'useEphemeralMessages',
-    async (action: string, event: NodeMessage) => {
-      if (action === 'created' || action === 'updated') {
-        const message = event as NodeMessage;
-        const lastEphemeral = getLastEphemeral(key);
-        if (message.ephemeral) {
-          message.id = uuidv4();
-          message.thread_id = message.thread_id || message.id || uuidv4();
-          if (
-            message.subtype === 'deleted' &&
-            (message.id === lastEphemeral?.id ||
-              (message.ephemeral.id && message.ephemeral.id === lastEphemeral?.ephemeral?.id) ||
-              message.ephemeral.recipient === CurrentUser.get().id)
-          ) {
-            setLastEphemeral(null);
-          } else if (
-            message.ephemeral.recipient === CurrentUser.get().id &&
-            (!message.ephemeral.recipient_context_id ||
-              message.ephemeral.recipient_context_id === CurrentUser.unique_connection_id)
-          ) {
-            setMessage(message);
-            setLastEphemeral(message);
-          }
-          return;
-        }
-      }
-    },
-  );
-
-  return {
-    lastEphemeral,
-    remove: () => setLastEphemeral(null),
-  };
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-highlight-message.ts b/tdrive/frontend/src/app/features/messages/hooks/use-highlight-message.ts
deleted file mode 100644
index 3938d2c3..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-highlight-message.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import useRouteState from 'app/features/router/hooks/use-route-state';
-import { useRecoilState } from 'recoil';
-import { HighlightMessageState } from '../state/atoms/message-highlight';
-
-export const useHighlightMessage = () => {
-  const [highlight, setHighlight] = useRecoilState(HighlightMessageState);
-  const { threadId, messageId } = useRouteState();
-
-  const cancelHighlight = () => {
-    if (highlight?.reachedThread && (!highlight.answerId || highlight.reachedAnswer)) {
-      setHighlight(null);
-    }
-  };
-
-  const reachedHighlight = (type: 'thread' | 'answer' = 'thread') => {
-    if (highlight) {
-      setHighlight({
-        ...highlight,
-        ...(type === 'thread' ? { reachedThread: true } : {}),
-        ...(type === 'answer' ? { reachedAnswer: true } : {}),
-      });
-    }
-  };
-
-  const updateHighlight = (highlight: { answerId: string | null; threadId: string }) => {
-    if (highlight.answerId === highlight.threadId) highlight.answerId = null;
-    setHighlight({ ...highlight, reachedThread: false, reachedAnswer: false });
-  };
-
-  useGlobalEffect(
-    'useHighlightMessage',
-    () => {
-      if (threadId) updateHighlight({ answerId: messageId || null, threadId });
-    },
-    [threadId, messageId],
-  );
-
-  return {
-    highlight,
-    updateHighlight,
-    cancelHighlight,
-    reachedHighlight,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-message-editor.ts b/tdrive/frontend/src/app/features/messages/hooks/use-message-editor.ts
deleted file mode 100644
index 662a62f7..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-message-editor.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { MessageWithReplies, NodeMessage, QuotedMessageType } from 'app/features/messages/types/message';
-import MessageAPIClient from 'app/features/messages/api/message-api-client';
-import {} from 'app/features/global/hooks/use-realtime';
-import _ from 'lodash';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import {
-  MessagesEditorState,
-  VisibleMessagesEditorLocationActiveSelector,
-  VisibleMessagesEditorLocationState,
-} from '../state/atoms/messages-editor';
-import { getMessage, useMessage, useSetMessage } from './use-message';
-import { v1 as uuidv1 } from 'uuid';
-import MessageThreadAPIClient from 'app/features/messages/api/message-thread-api-client';
-import Login from 'app/features/auth/login-service';
-import { messageToMessageWithReplies } from '../utils/message-with-replies';
-import { useAddMessageToChannel, useRemoveMessageFromChannel } from './use-channel-messages';
-import { useAddMessageToThread, useRemoveMessageFromThread } from './use-thread-messages';
-import { useRef } from 'react';
-import { AtomMessageKey } from '../state/atoms/messages';
-import { MessagesAndComponentsType } from 'app/features/messages/hooks/with-non-messages-components';
-import { useMessageQuoteReply } from './use-message-quote-reply';
-
-export type EditorKey = {
-  companyId: string;
-  workspaceId?: string;
-  channelId?: string;
-  threadId?: string;
-  messageId?: string;
-};
-
-export const useMessageEditor = (key: EditorKey) => {
-  const location = key.messageId
-    ? `edit-${key.messageId}`
-    : key.threadId
-    ? `reply-${key.threadId}`
-    : `new-${key.channelId}`;
-  const [editor, setEditor] = useRecoilState(MessagesEditorState(location));
-  const editorRef = useRef(editor);
-  const { isActive: isQuoted, message: quotedMessageId, close: closeQuoteReply } = useMessageQuoteReply(key.channelId || '');
-  let quotedMessage: MessageWithReplies | null = null;
-
-  quotedMessage = useMessage({
-    companyId: key.companyId,
-    threadId: quotedMessageId,
-    id: quotedMessageId
-  }).message;
-
-  const propagateMessage = useAddMessageFromEditor(key);
-
-  const send = async (message?: Partial<NodeMessage>) => {
-    if (!message) {
-      message = {
-        text: editorRef.current.value,
-        files: editorRef.current.files,
-      };
-    }
-
-    setEditorRef({ value: '', files: [] });
-
-    const editedMessage = {
-      thread_id: key.threadId || uuidv1(),
-      created_at: new Date().getTime(),
-      user_id: Login.currentUserId,
-      context: {
-        _front_id: uuidv1(),
-      },
-      ...message,
-    } as NodeMessage;
-
-    if (isQuoted && quotedMessage) {
-      editedMessage.quote_message = quotedMessage as unknown as QuotedMessageType;
-      closeQuoteReply();
-    }
-
-    const tempMessage: NodeMessage = {
-      ...editedMessage,
-      _status: 'sending',
-      id: key.threadId ? uuidv1() : editedMessage.thread_id,
-      status: 'sending'
-    };
-    propagateMessage(tempMessage as NodeMessage);
-
-    try {
-      let newMessage = null;
-      if (key.threadId || key.messageId) {
-        newMessage = await MessageAPIClient.save(key.companyId, key.threadId || '', editedMessage);
-      } else {
-        newMessage = await MessageThreadAPIClient.save(key.companyId, {
-          message: editedMessage,
-          participants: [
-            {
-              type: 'channel',
-              id: key.channelId || '',
-              company_id: key.companyId,
-              workspace_id: key.workspaceId || '',
-            },
-          ],
-        });
-      }
-      if (!newMessage) {
-        throw new Error('Not sent');
-      }
-      
-      propagateMessage({ ...tempMessage, _status: 'sent', status: 'sent' });
-      propagateMessage({ ...newMessage, _status: 'sent' });
-    } catch (err) {
-      propagateMessage({ ...tempMessage, _status: 'failed', status: 'error' });
-    }
-  };
-
-  const retry = async (message: MessageWithReplies) => {
-    propagateMessage({ ...message, _status: 'cancelled' });
-    //Fixme, to do the update we use the recoil snapshot that is not updated between two changes
-    window.requestAnimationFrame(() => send({ ...message, id: undefined, _status: undefined }));
-  };
-
-  const cancel = (message: MessageWithReplies) => {
-    propagateMessage({ ...message, _status: 'cancelled' });
-  };
-
-  const setEditorRef = (editor: { value: string; files: any[] }) => {
-    editorRef.current = editor;
-    setEditor(editorRef.current);
-  };
-
-  return {
-    editor,
-    key: location,
-    send,
-    retry,
-    cancel,
-    setEditor: setEditorRef,
-    setValue: (value: string) => setEditorRef({ ...editor, value }),
-    setFiles: (files: any[]) => setEditorRef({ ...editor, files }),
-  };
-};
-
-/**
- * Remove sent messages from the list
- * as we have a duplication between frontend message and server message
- */
-export const cleanFrontMessagesFromListOfMessages = (
-  messages: (AtomMessageKey | MessagesAndComponentsType)[],
-) => {
-  messages = messages.filter(i => {
-    if (getMessage(i.id || '') && getMessage(i.id || '')?._status !== 'sent') return true;
-
-    if (getMessage(i.id || '')?._status !== undefined) {
-      //This message was created in frontend
-      //If this message was retrieved from the backend, then we should not keep the frontend one
-      return !messages.find(
-        j =>
-          getMessage(j.id || '')?.context?._front_id ===
-            getMessage(i.id || '')?.context?._front_id && j.id !== i.id,
-      );
-    }
-  });
-  messages = _.uniqBy(
-    messages,
-    a =>
-      (a as MessagesAndComponentsType)?.type +
-      (getMessage(a.id || '')?.context?._front_id || a?.id),
-  );
-  return messages;
-};
-
-export const useVisibleMessagesEditorLocation = (location: string, subLocation = '') => {
-  const set = useSetRecoilState(VisibleMessagesEditorLocationState);
-  const active = useRecoilValue(
-    VisibleMessagesEditorLocationActiveSelector({ location, subLocation }),
-  );
-  return {
-    active,
-    set,
-    close: () => {
-      set({ location: '', subLocation: '' });
-    },
-  };
-};
-
-export const useAddMessageFromEditor = (key: {
-  companyId: string;
-  workspaceId?: string;
-  channelId?: string;
-}) => {
-  const addToThread = useAddMessageToThread(key.companyId);
-  const removeFromThread = useRemoveMessageFromThread(key.companyId);
-  const channelKey = {
-    companyId: key.companyId,
-    workspaceId: key.workspaceId || '',
-    channelId: key.channelId || '',
-  };
-  const addToChannel = useAddMessageToChannel(channelKey);
-  const removeFromChannel = useRemoveMessageFromChannel(channelKey);
-  const setMessage = useSetMessage(key.companyId);
-
-  return (message: NodeMessage) => {
-    const isThread = message.thread_id === message.id;
-
-    setMessage(messageToMessageWithReplies(message));
-    if (message._status === 'sent' || message._status === 'cancelled') {
-      if (!isThread) removeFromThread([message], { threadId: message.thread_id });
-      if (isThread) removeFromChannel([message]);
-    } else {
-      if (!isThread) addToThread([message], { atBottom: true, threadId: message.thread_id });
-      if (isThread) addToChannel([message], { atBottom: true });
-    }
-  };
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-message-quote-reply.ts b/tdrive/frontend/src/app/features/messages/hooks/use-message-quote-reply.ts
deleted file mode 100644
index 953a2513..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-message-quote-reply.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { MessageQuoteReplyEditorActiveSelector, MessageQuoteReplyEditorState } from '../state/atoms/message-quote-reply'
-
-type MessageQuoteReplyType = {
-  message: string;
-  isActive: boolean;
-  set: (payload: MessageQuoteReplyEditorState) => void;
-  close: () => void;
-}
-
-/**
- * Manage the state of the message quote reply editor
- * 
- * @param {String} channel - The channel id to quote from
- */
-export const useMessageQuoteReply = (channel = ''): MessageQuoteReplyType => {
-  const set = useSetRecoilState(MessageQuoteReplyEditorState);
-  const isActive = useRecoilValue(MessageQuoteReplyEditorActiveSelector({ channel }));
-  const { message: messageId } = useRecoilValue(MessageQuoteReplyEditorState);
-
-  return {
-    isActive,
-    set,
-    close: () => set({ message: '', channel: '' }),
-    message: messageId
-  }
-}
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-message-seen-by.ts b/tdrive/frontend/src/app/features/messages/hooks/use-message-seen-by.ts
deleted file mode 100644
index 060710d3..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-message-seen-by.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useRecoilState } from 'recoil';
-import {
-  messageSeenByListState,
-  messageSeenByState,
-  MessageTarget,
-} from '../state/atoms/message-seen-by';
-
-type MessageSeenByType = {
-  openSeenBy: (target: MessageTarget) => void;
-  isOpen: boolean;
-  closeSeenBy: () => void;
-  seenMessage: MessageTarget | null;
-};
-
-export const useMessageSeenBy = (): MessageSeenByType => {
-  const [isOpen, setOpen] = useRecoilState(messageSeenByListState);
-  const [seenMessage, setTarget] = useRecoilState(messageSeenByState);
-
-  const openSeenBy = ({ message_id, thread_id, company_id, workspace_id }: MessageTarget): void => {
-    setTarget({
-      message_id,
-      company_id,
-      thread_id,
-      workspace_id,
-    });
-    setOpen(true);
-  };
-  return {
-    openSeenBy,
-    seenMessage,
-    isOpen,
-    closeSeenBy: () => setOpen(false),
-  };
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-message.ts b/tdrive/frontend/src/app/features/messages/hooks/use-message.ts
deleted file mode 100644
index b051a4a7..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-message.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-import MessageAPIClient from 'app/features/messages/api/message-api-client';
-import _ from 'lodash';
-import User from 'app/features/users/services/current-user-service';
-import { useRecoilCallback, useRecoilState } from 'recoil';
-import { AtomMessageKey, MessageState } from '../state/atoms/messages';
-import { NodeMessage, NodeMessageSubType, ReactionType } from 'app/features/messages/types/message';
-import { messageToMessageWithReplies } from '../utils/message-with-replies';
-import { useSetUserList } from 'app/features/users/hooks/use-user-list';
-
-export const useMessage = (partialKey: AtomMessageKey) => {
-  const key = {
-    ..._.pick(partialKey, 'threadId', 'companyId'),
-    id: partialKey.id || partialKey.threadId,
-  };
-  const setValue = useSetMessage(key.companyId);
-  const [message] = useRecoilState(MessageState(key));
-
-  const get = async () => {
-    const message = await MessageAPIClient.get(
-      partialKey.companyId,
-      partialKey.threadId,
-      partialKey.id || '',
-    );
-    if (message) {
-      setValue(message);
-    }
-  };
-
-  const save = async (message: NodeMessage) => {
-    const updated = await MessageAPIClient.save(partialKey.companyId, partialKey.threadId, message);
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  const move = async (targetThread: string) => {
-    const updated = await MessageAPIClient.save(
-      partialKey.companyId,
-      partialKey.threadId,
-      { ...message, thread_id: targetThread },
-      { movedFromThread: message.thread_id },
-    );
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  const remove = async () => {
-    if (message?.ephemeral?.id) {
-      return;
-    }
-
-    //Three lines to make it instant on frontend
-    const quickUpdated = _.cloneDeep(message);
-    quickUpdated.subtype = NodeMessageSubType.DELETED;
-    setValue(quickUpdated);
-
-    const updated = await MessageAPIClient.delete(
-      partialKey.companyId,
-      partialKey.threadId,
-      partialKey.id || '',
-    );
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  const bookmark = async (bookmarkId: string, status = true) => {
-    const updated = await MessageAPIClient.bookmark(
-      partialKey.companyId,
-      partialKey.threadId,
-      partialKey.id || '',
-      bookmarkId,
-      status,
-    );
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  const pin = async (status = true) => {
-    //Three lines to make it instant on frontend
-    const quickUpdated = _.cloneDeep(message);
-    quickUpdated.pinned_info = {
-      pinned_at: new Date().getTime(),
-      pinned_by: User.getCurrentUserId(),
-    };
-    setValue(quickUpdated);
-
-    const updated = await MessageAPIClient.pin(
-      partialKey.companyId,
-      partialKey.threadId,
-      partialKey.id || '',
-      status,
-    );
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  const react = async (
-    emojis: string[],
-    mode: 'add' | 'toggle' | 'remove' | 'replace' = 'toggle',
-  ) => {
-    let userReactions = (message.reactions || [])
-      ?.filter(r => r.users.includes(User.getCurrentUserId()))
-      .map(e => e.name);
-
-    if (mode === 'replace') {
-      userReactions = emojis;
-    } else {
-      emojis.forEach(emoji => {
-        if (mode === 'add') {
-          userReactions = [...userReactions, emoji];
-        } else if (mode === 'remove') {
-          userReactions = userReactions.filter(e => emoji !== e);
-        } else if (mode === 'toggle') {
-          const existing = userReactions.filter(e => emoji === e);
-          userReactions = [
-            ...userReactions.filter(e => !emojis.includes(e)),
-            ...emojis.filter(e => !existing.includes(e)),
-          ];
-        }
-      });
-    }
-
-    //Three lines to make it instant on frontend
-    const quickUpdated = _.cloneDeep(message);
-    quickUpdated.reactions = recomputeReactions(
-      _.cloneDeep(message.reactions) || [],
-      userReactions,
-    );
-    setValue(quickUpdated);
-
-    const updated = await MessageAPIClient.reaction(
-      partialKey.companyId,
-      partialKey.threadId,
-      partialKey.id || '',
-      _.uniq(userReactions),
-    );
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  /**
-   * Delete a preview for given url
-   * 
-   * @param {String} url - the url corresponding to the preview to delete
-   * @returns {Promise<void>}
-   */
-  const deleteLinkPreview = async (url: string): Promise<void> => {
-    const updated = await MessageAPIClient.deleteLinkPreview(
-      partialKey.companyId,
-      partialKey.threadId,
-      partialKey.id || '',
-      url,
-    );
-
-    if (updated) setValue(messageToMessageWithReplies(updated));
-  };
-
-  return { message, get, react, pin, remove, bookmark, save, move, deleteLinkPreview };
-};
-
-//Function to recompute reactions after a frontend operation
-const recomputeReactions = (reactions: ReactionType[], selected: string[]) => {
-  const existingNames = reactions.map(e => e.name);
-  const existingUserReactions = (reactions || [])
-    ?.filter(r => r.users.includes(User.getCurrentUserId()))
-    .map(e => e.name);
-
-  selected.forEach(emoji => {
-    if (!existingUserReactions.includes(emoji)) {
-      if (!existingNames.includes(emoji)) {
-        reactions.push({ name: emoji, count: 1, users: [User.getCurrentUserId()] });
-      } else {
-        reactions = reactions.map(r => {
-          if (r.name === emoji) {
-            r.count++;
-            r.users.push(User.getCurrentUserId());
-          }
-          return r;
-        });
-      }
-    }
-  });
-
-  existingUserReactions.forEach(emoji => {
-    if (!selected.includes(emoji)) {
-      reactions = reactions
-        .map(r => {
-          if (r.name === emoji) {
-            r.count--;
-            r.users = r.users.filter(u => u !== User.getCurrentUserId());
-          }
-          return r;
-        })
-        .filter(r => r.count > 0);
-    }
-  });
-
-  return reactions;
-};
-
-const messagesStore: { [key: string]: NodeMessage } = {};
-
-export const getMessage = (id: string) => {
-  return messagesStore[id];
-};
-
-export const useSetMessage = (companyId: string) => {
-  const { set: setUserList } = useSetUserList('useSetMessage');
-
-  return useRecoilCallback(
-    ({ set }) =>
-      async (message: NodeMessage) => {
-        const storedMessage = messagesStore[message.id];
-
-        if (storedMessage && storedMessage?.status) {
-          if (
-            (storedMessage.status == 'delivered' && message.status === 'sent') ||
-            (storedMessage.status === 'read' &&
-              (message.status === 'delivered' || message.status === 'sent'))
-          ) {
-            return;
-          }
-        }
-
-        messagesStore[message.id] = message;
-
-        set(
-          MessageState({ threadId: message.thread_id, id: message.id, companyId: companyId }),
-          messageToMessageWithReplies(message),
-        );
-
-        if (message.users) setUserList(message.users);
-      },
-    [companyId],
-  );
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/use-thread-messages.ts b/tdrive/frontend/src/app/features/messages/hooks/use-thread-messages.ts
deleted file mode 100644
index e562915b..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/use-thread-messages.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { NodeMessage } from 'app/features/messages/types/message';
-import MessageAPIClient from 'app/features/messages/api/message-api-client';
-import Numbers from 'app/features/global/utils/Numbers';
-import _ from 'lodash';
-import { useRecoilState } from 'recoil';
-import { AtomMessageKey, AtomThreadKey, ThreadMessagesState } from '../state/atoms/messages';
-import { useSetMessage } from './use-message';
-import {
-  AddToWindowOptions,
-  getListWindow,
-  useAddToWindowedList,
-  useRemoveFromWindowedList,
-} from './use-add-to-windowed-list';
-import AwaitLock from 'await-lock';
-import { cleanFrontMessagesFromListOfMessages } from './use-message-editor';
-
-const lock = new AwaitLock();
-
-export const useThreadMessages = (key: AtomThreadKey) => {
-  const { window, getWindow, isInWindow, setLoaded, setWindow, updateWindowFromIds } =
-    getListWindow(key.threadId);
-  const [_messages, setMessages] = useRecoilState(ThreadMessagesState(key));
-  let messages = _messages;
-
-  if (messages.length > 0 && !window.loaded) setLoaded(true);
-
-  messages = messages.filter(message => isInWindow(message.id || ''));
-  messages = messages.sort((a, b) => Numbers.compareTimeuuid(a.sortId, b.sortId));
-
-  const setMessage = useSetMessage(key.companyId);
-
-  const addMore = async (
-    direction: 'future' | 'history' | 'replace' = 'future',
-    newMessages: NodeMessage[],
-    options?: { reachedEnd?: boolean },
-  ) => {
-    newMessages?.forEach(m => {
-      setMessage(m);
-    });
-
-    let newMessagesKeys = convertToKeys(key.companyId, newMessages);
-
-    let newList = messages;
-    if (direction === 'future') {
-      newMessagesKeys = _.differenceBy(newMessagesKeys, messages, 'id');
-      newList = [...messages, ...newMessagesKeys];
-    }
-    if (direction === 'history') {
-      newMessagesKeys = _.differenceBy(newMessagesKeys, messages, 'id');
-      newList = [...newMessagesKeys, ...messages];
-    }
-    if (direction === 'replace') {
-      newList = newMessagesKeys;
-    }
-
-    setWindow({
-      ...updateWindowFromIds(newList.map(message => message.id || message.threadId)),
-      loaded: true,
-      reachedEnd:
-        window.reachedEnd ||
-        options?.reachedEnd ||
-        (newMessages.length <= 1 && direction === 'future'),
-      reachedStart: window.reachedStart || (newMessages.length <= 1 && direction === 'history'),
-    });
-
-    setMessages(_.uniqBy(newList, 'id'));
-  };
-
-  const loadMore = async (
-    direction: 'future' | 'history' = 'future',
-    limit?: number,
-    offset?: string,
-    options?: { ignoreStateUpdate?: boolean; keepOffsetMessage?: boolean },
-  ) => {
-    await lock.acquireAsync();
-    try {
-      const window = getWindow();
-
-      if (window.reachedStart && direction === 'history' && !(offset && offset !== window.start)) {
-        lock.release();
-        return [];
-      }
-
-      if (offset && !isInWindow(offset)) {
-        lock.release();
-        return [];
-      }
-
-      limit = limit || 20;
-      offset = offset !== undefined ? offset : direction === 'future' ? window.end : window.start;
-      let newMessages = await MessageAPIClient.list(key.companyId, key.threadId, {
-        direction,
-        limit,
-        pageToken: offset,
-      });
-
-      if (!options?.keepOffsetMessage)
-        newMessages = newMessages.filter(message => message.id !== offset);
-
-      if (!options?.ignoreStateUpdate)
-        addMore(
-          direction,
-          newMessages,
-          direction === 'history' && !offset ? { reachedEnd: true } : {},
-        );
-
-      lock.release();
-      return newMessages;
-    } catch (err) {
-      console.error(err);
-      lock.release();
-      return [];
-    }
-  };
-
-  const jumpTo = async (id: string) => {
-    await lock.acquireAsync();
-    setWindow({
-      start: id,
-      end: id,
-      reachedStart: false,
-      reachedEnd: false,
-      loaded: false,
-    });
-    lock.release();
-    setLoaded(false);
-    let newMessages: NodeMessage[] = [];
-    if (id) {
-      newMessages = await loadMore('future', 20, id, { ignoreStateUpdate: true });
-    }
-    newMessages = [
-      ...(await loadMore('history', 20, id, { ignoreStateUpdate: true, keepOffsetMessage: true })),
-      ...newMessages,
-    ];
-    addMore('replace', newMessages);
-  };
-
-  messages = cleanFrontMessagesFromListOfMessages(messages);
-
-  return {
-    messages,
-    window,
-    loadMore,
-    jumpTo,
-    convertToKeys,
-  };
-};
-
-export const useAddMessageToThread = (companyId: string) => {
-  const updater = useAddToWindowedList(companyId);
-  return (messages: NodeMessage[], options: AddToWindowOptions & { threadId: string }) => {
-    const threadId = options?.threadId;
-    const windowKey = threadId;
-    const atom = ThreadMessagesState({
-      threadId,
-      companyId: companyId,
-    });
-    updater<AtomMessageKey>(convertToKeys(companyId, messages), {
-      ...options,
-      windowKey,
-      atom,
-      getId: m => m.id || '',
-    });
-  };
-};
-
-export const useRemoveMessageFromThread = (companyId: string) => {
-  const remover = useRemoveFromWindowedList(companyId);
-  return (messages: NodeMessage[], options: { threadId: string }) => {
-    if (messages.length === 0) return;
-    const threadId = options.threadId;
-    const atom = ThreadMessagesState({
-      threadId,
-      companyId: companyId,
-    });
-    remover<AtomMessageKey>(convertToKeys(companyId, messages), { atom, getId: m => m.id || '' });
-  };
-};
-
-const convertToKeys = (companyId: string, msgs: NodeMessage[]) => {
-  return msgs.map(m => {
-    return {
-      id: m.id,
-      threadId: m.thread_id,
-      companyId: companyId,
-      sortId: m.id,
-    };
-  });
-};
diff --git a/tdrive/frontend/src/app/features/messages/hooks/with-non-messages-components.tsx b/tdrive/frontend/src/app/features/messages/hooks/with-non-messages-components.tsx
deleted file mode 100644
index 542b7c01..00000000
--- a/tdrive/frontend/src/app/features/messages/hooks/with-non-messages-components.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { getMessage } from 'app/features/messages/hooks/use-message';
-import { AtomMessageKey } from 'app/features/messages/state/atoms/messages';
-import { NodeMessage } from 'app/features/messages/types/message';
-
-export type MessagesAndComponentsType = AtomMessageKey & {
-  type: 'message' | 'timeseparator' | 'header' | 'locked';
-  date?: number;
-};
-
-export const withNonMessagesComponents = (
-  messages: AtomMessageKey[],
-  reachedStart = false,
-  shouldLimit = false,
-) => {
-  const newList: MessagesAndComponentsType[] = [];
-
-  let first = true;
-  let previous: NodeMessage | null = null;
-  for (const k of messages) {
-    const message = getMessage(k.id || '');
-    if (first && shouldLimit) {
-      newList.push({
-        type: 'locked',
-        ...k,
-      });
-      first = false;
-    } else if (first && reachedStart) {
-      newList.push({
-        type: 'header',
-        ...k,
-      });
-      first = false;
-    }
-    if (message) {
-      if (previous !== undefined) {
-        if (Math.abs((message?.created_at || 0) - (previous?.created_at || 0)) > 1000 * 60 * 60) {
-          newList.push({
-            type: 'timeseparator',
-            date: message?.created_at || 0,
-            ...k,
-          });
-        }
-      }
-      previous = message;
-      newList.push({ type: 'message', ...k });
-    }
-  }
-
-  return newList;
-};
diff --git a/tdrive/frontend/src/app/features/messages/services/message-editor-service-factory.ts b/tdrive/frontend/src/app/features/messages/services/message-editor-service-factory.ts
deleted file mode 100644
index f7810770..00000000
--- a/tdrive/frontend/src/app/features/messages/services/message-editor-service-factory.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { MessageEditorService } from './message-editor-service';
-
-class MessageEditorServiceFactory {
-  private services = new Map<string, MessageEditorService>();
-
-  get(channelId: string): MessageEditorService {
-    let service = this.services.get(channelId);
-
-    if (service) {
-      return service;
-    }
-
-    service = new MessageEditorService(channelId);
-    this.services.set(channelId, service);
-
-    return service;
-  }
-}
-
-const factory = new MessageEditorServiceFactory();
-(window as any).TdriveMessageEditorServiceFactory = factory;
-export default factory;
diff --git a/tdrive/frontend/src/app/features/messages/services/message-editor-service.ts b/tdrive/frontend/src/app/features/messages/services/message-editor-service.ts
deleted file mode 100644
index df0592d1..00000000
--- a/tdrive/frontend/src/app/features/messages/services/message-editor-service.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import FileUploadService from 'app/features/files/services/file-upload-service';
-import Observable from 'app/deprecated/CollectionsV1/observable';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import { ToasterService as Toaster } from 'app/features/global/services/toaster-service';
-import Languages from 'app/features/global/services/languages-service';
-
-// FIX ME use real File type instead
-type FileType = { [key: string]: any };
-
-/*
-  This class will manage editor states (opened editor and state)
-*/
-export class MessageEditorService extends Observable {
-  ATTACHEMENTS_LIMIT = 10;
-  static LOCALSTORAGE_KEY = 'm_input';
-
-  constructor(channelId: string) {
-    super();
-    this.channelId = channelId;
-  }
-
-  //State
-  channelId: string;
-  currentEditor: string | false = false; //False no editor opened, string = parent message
-  currentEditorThreadId: string | false = false; //False no editor opened, string = parent message
-  currentEditorMessageId: string | false = false; //False no editor opened, string = parent message
-  editorsContents: { [threadId: string]: string } = {};
-  filesAttachements: { [threadId: string]: string[] } = {};
-  editorsUploadZones: { [threadId: string]: any } = {};
-
-  setInputNode = () => undefined;
-
-  /**
-   * Set the message to cache for the given thread/message
-   *
-   * @param threadId
-   * @param messageId
-   * @param content
-   */
-  async setContent(threadId: string, messageId: string, content: string): Promise<void> {
-    const editorId = this.getEditorId(threadId, messageId);
-
-    if (!messageId) {
-      const all = LocalStorage.getItem(MessageEditorService.LOCALSTORAGE_KEY) || ({} as any);
-      all[this.getCacheId(threadId)] = [content, new Date().getTime()];
-      LocalStorage.setItem(MessageEditorService.LOCALSTORAGE_KEY, all);
-    }
-    this.editorsContents[editorId] = content;
-  }
-
-  /**
-   * Get the cached message for the thread/message
-   *
-   * @param threadId
-   * @param messageId
-   * @returns
-   */
-  async getContent(threadId = '', messageId = ''): Promise<string> {
-    const editorId = this.getEditorId(threadId, messageId);
-
-    if (!messageId) {
-      const all = this.cleanSavedInputContents(
-        LocalStorage.getItem(MessageEditorService.LOCALSTORAGE_KEY) || {},
-      );
-      const res = (all[this.getCacheId(threadId)] || {})[0];
-      if (res) {
-        this.editorsContents[editorId] = res;
-      }
-    }
-    return this.editorsContents[editorId] || '';
-  }
-
-  private cleanSavedInputContents(all: any) {
-    Object.keys(all).forEach(key => {
-      if (
-        all[key] &&
-        all[key][1] < new Date().getTime() - 1000 * 60 * 60 * 24 * 31 &&
-        (key.indexOf('_thread=') ||
-          all[key][1] < new Date().getTime() - 1000 * 60 * 60 * 24 * 31 * 6)
-      ) {
-        delete all[key];
-      }
-    });
-    return all;
-  }
-
-  openEditor(threadId: string, messageId: string, context = '') {
-    const nextEditor = this.getEditorId(threadId, messageId, context);
-    if (nextEditor === this.currentEditor) {
-      return;
-    }
-    this.currentEditor = nextEditor;
-    this.currentEditorThreadId = threadId;
-    this.currentEditorMessageId = messageId;
-    this.notify();
-  }
-
-  closeEditor() {
-    this.currentEditor = false;
-    this.currentEditorThreadId = '';
-    this.currentEditorMessageId = '';
-    this.notify();
-  }
-
-  getUploadZone(threadId: string) {
-    return this.editorsUploadZones[this.getThreadId(threadId)];
-  }
-
-  setUploadZone(threadId: string, node: any) {
-    if (node) {
-      this.editorsUploadZones[this.getThreadId(threadId)] = node;
-    }
-  }
-
-  openFileSelector(threadId: string) {
-    const id = this.getThreadId(threadId);
-    if (this.editorsUploadZones[id]) this.editorsUploadZones[id].open();
-  }
-
-  onAddAttachment(threadId: string, file: FileType) {
-    const id = this.getThreadId(threadId);
-
-    if (this.shouldLimitAttachements(threadId)) {
-      return Toaster.error(
-        Languages.t('services.apps.messages.message_editor_service.upload_error_toaster', [
-          file.name,
-          this.ATTACHEMENTS_LIMIT,
-        ]),
-        4,
-      );
-    }
-
-    if (!this.filesAttachements[id]) {
-      this.filesAttachements[id] = [];
-    }
-
-    this.filesAttachements[id].push(file.id);
-
-    this.notify();
-  }
-
-  setAttachments(threadId: string, list: string[]) {
-    const id = this.getThreadId(threadId);
-    list.forEach(pendingFileId => {
-      const file = FileUploadService.getPendingFile(pendingFileId);
-
-      if (this.shouldLimitAttachements(threadId)) {
-        return Toaster.error(
-          Languages.t('services.apps.messages.message_editor_service.upload_error_toaster', [
-            file?.originalFile?.name || 'unknown file',
-            this.ATTACHEMENTS_LIMIT,
-          ]),
-          4,
-        );
-      }
-
-      if (!this.filesAttachements[id]) {
-        this.filesAttachements[id] = [];
-      }
-
-      this.filesAttachements[id].push(file.id);
-
-      this.notify();
-    });
-  }
-
-  onRemoveAttachement(threadId: string, fileId: string) {
-    const id = this.getThreadId(threadId);
-
-    let filesAttachements;
-    if (this.filesAttachements[id].length >= 0) {
-      filesAttachements = this.filesAttachements[id].filter(val => val !== fileId);
-      this.filesAttachements[id] = filesAttachements;
-    }
-
-    this.notify();
-  }
-
-  hasAttachments(threadId = ''): boolean {
-    const id = this.getThreadId(threadId);
-
-    return !!this.filesAttachements[id]?.length;
-  }
-
-  getAttachements(threadId = ''): string[] {
-    return this.filesAttachements[this.getThreadId(threadId)];
-  }
-
-  shouldLimitAttachements(threadId = ''): boolean {
-    return this.getAttachements(threadId)?.length >= this.ATTACHEMENTS_LIMIT ? true : false;
-  }
-
-  clearAttachments(threadId: string) {
-    this.filesAttachements[this.getThreadId(threadId)] = [];
-    this.notify();
-  }
-
-  clearMessage(threadId: string, messageId: string): Promise<void> {
-    return this.setContent(threadId, messageId, '');
-  }
-
-  private getThreadId(threadId?: string): string {
-    return threadId || 'main';
-  }
-
-  private getCacheId(threadId: string): string {
-    return `${this.channelId}${threadId ? `_thread=${threadId}` : ''}`;
-  }
-
-  getEditorId(threadId: string, messageId: string, context = ''): string {
-    return threadId + (messageId ? `_${messageId}` : '') + (context ? `_${context}` : '');
-  }
-}
diff --git a/tdrive/frontend/src/app/features/messages/services/message-history-service.ts b/tdrive/frontend/src/app/features/messages/services/message-history-service.ts
deleted file mode 100644
index f1aeba69..00000000
--- a/tdrive/frontend/src/app/features/messages/services/message-history-service.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Message } from '../types/message';
-import Numbers from 'app/features/global/utils/Numbers';
-import FeatureTogglesService, {
-  FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
-import { CompanyType } from 'app/features/companies/types/company';
-
-class MessageHistoryService {
-  shouldLimitMessages(
-    company: CompanyType,
-    firstMessageId: string,
-    messagesCount: number,
-  ): boolean {
-    const MONTH = 1000 * 60 * 60 * 24 * 30;
-    const DELAY = 3 * MONTH;
-    const MIN_MESSAGES = 100;
-
-    const currentTotalNumberOfMessagesInCompany = company.stats?.total_messages || 0;
-
-    const firstMessageTimestamp = Numbers.timeuuidToDate(firstMessageId) * 1000;
-    const isFirstMessageOlderOrEqualThanDelay = firstMessageTimestamp >= DELAY;
-    const isActiveFeature = FeatureTogglesService.isActiveFeatureName(FeatureNames.MESSAGE_HISTORY);
-    return (
-      currentTotalNumberOfMessagesInCompany > this.getLimitCompanyMessages() &&
-      isFirstMessageOlderOrEqualThanDelay &&
-      !isActiveFeature &&
-      messagesCount >= MIN_MESSAGES
-    );
-  }
-
-  getLimitCompanyMessages(): number {
-    return FeatureTogglesService.getFeatureValue<number>(FeatureNames.MESSAGE_HISTORY_LIMIT);
-  }
-
-  getLimitChannelMessageObject(): Message {
-    return {
-      id: '0000000-0000-1000-0000-00000000',
-      message_type: 2,
-      hidden_data: { type: 'limit_channel' },
-      creation_date: 0,
-    };
-  }
-
-  getInitChannelMessageObject(channel_id: string): Message {
-    return {
-      id: '0000000-0000-1000-0000-00000000',
-      message_type: 2,
-      hidden_data: { type: 'init_channel' },
-      creation_date: 0,
-      channel_id,
-    };
-  }
-
-  getInitThreadMessageObject({
-    thread_id,
-    channel_id,
-  }: {
-    thread_id: string;
-    channel_id: string;
-  }): Message {
-    return {
-      id: thread_id,
-      message_type: 2,
-      hidden_data: { type: 'init_thread', thread_id },
-      creation_date: 0,
-      channel_id,
-    };
-  }
-}
-
-export default new MessageHistoryService();
diff --git a/tdrive/frontend/src/app/features/messages/services/message-reaction-service.ts b/tdrive/frontend/src/app/features/messages/services/message-reaction-service.ts
deleted file mode 100644
index db43bd3d..00000000
--- a/tdrive/frontend/src/app/features/messages/services/message-reaction-service.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Message, ReactionType } from 'app/features/messages/types/message';
-import UserService from 'app/features/users/services/current-user-service';
-import MessageEditorManager from './message-editor-service-factory';
-import DepreciatedCollections, {
-  Collection,
-} from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-
-/**
- * ChannelServiceImpl that allow you to manage message reactions
- */
-class MessageReactionService {
-  collection: Collection;
-
-  constructor() {
-    this.collection = DepreciatedCollections.get('messages');
-  }
-
-  /**
-   * Get user reactions in a message
-   * @param message Message
-   * @param userId string
-   */
-  public getUserReactions(message: Message, userId?: string): ReactionType[] {
-    const { reactions } = message;
-    let userReactions: ReactionType[] = [];
-
-    if (reactions?.length && userId) {
-      userReactions = reactions.filter(r => r.users.includes(userId));
-    }
-
-    return userReactions;
-  }
-
-  /**
-   * Update reactions in message object
-   * @param message Message
-   * @param reactionName
-   * @param userId
-   */
-  private realtimeReactionsUpdate(message: Message, reactionName: string, userId: string): void {
-    message.reactions = message.reactions?.map(r =>
-      r.name === reactionName
-        ? { ...r, count: Math.max(0, r.users.includes(userId) ? r.count - 1 : r.count + 1) }
-        : r,
-    );
-  }
-
-  /**
-   * Set new user reaction
-   * @param reactions User ReactionType[]
-   * @param reaction ReactionType
-   */
-  private setUserReactions(reactions: ReactionType[], reaction: ReactionType): ReactionType[] {
-    const reactionsArray: ReactionType[] = [...reactions];
-    const alreadyInReactions = reactionsArray.map(r => r.name).includes(reaction.name);
-
-    return alreadyInReactions
-      ? reactionsArray.filter(r => r.name !== reaction.name)
-      : [...reactionsArray, reaction];
-  }
-
-  /**
-   * Allow user to react a message
-   * @param message Message
-   * @param reaction string
-   * @param messagesCollectionKey string
-   */
-  public react(message: Message, reactionName: string, messagesCollectionKey: string): void {
-    const userId = UserService.getCurrentUserId();
-    const currentUserReactions = this.getUserReactions(message, userId);
-
-    const currentReaction: ReactionType = {
-      name: reactionName,
-      count: 1,
-      users: [userId],
-    };
-
-    const userReactionsNames = this.setUserReactions(currentUserReactions, currentReaction).map(
-      r => r.name,
-    );
-
-    this.realtimeReactionsUpdate(message, reactionName, userId);
-
-    this.collection.completeObject({ _user_reaction: userReactionsNames }, message.front_id);
-    this.collection.save(message, messagesCollectionKey);
-    MessageEditorManager.get(message?.channel_id || '').closeEditor();
-  }
-}
-
-export default new MessageReactionService();
diff --git a/tdrive/frontend/src/app/features/messages/state/atoms/message-highlight.ts b/tdrive/frontend/src/app/features/messages/state/atoms/message-highlight.ts
deleted file mode 100644
index b7325f07..00000000
--- a/tdrive/frontend/src/app/features/messages/state/atoms/message-highlight.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { atom } from 'recoil';
-
-export type AtomHighlightKey = {
-  threadId: string;
-  answerId: string | null;
-  reachedThread: boolean;
-  reachedAnswer: boolean;
-};
-
-export const HighlightMessageState = atom<AtomHighlightKey | null>({
-  key: 'HighlightMessageState',
-  default: null,
-});
diff --git a/tdrive/frontend/src/app/features/messages/state/atoms/message-quote-reply.ts b/tdrive/frontend/src/app/features/messages/state/atoms/message-quote-reply.ts
deleted file mode 100644
index 6124ec6d..00000000
--- a/tdrive/frontend/src/app/features/messages/state/atoms/message-quote-reply.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import { atom, selectorFamily } from 'recoil';
-
-export type MessageQuoteReplyEditorState = {
-  message: string;
-  channel: string;
-};
-
-type MessageQuoteReplyEditorActiveSelectorType = {
-  channel: string;
-};
-
-export const MessageQuoteReplyEditorState = atom<MessageQuoteReplyEditorState>({
-  key: 'MessageQuoteReplyEditorState',
-  default: {
-    message: LocalStorage.getItem(`quote-reply:message`) || '',
-    channel: LocalStorage.getItem(`quote-reply:channel`) || '',
-  },
-  effects_UNSTABLE: [
-    ({ onSet }) => {
-      onSet((payload: MessageQuoteReplyEditorState) => {
-        LocalStorage.setItem(`quote-reply:message`, payload.message || '');
-        LocalStorage.setItem(`quote-reply:channel`, payload.channel || '');
-      });
-    }
-  ],
-});
-
-export const MessageQuoteReplyEditorActiveSelector = selectorFamily<
-  boolean,
-  MessageQuoteReplyEditorActiveSelectorType
->({
-  key: 'MessageQuoteReplyEditorActiveSelector',
-  get:
-    params =>
-    ({ get }) => {
-      const { channel, message } = get(MessageQuoteReplyEditorState);
-
-      return message !== '' && channel !== '' && params.channel === channel;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/messages/state/atoms/message-seen-by.ts b/tdrive/frontend/src/app/features/messages/state/atoms/message-seen-by.ts
deleted file mode 100644
index 3a194171..00000000
--- a/tdrive/frontend/src/app/features/messages/state/atoms/message-seen-by.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { atom } from 'recoil';
-
-export type MessageTarget = {
-  message_id: string;
-  thread_id: string;
-  workspace_id: string;
-  company_id: string;
-}
-
-export const messageSeenByListState = atom<boolean>({
-  key: 'messageSeenByListState',
-  default: false,
-});
-
-export const messageSeenByState = atom<MessageTarget | null>({
-  key: 'messageSeenBystate',
-  default: null,
-});
diff --git a/tdrive/frontend/src/app/features/messages/state/atoms/messages-editor.ts b/tdrive/frontend/src/app/features/messages/state/atoms/messages-editor.ts
deleted file mode 100644
index 724aa92d..00000000
--- a/tdrive/frontend/src/app/features/messages/state/atoms/messages-editor.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import { atom, selectorFamily, atomFamily } from 'recoil';
-
-type MessagesEditorType = {
-  value: string;
-  files: any[];
-};
-
-type VisibleMessagesEditorLocationType = {
-  location: string;
-  subLocation: string;
-};
-
-/**
- * Store the current status of each editors by location
- * A location is:
- * - a message (being edited) message-{message_id}
- * - a new message input for a channel channel-{channel_id}
- * - a new message input for a thread (reply) thread-{thread_id}
- */
-export const MessagesEditorState = atomFamily<MessagesEditorType, string>({
-  key: 'MessagesEditorState',
-  default: key => {
-    let files = [];
-    try {
-      files = JSON.parse(LocalStorage.getItem(`editor:${key}:files`) || '[]') || [];
-    } catch (err) {
-      //Nothing
-    }
-    return { value: LocalStorage.getItem(`editor:${key}:value`) || '', files };
-  },
-  effects_UNSTABLE: key => [
-    ({ onSet }) => {
-      onSet((editor: MessagesEditorType) => {
-        LocalStorage.setItem(`editor:${key}:files`, JSON.stringify(editor.files));
-        LocalStorage.setItem(`editor:${key}:value`, editor.value || '');
-      });
-    },
-  ],
-});
-
-/**
- * Store which editor is currently opened (only once at a time)
- * It returns a location and a subLocation if needed (editor in the thread view or editor in the main view for instance)
- * A location is:
- * - a message (being edited) message-{message_id}
- * - a new message input for a channel channel-{channel_id}
- * - a new message input for a thread (reply) thread-{thread_id}
- * A subLocation is:
- * - thread_view
- * - channel_view
- */
-export const VisibleMessagesEditorLocationState = atom<VisibleMessagesEditorLocationType>({
-  key: 'VisibleMessagesEditorLocationState',
-  default: {
-    location: LocalStorage.getItem(`editor:location`) || '',
-    subLocation: LocalStorage.getItem(`editor:sublocation`) || '',
-  },
-  effects_UNSTABLE: [
-    ({ onSet }) => {
-      onSet((location: VisibleMessagesEditorLocationType) => {
-        LocalStorage.setItem(`editor:location`, location.location);
-        LocalStorage.setItem(`editor:sublocation`, location.subLocation);
-      });
-    },
-  ],
-});
-
-export const VisibleMessagesEditorLocationActiveSelector = selectorFamily<
-  boolean,
-  VisibleMessagesEditorLocationType
->({
-  key: 'VisibleMessagesEditorLocationActiveSelector',
-  get:
-    params =>
-    ({ get }) => {
-      const current = get(VisibleMessagesEditorLocationState);
-      return current.location === params.location && current.subLocation === params.subLocation;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/messages/state/atoms/messages.ts b/tdrive/frontend/src/app/features/messages/state/atoms/messages.ts
deleted file mode 100644
index 0c51ee26..00000000
--- a/tdrive/frontend/src/app/features/messages/state/atoms/messages.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { MessageWithReplies } from 'app/features/messages/types/message';
-import { atomFamily } from 'recoil';
-
-export type AtomMessageKey = {
-  companyId: string;
-  threadId: string;
-  id?: string;
-  _status?: 'sending' | 'sent' | 'failed';
-};
-export type AtomThreadKey = { companyId: string; threadId: string };
-export type AtomChannelKey = { companyId: string; workspaceId: string; channelId: string };
-
-export const MessageState = atomFamily<MessageWithReplies, AtomMessageKey>({
-  key: 'MessageState',
-  default: () => {
-    return {} as MessageWithReplies;
-  },
-});
-
-export const ThreadMessagesState = atomFamily<
-  (AtomMessageKey & { sortId?: string })[],
-  AtomThreadKey
->({
-  key: 'ThreadMessagesState',
-  default: () => [],
-});
-
-export const ChannelMessagesState = atomFamily<
-  (AtomMessageKey & { sortId?: string })[],
-  AtomChannelKey
->({
-  key: 'ChannelMessagesState',
-  default: () => [],
-});
diff --git a/tdrive/frontend/src/app/features/messages/state/selectors/thread-writing-activity.ts b/tdrive/frontend/src/app/features/messages/state/selectors/thread-writing-activity.ts
deleted file mode 100644
index 35255b5d..00000000
--- a/tdrive/frontend/src/app/features/messages/state/selectors/thread-writing-activity.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { selectorFamily } from 'recoil';
-import {
-  ChannelWritingActivityType,
-  ChannelWritingActivityState,
-} from 'app/features/channels/state/channel-writing-activity';
-
-export const ThreadWritingActivitySelector = selectorFamily<
-  ChannelWritingActivityType[],
-  { channelId: string; threadId: string }
->({
-  key: 'ThreadWritingActivitySelector',
-  get:
-    ({ channelId, threadId }) =>
-    ({ get }) => {
-      return get(ChannelWritingActivityState(channelId) || []).filter(
-        status => !threadId || status.threadId === threadId,
-      );
-    },
-});
diff --git a/tdrive/frontend/src/app/features/messages/types/message.ts b/tdrive/frontend/src/app/features/messages/types/message.ts
deleted file mode 100644
index d7d82b90..00000000
--- a/tdrive/frontend/src/app/features/messages/types/message.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { UserType } from 'app/features/users/types/user';
-import { FileTypes } from 'features/files/api/file-upload-api-client';
-
-export type ReactionType = { name: string; count: number; users: string[] };
-
-export type ThumbnailType = {
-  width?: number; //Thumbnail width (for images only)
-  height?: number; //Thumbnail height (for images only)
-  id?: string; //Url to thumbnail (or set it to undefined if no relevant)
-  index?: number;
-  size?: number;
-  mime?: string;
-  type?: string;
-  url: string;
-};
-
-export type MessageFileMetadataSource = 'internal' | 'drive' | string;
-
-export type MessageFileType = {
-  //Primary key
-  id?: string;
-  company_id?: string; // optional
-  message_id?: string; // optional
-  thread_id?: string; // optional
-
-  metadata?: {
-    //File information when attached (it can change if edited)
-    source?: MessageFileMetadataSource;
-    external_id: string | { company_id: string; id: string } | any;
-    name?: string; //Original name
-    size?: number; //Original weight
-    mime?: string;
-    thumbnails?: ThumbnailType[];
-  };
-};
-
-export type FileSearchResult = {
-  company_id: string;
-  file_id: string;
-  thumbnail_url: string;
-  filename: string;
-  filetype: FileTypes;
-  size: number;
-  created_at: number;
-  message: Message;
-  user: UserType;
-};
-
-export type Message = {
-  created_at?: number;
-  id?: string;
-  thread_id?: string;
-  application_id?: string | null;
-  channel_id?: string;
-  content?: any;
-  creation_date?: number;
-  edited?: boolean;
-  front_id?: string;
-  hidden_data?: any;
-  increment_at_time?: number | null;
-  message_type?: 0 | 1 | 2;
-  modification_date?: number;
-  parent_message_id?: string | null;
-  pinned?: boolean;
-  reactions?: ReactionType[];
-  responses_count?: number | null;
-  user_id?: string | null;
-  user_specific_content?: any;
-  cache?: {
-    company_id?: string;
-    workspace_id?: string;
-    channel_id?: string;
-  };
-  _user_ephemeral?: any;
-  _last_modified?: string;
-  _user_reaction?: any;
-  subtype?:
-    | null
-    | 'application' //Message from a connector
-    | 'deleted' //Message deleted by user
-    | 'system';
-  files?: MessageFileType[];
-  text?: string;
-  status?: MessageDeliveryStatusType;
-};
-
-export interface MessageExtended extends Message {
-  id: string;
-  text: string;
-  cache: { company_id: string; workspace_id: string; channel_id: string };
-  created_at: number;
-  user_id: string;
-  thread_id: string;
-}
-
-export type DeprecatedMessageKeys = {
-  parent_message_id?: string | null;
-};
-
-export type Thread = {
-  company_id: string;
-  thread_id: string;
-  created_at: number;
-  last_activity: number;
-  answers: number;
-  participants: Participant[];
-};
-
-export type Participant = {
-  type: 'user' | 'channel';
-  id: string;
-  company_id: string;
-  workspace_id: string | 'direct';
-};
-
-export enum NodeMessageType {
-  MESSAGE = 'message', // Classic message
-  EVENT = 'event', // Hidden events like key changes, or other system events
-}
-
-export enum NodeMessageSubType {
-  APPLICATION = 'application', // Message from a connector
-  DELETED = 'deleted', // Message deleted by user
-  SYSTEM = 'system', // Message from system (channel activity)
-}
-
-export type EphemeralMessage = {
-  id: string; //Identifier of the ephemeral message
-  version: string; //Version of ephemeral message (to update the view)
-  recipient: string; //User that will see this ephemeral message
-  recipient_context_id: string; //Recipient current view/tab/window to send the message to
-};
-
-export type NodeMessage = {
-  /**
-   * @type UUID required
-   * Primary key
-   */
-  id: string;
-  /**
-   * @type UUID required
-   * Primary key
-   */
-  thread_id: string;
-
-  /**
-   * @type UUID required
-   * Required
-   */
-  user_id: string;
-
-  /**
-   *  @type  NodeMessageType.MESSAGE | NodeMessageType.EVENT
-   */
-  type: NodeMessageType;
-
-  /**
-   * @type NodeMessageSubType.APPLICATION | NodeMessageSubType.DELETED | NodeMessageSubType.SYSTEM | null
-   */
-  subtype: NodeMessageSubType | null;
-
-  /**
-   * Timestamp in ms
-   */
-  created_at: number;
-
-  /**
-   * Additional information only if message was sent by an application
-   */
-  application_id: string | null;
-
-  /**
-   * Original text typed by user and used in notifications
-   * It is parsed as markdown by frontend
-   * Most messages will only use this format
-   */
-  text: string;
-
-  /**
-   * @type  JSON [BlockObject]
-   * Alternative nested json to replace text (if defined it replaces the text field)
-   */
-  blocks: any;
-
-  /**
-   * @type JSON
-   * Hidden custom data for message
-   */
-  context: any & { _front_id: string }; //Hidden custom data for message
-
-  /**
-   * @type JSON
-   * @example { "edited_at": 0 }
-   */
-  edited: { edited_at: number } | null;
-
-  /**
-   * @type JSON
-   * If message if pinned (or it is undefined)
-   * @example { "pinned_by": "uuid", "pinned_at": 0 }
-   */
-  pinned_info?: { pinned_by: string; pinned_at: number } | null;
-
-  /**
-   * @type JSON
-   * @example [{"name": "string", "users": ["uuid", "uuid"], "count": 0 }]
-   */
-  reactions: ReactionType[] | null;
-
-  /**
-   * @type JSON
-   * Overide message title - Overide message picture
-   * @example { "title": "string", "picture": "string" }
-   */
-  override: { title: string; picture: string } | null;
-
-  files?: MessageFileType[];
-
-  ephemeral: EphemeralMessage | null; //Used for non-persisted messages (like interractive messages)
-
-  users?: UserType[];
-
-  //Used to display loader
-  _status?: 'sending' | 'failed' | 'sent' | 'cancelled';
-
-  //Used to display time separator
-  _previous_message?: NodeMessage;
-
-  links?: MessageLinkType[];
-
-  quote_message?: QuotedMessageType;
-
-  status?: MessageDeliveryStatusType | null;
-};
-
-export type MessageWithReplies = NodeMessage & {
-  last_replies: NodeMessage[];
-  stats: {
-    last_activity: number;
-    replies: number;
-  };
-};
-
-export type MessageLinkType = {
-  title: string;
-  description: string | undefined;
-  domain: string;
-  img: string | undefined;
-  favicon: string | undefined;
-  img_width: number | undefined;
-  img_height: number | undefined;
-  url: string;
-};
-
-export type MessageDeliveryStatusType = 'sending' | 'sent' | 'delivered' | 'read' | 'error';
-
-export type MessageSeenType = {
-  messages: {
-    message_id: string;
-    thread_id: string;
-  }[];
-  channel_id: string;
-};
-
-export type QuotedMessageType = NodeMessage & {
-  users?: UserType[];
-  company_id: string;
-  workspace_id: string;
-  channel_id: string;
-  thread_id: string;
-  id: string;
-};
diff --git a/tdrive/frontend/src/app/features/messages/utils/message-with-replies.ts b/tdrive/frontend/src/app/features/messages/utils/message-with-replies.ts
deleted file mode 100644
index f2894187..00000000
--- a/tdrive/frontend/src/app/features/messages/utils/message-with-replies.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MessageWithReplies, NodeMessage } from 'app/features/messages/types/message';
-
-/**
- * This convert a NodeMessage to a MessageWithReply type to make things easier
- */
-export const messageToMessageWithReplies = (m: NodeMessage | MessageWithReplies) => {
-  const mwr: MessageWithReplies = {
-    ...m,
-    last_replies: (m as MessageWithReplies)?.last_replies || [],
-    stats: (m as MessageWithReplies)?.stats || { last_activity: m.created_at, replies: 0 },
-  };
-  return mwr;
-};
diff --git a/tdrive/frontend/src/app/features/notifications-preferences/api/notifications-preferences-api-client.ts b/tdrive/frontend/src/app/features/notifications-preferences/api/notifications-preferences-api-client.ts
deleted file mode 100644
index bb41d66e..00000000
--- a/tdrive/frontend/src/app/features/notifications-preferences/api/notifications-preferences-api-client.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { preferencesType, NotificationPreferencesType } from '../types/notifications-preferences';
-import Api from 'app/features/global/framework/api-service';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-
-@TdriveService('NotificationsPreferencesAPIClientService')
-class NotificationsPreferencesAPIClientService {
-  private readonly apiUrl = '/internal/services/notifications/v1/preferences';
-
-  async save(resourcePreference: preferencesType) {
-    return Api.post<{ resource: preferencesType }, { resource: NotificationPreferencesType }>(
-      this.apiUrl,
-      { resource: resourcePreference },
-    ).then(r => r.resource);
-  }
-
-  async get() {
-    return Api.get<{ resources: NotificationPreferencesType[] }>(this.apiUrl).then(
-      r => r.resources[0],
-    );
-  }
-}
-
-const NotificationsPreferencesAPIClient = new NotificationsPreferencesAPIClientService();
-export default NotificationsPreferencesAPIClient;
diff --git a/tdrive/frontend/src/app/features/notifications-preferences/hooks/use-notifications-preference-hook.ts b/tdrive/frontend/src/app/features/notifications-preferences/hooks/use-notifications-preference-hook.ts
deleted file mode 100644
index 6f6ed17c..00000000
--- a/tdrive/frontend/src/app/features/notifications-preferences/hooks/use-notifications-preference-hook.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useRecoilState } from 'recoil';
-
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import NotificationsPreferencesAPIClientService from '../api/notifications-preferences-api-client';
-import { NotificationsPreferencesState } from '../state/notifications-preferences';
-import { NotificationPreferencesType, preferencesType} from '../types/notifications-preferences';
-
-export const UseNotificationPreferences = (): {
-  notifsPreferences: NotificationPreferencesType[];
-  loading: boolean;
-  refresh: () => Promise<void>;
-  save: (preferences: preferencesType) => Promise<void>;
-} => {
-  const [notifsPreferences, _setnPreferences] = useRecoilState(NotificationsPreferencesState);
-  const [loading, setLoading] = useRecoilState(LoadingState(`notifications-preferences`));
-
-  const refresh = async () => {
-    const nPreferencesUpdated: NotificationPreferencesType | undefined = await NotificationsPreferencesAPIClientService.get();
-
-    if (nPreferencesUpdated) _setnPreferences([nPreferencesUpdated]);
-  };
-
-  const save = async (preferences: preferencesType) => {
-    await NotificationsPreferencesAPIClientService.save(preferences);
-    setLoading(false);
-    refresh();
-  }
-
-  useGlobalEffect(
-    'UseNotificationPreferences',
-    async () => {
-      if (!notifsPreferences) setLoading(true);
-
-      await refresh();
-
-      setLoading(false);
-    },
-    [],
-  );
-
-  return {
-    notifsPreferences,
-    loading,
-    refresh,
-    save,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/notifications-preferences/state/notifications-preferences.ts b/tdrive/frontend/src/app/features/notifications-preferences/state/notifications-preferences.ts
deleted file mode 100644
index 12cc51ba..00000000
--- a/tdrive/frontend/src/app/features/notifications-preferences/state/notifications-preferences.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { atom } from 'recoil';
-
-import { NotificationPreferencesType } from '../types/notifications-preferences';
-
-export const NotificationsPreferencesState = atom<NotificationPreferencesType[]>({
-  key: 'NotificationsPreferencesState',
-  default: [],
-});
diff --git a/tdrive/frontend/src/app/features/notifications-preferences/types/notifications-preferences.ts b/tdrive/frontend/src/app/features/notifications-preferences/types/notifications-preferences.ts
deleted file mode 100644
index 8e9b47f3..00000000
--- a/tdrive/frontend/src/app/features/notifications-preferences/types/notifications-preferences.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export type preferencesType = {
-    highlight_words: string[];
-    night_break: {
-      enable: boolean;
-      from: number;
-      to: number;
-    };
-    private_message_content: boolean;
-    mobile_notifications: string;
-    email_notifications_delay: number;
-    deactivate_notifications_until: number;
-    notification_sound: string;
-};
-
-export type NotificationPreferencesType = {
-    user_id: string;
-    company_id: string;
-    workspace_id: string;
-    preferences: preferencesType;
-};
diff --git a/tdrive/frontend/src/app/features/pending-emails/api/pending-emails-api-client.ts b/tdrive/frontend/src/app/features/pending-emails/api/pending-emails-api-client.ts
deleted file mode 100644
index 599d66b1..00000000
--- a/tdrive/frontend/src/app/features/pending-emails/api/pending-emails-api-client.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  AtomPendingEmailsKey,
-  DeletePendingEmailResponse,
-  PendingEmail,
-  SavePendingEmailRequest,
-} from '../types/pending-email';
-import Api from 'app/features/global/framework/api-service';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-
-@TdriveService('PendingEmailsAPIClientService')
-class PendingEmailsAPIClientService {
-  private readonly prefix = '/internal/services/channels/v1/companies';
-
-  async save(email: string, context: AtomPendingEmailsKey) {
-    const { companyId, workspaceId, channelId } = context;
-    return Api.post<SavePendingEmailRequest, { resource: PendingEmail }>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails`,
-      {
-        resource: {
-          company_id: companyId,
-          workspace_id: workspaceId,
-          channel_id: channelId,
-          email,
-        },
-      },
-    ).then(r => r.resource);
-  }
-
-  async get(email: string, context: AtomPendingEmailsKey) {
-    const { companyId, workspaceId, channelId } = context;
-    return Api.get<PendingEmail>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails/${email}`,
-    );
-  }
-
-  async list({ companyId, workspaceId, channelId }: AtomPendingEmailsKey) {
-    return Api.get<{ resources: PendingEmail[] }>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails`,
-    ).then(r => r.resources);
-  }
-
-  async delete(email: string, context: AtomPendingEmailsKey) {
-    const { companyId, workspaceId, channelId } = context;
-    return Api.delete<DeletePendingEmailResponse>(
-      `${this.prefix}/${companyId}/workspaces/${workspaceId}/channels/${channelId}/pending_emails/${email}`,
-    );
-  }
-}
-
-const PendingEmailsAPIClient = new PendingEmailsAPIClientService();
-export default PendingEmailsAPIClient;
diff --git a/tdrive/frontend/src/app/features/pending-emails/hooks/use-pending-emails.ts b/tdrive/frontend/src/app/features/pending-emails/hooks/use-pending-emails.ts
deleted file mode 100644
index 3adf1a35..00000000
--- a/tdrive/frontend/src/app/features/pending-emails/hooks/use-pending-emails.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useRecoilState } from 'recoil';
-
-import {
-  AtomPendingEmailsKey,
-  PendingEmail,
-} from 'app/features/pending-emails/types/pending-email';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { PendingEmailsState } from 'app/features/pending-emails/state/pending-emails';
-import PendingEmailsAPIClient from '../api/pending-emails-api-client';
-
-export const usePendingEmails = (
-  key: AtomPendingEmailsKey,
-): {
-  pendingEmails: PendingEmail[];
-  loading: boolean;
-  refresh: () => Promise<void>;
-} => {
-  const [pendingEmails, _setPendingEmails] = useRecoilState(PendingEmailsState(key));
-  const [loading, setLoading] = useRecoilState(LoadingState(`pending-emails-${key.channelId}`));
-
-  const refresh = async () => {
-    const pendingEmailsUpdated: PendingEmail[] | undefined = await PendingEmailsAPIClient.list(key);
-
-    if (pendingEmailsUpdated) _setPendingEmails(pendingEmailsUpdated);
-  };
-
-  useGlobalEffect(
-    'usePendingEmails',
-    async () => {
-      if (!pendingEmails) setLoading(true);
-
-      await refresh();
-
-      setLoading(false);
-    },
-    [key, pendingEmails],
-  );
-
-  // useRealTimeHook
-
-  return {
-    pendingEmails,
-    loading,
-    refresh,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/pending-emails/state/pending-emails.ts b/tdrive/frontend/src/app/features/pending-emails/state/pending-emails.ts
deleted file mode 100644
index fb5d7b62..00000000
--- a/tdrive/frontend/src/app/features/pending-emails/state/pending-emails.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { atomFamily } from 'recoil';
-
-import {
-  AtomPendingEmailsKey,
-  PendingEmail,
-} from 'app/features/pending-emails/types/pending-email';
-
-export const PendingEmailsState = atomFamily<PendingEmail[], AtomPendingEmailsKey>({
-  key: 'PendingEmailsState',
-  default: _key => [],
-});
diff --git a/tdrive/frontend/src/app/features/pending-emails/types/pending-email.ts b/tdrive/frontend/src/app/features/pending-emails/types/pending-email.ts
deleted file mode 100644
index df32041a..00000000
--- a/tdrive/frontend/src/app/features/pending-emails/types/pending-email.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type PendingEmail = {
-  workspace_id: string;
-  channel_id: string;
-  company_id: string;
-  email: string;
-};
-
-export type AtomPendingEmailsKey = { companyId: string; workspaceId: string; channelId: string };
-
-export type SavePendingEmailRequest = {
-  resource: {
-    workspace_id: string;
-    channel_id: string;
-    company_id: string;
-    email: string;
-  };
-};
-
-export type DeletePendingEmailResponse = { status: 'success' | 'error' };
diff --git a/tdrive/frontend/src/app/features/router/hooks/use-router-channel-selected.ts b/tdrive/frontend/src/app/features/router/hooks/use-router-channel-selected.ts
index 90f33f0e..9de89857 100644
--- a/tdrive/frontend/src/app/features/router/hooks/use-router-channel-selected.ts
+++ b/tdrive/frontend/src/app/features/router/hooks/use-router-channel-selected.ts
@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { RouterChannelSelectedSelector } from 'app/features/router/state/selectors/router-selector';
+import { RouterChannelSelectedSelector } from '@features/router/state/selectors/router-selector';
 
 export default function useRouterChannelSelected(channelId: string) {
   return useRecoilValue(RouterChannelSelectedSelector(channelId));
diff --git a/tdrive/frontend/src/app/features/router/hooks/use-router-channel.ts b/tdrive/frontend/src/app/features/router/hooks/use-router-channel.ts
index 889986ce..bd89068b 100644
--- a/tdrive/frontend/src/app/features/router/hooks/use-router-channel.ts
+++ b/tdrive/frontend/src/app/features/router/hooks/use-router-channel.ts
@@ -1,7 +1,7 @@
-import RouterService from 'app/features/router/services/router-service';
+import RouterService from '@features/router/services/router-service';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { RouterState } from 'app/features/router/state/atoms/router';
-import { RouterChannelSelector } from 'app/features/router/state/selectors/router-selector';
+import { RouterState } from '@features/router/state/atoms/router';
+import { RouterChannelSelector } from '@features/router/state/selectors/router-selector';
 
 export default function useRouterChannel() {
   const setClientState = useSetRecoilState(RouterState);
diff --git a/tdrive/frontend/src/app/features/router/hooks/use-router-company.ts b/tdrive/frontend/src/app/features/router/hooks/use-router-company.ts
index d2d0abff..dd3b7284 100644
--- a/tdrive/frontend/src/app/features/router/hooks/use-router-company.ts
+++ b/tdrive/frontend/src/app/features/router/hooks/use-router-company.ts
@@ -1,7 +1,7 @@
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import RouterService from 'app/features/router/services/router-service';
-import { RouterState } from 'app/features/router/state/atoms/router';
-import { RouterCompanySelector } from 'app/features/router/state/selectors/router-selector';
+import RouterService from '@features/router/services/router-service';
+import { RouterState } from '@features/router/state/atoms/router';
+import { RouterCompanySelector } from '@features/router/state/selectors/router-selector';
 import { useEffect } from 'react';
 
 export default function useRouterCompany() {
diff --git a/tdrive/frontend/src/app/features/router/hooks/use-router-tab.ts b/tdrive/frontend/src/app/features/router/hooks/use-router-tab.ts
index 30624ab5..336217f3 100644
--- a/tdrive/frontend/src/app/features/router/hooks/use-router-tab.ts
+++ b/tdrive/frontend/src/app/features/router/hooks/use-router-tab.ts
@@ -1,7 +1,7 @@
-import RouterService from 'app/features/router/services/router-service';
+import RouterService from '@features/router/services/router-service';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { RouterState } from 'app/features/router/state/atoms/router';
-import { RouterTabSelector } from 'app/features/router/state/selectors/router-selector';
+import { RouterState } from '@features/router/state/atoms/router';
+import { RouterTabSelector } from '@features/router/state/selectors/router-selector';
 
 export default function useRouterTab() {
   const setClientState = useSetRecoilState(RouterState);
diff --git a/tdrive/frontend/src/app/features/router/hooks/use-router-workspace-selected.ts b/tdrive/frontend/src/app/features/router/hooks/use-router-workspace-selected.ts
index b4217dc4..1ac3f220 100644
--- a/tdrive/frontend/src/app/features/router/hooks/use-router-workspace-selected.ts
+++ b/tdrive/frontend/src/app/features/router/hooks/use-router-workspace-selected.ts
@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { RouterWorkspaceSelectedSelector } from 'app/features/router/state/selectors/router-selector';
+import { RouterWorkspaceSelectedSelector } from '@features/router/state/selectors/router-selector';
 
 export default function useRouterWorkspaceSelected(workspaceId: string) {
   return useRecoilValue(RouterWorkspaceSelectedSelector(workspaceId));
diff --git a/tdrive/frontend/src/app/features/router/hooks/use-router-workspace.ts b/tdrive/frontend/src/app/features/router/hooks/use-router-workspace.ts
index 7b3767c4..bac406e0 100644
--- a/tdrive/frontend/src/app/features/router/hooks/use-router-workspace.ts
+++ b/tdrive/frontend/src/app/features/router/hooks/use-router-workspace.ts
@@ -1,7 +1,7 @@
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import RouterService from 'app/features/router/services/router-service';
-import { RouterState } from 'app/features/router/state/atoms/router';
-import { RouterWorkspaceSelector } from 'app/features/router/state/selectors/router-selector';
+import RouterService from '@features/router/services/router-service';
+import { RouterState } from '@features/router/state/atoms/router';
+import { RouterWorkspaceSelector } from '@features/router/state/selectors/router-selector';
 
 export default function useRouterWorkspace() {
   const setClientState = useSetRecoilState(RouterState);
diff --git a/tdrive/frontend/src/app/features/router/services/app-view-service.ts b/tdrive/frontend/src/app/features/router/services/app-view-service.ts
index 4943356c..21c75ef4 100755
--- a/tdrive/frontend/src/app/features/router/services/app-view-service.ts
+++ b/tdrive/frontend/src/app/features/router/services/app-view-service.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Application } from 'app/features/applications/types/application';
-import Observable from 'app/deprecated/Observable/Observable';
+import { Application } from '@features/applications/types/application';
+import Observable from '@deprecated/Observable/Observable';
 import _ from 'lodash';
 
 export type ViewTypes =
diff --git a/tdrive/frontend/src/app/features/router/services/router-service.ts b/tdrive/frontend/src/app/features/router/services/router-service.ts
index 2df7b5f7..c4a5ff76 100644
--- a/tdrive/frontend/src/app/features/router/services/router-service.ts
+++ b/tdrive/frontend/src/app/features/router/services/router-service.ts
@@ -3,14 +3,14 @@ import { createBrowserHistory, History } from 'history';
 import { matchPath, match } from 'react-router';
 import short, { Translator } from 'short-uuid';
 
-import App from 'app/views/client/app';
-import Login from 'app/views/login/login';
-import Logout from 'app/views/login/logout';
-import Error from 'app/views/error';
-import Join from 'app/views/join';
-import PublicMainView from 'app/views/client/body/drive/shared';
+import App from '@views/client/app';
+import Login from '@views/login/login';
+import Logout from '@views/login/logout';
+import Error from '@views/error';
+import Join from '@views/join';
+import PublicMainView from '@views/client/body/drive/shared';
 import Observable from '../../../deprecated/Observable/Observable';
-import { getWorkspacesByCompany } from 'app/features/workspaces/state/workspace-list';
+import { getWorkspacesByCompany } from '@features/workspaces/state/workspace-list';
 
 export type RouteType = {
   path: string;
diff --git a/tdrive/frontend/src/app/features/router/state/atoms/router.ts b/tdrive/frontend/src/app/features/router/state/atoms/router.ts
index 5628c7e3..4434467a 100644
--- a/tdrive/frontend/src/app/features/router/state/atoms/router.ts
+++ b/tdrive/frontend/src/app/features/router/state/atoms/router.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { ClientStateType } from 'app/features/router/services/router-service';
+import { ClientStateType } from '@features/router/services/router-service';
 
 export const RouterState = atom<ClientStateType | undefined>({
   key: 'RouterState',
diff --git a/tdrive/frontend/src/app/features/search/hooks/use-search-channels.ts b/tdrive/frontend/src/app/features/search/hooks/use-search-channels.ts
deleted file mode 100644
index 8c0b9927..00000000
--- a/tdrive/frontend/src/app/features/search/hooks/use-search-channels.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import ChannelAPIClient from 'app/features/channels/api/channel-api-client';
-import { getAllChannelsCache } from 'app/features/channels/hooks/use-channel';
-import { ChannelType, createDirectChannelFromUsers } from 'app/features/channels/types/channel';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import Strings, { distanceFromQuery } from 'app/features/global/utils/strings';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import UserAPIClient from 'app/features/users/api/user-api-client';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import _ from 'lodash';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { RecentChannelsState } from '../state/recent-channels';
-import { SearchChannelsResultsState } from '../state/search-channels-result';
-import { SearchInputState } from '../state/search-input';
-
-export const useSearchChannelsLoading = () => {
-  return useRecoilValue(LoadingState('useSearchChannels'));
-};
-
-let currentQuery = '';
-
-const frontendSearch = (companyId: string, query: string) => {
-  const result = getAllChannelsCache()
-    .filter(c => c.company_id === companyId)
-    .filter(({ name }) =>
-      query
-        .split(' ')
-        .every(
-          word =>
-            Strings.removeAccents(`${name}`)
-              .toLocaleLowerCase()
-              .indexOf(Strings.removeAccents(word).toLocaleLowerCase()) > -1,
-        ),
-    )
-    .sort(
-      (a, b) =>
-        distanceFromQuery([a.name].join(' '), query) - distanceFromQuery([b.name].join(' '), query),
-    );
-
-  return result as ChannelType[];
-};
-
-export const useSearchChannels = () => {
-  const companyId = useRouterCompany();
-  const { user: currentUser } = useCurrentUser();
-
-  const searchInput = useRecoilValue(SearchInputState);
-  const [loading, setLoading] = useRecoilState(LoadingState('useSearchChannels'));
-
-  const [searched, setSearched] = useRecoilState(SearchChannelsResultsState(companyId));
-  const [recent, setRecent] = useRecoilState(RecentChannelsState(companyId));
-
-  const opt = { limit: 25, company_id: companyId };
-
-  const refresh = async () => {
-    setLoading(true);
-    const isRecent = searchInput.query?.trim()?.length === 0;
-
-    const query = searchInput.query;
-    currentQuery = query;
-
-    const response = await ChannelAPIClient.search(searchInput.query || null, opt);
-    let results = (response.resources || []).sort(
-      (a, b) =>
-        (b.last_activity || 0) / 100 +
-        (b.user_member?.last_access || 0) -
-        ((a.last_activity || 0) / 100 + (a.user_member?.last_access || 0)),
-    );
-
-    if (!isRecent) {
-      const users = await UserAPIClient.search<any>(searchInput.query, {
-        scope: 'company',
-        companyId,
-      });
-      results = [
-        ...results,
-        ...(users || []).map(user => createDirectChannelFromUsers(companyId, [currentUser, user])),
-      ];
-    }
-
-    const update = {
-      results,
-      nextPage: null,
-    };
-
-    if (currentQuery !== query) {
-      return;
-    }
-
-    if (!isRecent)
-      setSearched({
-        results: [...frontendSearch(companyId, query), ...update.results].sort(
-          (a, b) =>
-            distanceFromQuery([a.name].join(' '), query) -
-            distanceFromQuery([b.name].join(' '), query),
-        ),
-        nextPage: update.nextPage,
-      });
-    if (isRecent) setRecent(update);
-    setLoading(false);
-  };
-
-  const loadMore = async () => {
-    //Not implemented
-    console.error('Not implemented');
-  };
-
-  useGlobalEffect(
-    'useSearchChannels',
-    () => {
-      (async () => {
-        setLoading(true);
-        if (searchInput.query) {
-          setSearched({ results: frontendSearch(companyId, searchInput.query), nextPage: '' });
-          delayRequest('useSearchChannels', async () => {
-            await refresh();
-          });
-        } else {
-          refresh();
-        }
-      })();
-    },
-    [searchInput.query],
-  );
-
-  const channels = _.uniqBy(searchInput?.query ? searched.results : recent.results, a =>
-    a.visibility === 'direct' ? (a.members || []).slice().sort()?.join('+') : a.id,
-  );
-
-  return {
-    loading,
-    channels,
-    loadMore,
-    refresh,
-  };
-};
diff --git a/tdrive/frontend/src/app/features/search/hooks/use-search-drive-items.tsx b/tdrive/frontend/src/app/features/search/hooks/use-search-drive-items.tsx
index 626e6d9e..51f38be2 100644
--- a/tdrive/frontend/src/app/features/search/hooks/use-search-drive-items.tsx
+++ b/tdrive/frontend/src/app/features/search/hooks/use-search-drive-items.tsx
@@ -1,13 +1,13 @@
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
+import { delayRequest } from '@features/global/utils/managedSearchRequest';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { SearchInputState } from '../state/search-input';
-import { DriveApiClient } from 'app/features/drive/api-client/api-client';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
+import { DriveApiClient } from '@features/drive/api-client/api-client';
+import { LoadingState } from '@features/global/state/atoms/Loading';
 import { SearchDriveItemsResultsState } from '../state/search-drive-items-result';
 import { RecentDriveItemsState } from '../state/recent-drive-items';
 import _ from 'lodash';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import { useGlobalEffect } from '@features/global/hooks/use-global-effect';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import { useSearchModal } from './use-search';
 
 export const useSearchDriveItemsLoading = () => {
diff --git a/tdrive/frontend/src/app/features/search/hooks/use-search-files-or-medias.ts b/tdrive/frontend/src/app/features/search/hooks/use-search-files-or-medias.ts
deleted file mode 100644
index 3854ba5c..00000000
--- a/tdrive/frontend/src/app/features/search/hooks/use-search-files-or-medias.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { SearchInputState } from '../state/search-input';
-import MessagesAPIClient from 'app/features/messages/api/message-api-client';
-import { SearchFilesResultsState } from '../state/search-files-result';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { RecentFilesState } from '../state/recent-files';
-import { RecentMediasState } from '../state/recent-medias';
-import { SearchMediasResultsState } from '../state/search-medias-result';
-import _ from 'lodash';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import { useSearchModal } from './use-search';
-
-export const useSearchMessagesFilesLoading = () => {
-  return useRecoilValue(LoadingState('useSearchMessagesFilesOrMedias-' + 'files'));
-};
-
-export const useSearchMessagesMediasLoading = () => {
-  return useRecoilValue(LoadingState('useSearchMessagesFilesOrMedias-' + 'medias'));
-};
-
-let currentQuery = '';
-
-export const useSearchMessagesFilesOrMedias = (mode: 'files' | 'medias') => {
-  const companyId = useRouterCompany();
-  const { open } = useSearchModal();
-  const searchInput = useRecoilValue(SearchInputState);
-  const [loading, setLoading] = useRecoilState(
-    LoadingState('useSearchMessagesFilesOrMedias-' + mode),
-  );
-
-  const [searched, setSearched] = useRecoilState(
-    mode === 'files' ? SearchFilesResultsState(companyId) : SearchMediasResultsState(companyId),
-  );
-  const [recent, setRecent] = useRecoilState(
-    mode === 'files' ? RecentFilesState(companyId) : RecentMediasState(companyId),
-  );
-
-  const opt = _.omitBy(
-    {
-      limit: 25,
-      is_file: mode === 'files' || undefined,
-      is_media: mode === 'medias' || undefined,
-      workspace_id: searchInput.workspaceId,
-      channel_id: searchInput.channelId,
-    },
-    _.isUndefined,
-  );
-
-  const refresh = async () => {
-    setLoading(true);
-    const isRecent = searchInput.query?.trim()?.length === 0;
-
-    const query = searchInput.query;
-    currentQuery = query;
-
-    const response = await MessagesAPIClient.searchFile(searchInput.query || null, opt);
-    let results = response.resources || [];
-    if (isRecent)
-      results = results.sort(
-        (a, b) => (b?.message?.created_at || 0) - (a?.message?.created_at || 0),
-      );
-
-    const update = {
-      results,
-      nextPage: response.next_page_token,
-    };
-
-    if (currentQuery !== query) {
-      return;
-    }
-
-    if (!isRecent) setSearched(update);
-    if (isRecent) setRecent(update);
-    setLoading(false);
-  };
-
-  const loadMore = async () => {
-    //Not implemented
-    console.error('Not implemented');
-  };
-
-  useGlobalEffect(
-    'useSearchFiles' + mode,
-    () => {
-      if (open)
-        (async () => {
-          setLoading(true);
-          if (searchInput.query) {
-            delayRequest('useSearchFiles' + mode, async () => {
-              await refresh();
-            });
-          } else {
-            refresh();
-          }
-        })();
-    },
-    [searchInput.query, searchInput.channelId, searchInput.workspaceId, open],
-  );
-
-  return {
-    loading,
-    files: searchInput?.query ? searched.results : recent.results,
-    loadMore,
-    refresh,
-  };
-};
-
-export const useSearchMessagesMedias = () => {
-  return useSearchMessagesFilesOrMedias('medias');
-};
-
-export const useSearchMessagesFiles = () => {
-  return useSearchMessagesFilesOrMedias('files');
-};
diff --git a/tdrive/frontend/src/app/features/search/hooks/use-search-messages.ts b/tdrive/frontend/src/app/features/search/hooks/use-search-messages.ts
deleted file mode 100644
index 0ac26474..00000000
--- a/tdrive/frontend/src/app/features/search/hooks/use-search-messages.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { SearchInputState } from '../state/search-input';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import { SearchMessagesResultsState } from '../state/search-messages-result';
-import messageApiClient from 'app/features/messages/api/message-api-client';
-import { MessageExtended } from 'app/features/messages/types/message';
-import _ from 'lodash';
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-
-export const useSearchMessagesLoading = () => {
-  return useRecoilValue(LoadingState('useSearchMessages'));
-};
-
-let currentQuery = '';
-
-export const useSearchMessages = () => {
-  const companyId = useRouterCompany();
-  const searchInput = useRecoilValue(SearchInputState);
-  const [loading, setLoading] = useRecoilState(LoadingState('useSearchMessages'));
-
-  const [searched, setSearched] = useRecoilState(SearchMessagesResultsState(companyId));
-
-  const opt = _.omitBy(
-    {
-      limit: 50,
-      company_id: companyId,
-      workspace_id: searchInput.workspaceId,
-      channel_id: searchInput.channelId,
-    },
-    _.isUndefined,
-  );
-
-  const refresh = async () => {
-    setLoading(true);
-
-    const query = searchInput.query;
-    currentQuery = query;
-
-    let results: MessageExtended[] = [];
-
-    if (searchInput.query) {
-      const response = await messageApiClient.search(query, opt);
-      results = response.resources;
-    }
-
-    if (currentQuery === query) {
-      setSearched({
-        results,
-        nextPage: null,
-      });
-      setLoading(false);
-    }
-  };
-
-  const loadMore = async () => {
-    //Not implemented
-    console.error('Not implemented');
-  };
-
-  useGlobalEffect(
-    'useSearchMessages',
-    () => {
-      (async () => {
-        setLoading(true);
-        if (searchInput.query) {
-          delayRequest('useSearchMessages', async () => {
-            await refresh();
-          });
-        } else {
-          refresh();
-        }
-      })();
-    },
-    [searchInput.query, searchInput.channelId, searchInput.workspaceId],
-  );
-
-  return { loading, messages: searched.results, loadMore, refresh };
-};
diff --git a/tdrive/frontend/src/app/features/search/state/recent-channels.ts b/tdrive/frontend/src/app/features/search/state/recent-channels.ts
deleted file mode 100644
index e96ad553..00000000
--- a/tdrive/frontend/src/app/features/search/state/recent-channels.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import { atomFamily } from 'recoil';
-
-export type RecentChannels = {
-  results: ChannelType[];
-  nextPage: string | null;
-};
-
-export const RecentChannelsState = atomFamily<RecentChannels, string>({
-  key: 'RecentChannelsState',
-  default: () => ({ results: [], nextPage: '' }),
-});
diff --git a/tdrive/frontend/src/app/features/search/state/recent-drive-items.ts b/tdrive/frontend/src/app/features/search/state/recent-drive-items.ts
index 2f34ce6f..7cadf9f7 100644
--- a/tdrive/frontend/src/app/features/search/state/recent-drive-items.ts
+++ b/tdrive/frontend/src/app/features/search/state/recent-drive-items.ts
@@ -1,4 +1,4 @@
-import { DriveItem } from 'app/features/drive/types';
+import { DriveItem } from '@features/drive/types';
 import { atomFamily } from 'recoil';
 
 export type RecentDriveItems = {
@@ -9,4 +9,4 @@ export type RecentDriveItems = {
 export const RecentDriveItemsState = atomFamily<RecentDriveItems, string>({
   key: 'RecentDriveItemsState',
   default: () => ({ results: [], nextPage: '' }),
-});
\ No newline at end of file
+});
diff --git a/tdrive/frontend/src/app/features/search/state/recent-files.ts b/tdrive/frontend/src/app/features/search/state/recent-files.ts
deleted file mode 100644
index 3457f472..00000000
--- a/tdrive/frontend/src/app/features/search/state/recent-files.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { MessageFileType } from 'app/features/messages/types/message';
-import { atomFamily } from 'recoil';
-
-export type RecentFiles = {
-  results: MessageFileType[];
-  nextPage: string | null;
-};
-
-export const RecentFilesState = atomFamily<RecentFiles, string>({
-  key: 'RecentFilesState',
-  default: () => ({ results: [], nextPage: '' }),
-});
diff --git a/tdrive/frontend/src/app/features/search/state/recent-medias.ts b/tdrive/frontend/src/app/features/search/state/recent-medias.ts
deleted file mode 100644
index 054c387c..00000000
--- a/tdrive/frontend/src/app/features/search/state/recent-medias.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { MessageFileType } from 'app/features/messages/types/message';
-import { atomFamily } from 'recoil';
-
-export type RecentMedias = {
-  results: MessageFileType[];
-  nextPage: string | null;
-};
-
-export const RecentMediasState = atomFamily<RecentMedias, string>({
-  key: 'RecentMediasState',
-  default: () => ({ results: [], nextPage: '' }),
-});
diff --git a/tdrive/frontend/src/app/features/search/state/search-channels-result.ts b/tdrive/frontend/src/app/features/search/state/search-channels-result.ts
deleted file mode 100644
index b47d10aa..00000000
--- a/tdrive/frontend/src/app/features/search/state/search-channels-result.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import { atomFamily, selectorFamily } from 'recoil';
-
-export type SearchChannelsResults = {
-  results: ChannelType[];
-  nextPage: string | null;
-};
-
-export const SearchUsersChannelsResultsState = atomFamily<SearchChannelsResults, string>({
-  key: 'SearchChannelsResultsState',
-  default: () => ({ results: [], nextPage: '' }),
-});
-
-export const SearchChannelsResultsState = atomFamily<SearchChannelsResults, string>({
-  key: 'SearchChannelsResultsState',
-  default: () => ({ results: [], nextPage: '' }),
-});
-
-export const SearchChannelsResultsNumberSelector = selectorFamily<number, string>({
-  key: 'SearchChannelsResultsNumberSelector',
-  get:
-    (companyId: string) =>
-    ({ get }) => {
-      const snapshot = get(SearchChannelsResultsState(companyId));
-      return snapshot.results.length;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/search/state/search-drive-items-result.tsx b/tdrive/frontend/src/app/features/search/state/search-drive-items-result.tsx
index dc40bc9f..9e7ac68e 100644
--- a/tdrive/frontend/src/app/features/search/state/search-drive-items-result.tsx
+++ b/tdrive/frontend/src/app/features/search/state/search-drive-items-result.tsx
@@ -1,4 +1,4 @@
-import { DriveItem } from 'app/features/drive/types';
+import { DriveItem } from '@features/drive/types';
 import { atomFamily, selectorFamily } from 'recoil';
 
 export type SearchDriveItemsResults = {
diff --git a/tdrive/frontend/src/app/features/search/state/search-files-result.ts b/tdrive/frontend/src/app/features/search/state/search-files-result.ts
deleted file mode 100644
index e1c7c670..00000000
--- a/tdrive/frontend/src/app/features/search/state/search-files-result.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { MessageFileType } from 'app/features/messages/types/message';
-import { atomFamily, selectorFamily } from 'recoil';
-
-export type SearchFilesResults = {
-  results: MessageFileType[];
-  nextPage: string | null;
-};
-
-export const SearchFilesResultsState = atomFamily<SearchFilesResults, string>({
-  key: 'SearchFilesResultsState',
-  default: () => ({ results: [], nextPage: '' }),
-});
-
-export const SearchFilesResultsNumberSelector = selectorFamily<number, string>({
-  key: 'SearchFilesResultsNumberSelector',
-  get:
-    (companyId: string) =>
-    ({ get }) => {
-      const snapshot = get(SearchFilesResultsState(companyId));
-      return snapshot.results.length;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/search/state/search-medias-result.ts b/tdrive/frontend/src/app/features/search/state/search-medias-result.ts
deleted file mode 100644
index 80c5ee51..00000000
--- a/tdrive/frontend/src/app/features/search/state/search-medias-result.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { MessageFileType } from 'app/features/messages/types/message';
-import { atomFamily, selectorFamily } from 'recoil';
-
-export type SearchMediasResults = {
-  results: MessageFileType[];
-  nextPage: string | null;
-};
-
-export const SearchMediasResultsState = atomFamily<SearchMediasResults, string>({
-  key: 'SearchMediasResultsState',
-  default: () => ({ results: [], nextPage: '' }),
-});
-
-export const SearchMediasResultsNumberSelector = selectorFamily<number, string>({
-  key: 'SearchMediasResultsNumberSelector',
-  get:
-    (companyId: string) =>
-    ({ get }) => {
-      const snapshot = get(SearchMediasResultsState(companyId));
-      return snapshot.results.length;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/search/state/search-messages-result.ts b/tdrive/frontend/src/app/features/search/state/search-messages-result.ts
deleted file mode 100644
index f33bbe8a..00000000
--- a/tdrive/frontend/src/app/features/search/state/search-messages-result.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Message } from 'app/features/messages/types/message';
-import { atomFamily, selectorFamily } from 'recoil';
-
-export type SearchMessagesResults = {
-  results: Message[];
-  nextPage: string | null;
-};
-
-export const SearchMessagesResultsState = atomFamily<SearchMessagesResults, string>({
-  key: 'SearchMessagesResultsState',
-  default: () => ({ results: [], nextPage: '' }),
-});
-
-export const SearchMessagesResultsNumberSelector = selectorFamily<number, string>({
-  key: 'SearchMessagesResultsNumberSelector',
-  get:
-    (companyId: string) =>
-    ({ get }) => {
-      const snapshot = get(SearchMessagesResultsState(companyId));
-      return snapshot.results.length;
-    },
-});
diff --git a/tdrive/frontend/src/app/features/tabs/api/tabs-api-client.ts b/tdrive/frontend/src/app/features/tabs/api/tabs-api-client.ts
deleted file mode 100644
index 01da83e3..00000000
--- a/tdrive/frontend/src/app/features/tabs/api/tabs-api-client.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { TabType } from 'app/features/tabs/types/tab';
-import Api from '../../global/framework/api-service';
-import { TdriveService } from '../../global/framework/registry-decorator-service';
-import { WebsocketRoom } from '../../global/types/websocket-types';
-
-type TabKey = {
-  companyId: string;
-  workspaceId: string;
-  channelId: string;
-};
-
-@TdriveService('TabsAPIClientService')
-class TabsAPIClient {
-  private readonly prefixUrl: string = '/internal/services/channels/v1';
-  private realtime: Map<string, WebsocketRoom[]> = new Map();
-
-  websockets(channelId: string) {
-    return this.realtime.get(channelId) || [];
-  }
-
-  async save({ companyId, workspaceId, channelId }: TabKey, tab: TabType) {
-    await Api.post<{ resource: TabType }, { resource: TabType }>(
-      `${
-        this.prefixUrl
-      }/companies/${companyId}/workspaces/${workspaceId}/channels/${channelId}/tabs${
-        tab.id ? '/' + tab.id : ''
-      }`,
-      { resource: tab },
-    );
-  }
-
-  async list({ companyId, workspaceId, channelId }: TabKey): Promise<TabType[]> {
-    const response = await Api.get<{ resources: TabType[]; websockets: WebsocketRoom[] }>(
-      `${this.prefixUrl}/companies/${companyId}/workspaces/${workspaceId}/channels/${channelId}/tabs?websockets=1`,
-    );
-    this.realtime.set(channelId, response.websockets);
-    return response.resources && response.resources.length ? response.resources : [];
-  }
-
-  async remove({ companyId, workspaceId, channelId }: TabKey, tabId: string) {
-    await Api.delete(
-      `${this.prefixUrl}/companies/${companyId}/workspaces/${workspaceId}/channels/${channelId}/tabs/${tabId}`,
-    );
-  }
-}
-
-export default new TabsAPIClient();
diff --git a/tdrive/frontend/src/app/features/tabs/hooks/use-tabs.ts b/tdrive/frontend/src/app/features/tabs/hooks/use-tabs.ts
deleted file mode 100644
index 47d9a678..00000000
--- a/tdrive/frontend/src/app/features/tabs/hooks/use-tabs.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useRecoilState } from 'recoil';
-
-import { TabType } from 'app/features/tabs/types/tab';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import TabsAPIClients from 'app/features/tabs/api/tabs-api-client';
-import { AtomTabKey, TabState } from '../state/tabs';
-import useRouterChannel from '../../router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-
-export default function useTabsCommons() {
-  const companyId = useRouterCompany();
-  const workspaceId = useRouterWorkspace();
-  const channelId = useRouterChannel();
-  const context: AtomTabKey = { companyId, workspaceId, channelId };
-
-  const [tabs, setTabs] = useRecoilState(TabState(context));
-
-  const save = async (tab: TabType) => {
-    await TabsAPIClients.save({ companyId, workspaceId, channelId }, tab);
-    await refresh();
-  };
-
-  const remove = async (tabId: string) => {
-    await TabsAPIClients.remove({ companyId, workspaceId, channelId }, tabId);
-    await refresh();
-  };
-
-  const refresh = async () => {
-    const tabsRefreshed = await TabsAPIClients.list({ companyId, workspaceId, channelId });
-    if (tabsRefreshed) setTabs(tabsRefreshed);
-  };
-
-  return { tabs, save, refresh, remove };
-}
-
-export function useTabs() {
-  const channelId = useRouterChannel();
-  const { tabs, save, refresh, remove } = useTabsCommons();
-  useRealtimeRoom<TabType>(TabsAPIClients.websockets(channelId)[0], 'UseTabs', () => refresh());
-
-  return { tabs, save, refresh, remove };
-}
-
-export function useTab(tabId: string) {
-  const { tabs, remove, save } = useTabs();
-  return {
-    tab: tabs.find(t => t.id === tabId),
-    remove: () => {
-      remove(tabId);
-    },
-    save: save,
-  };
-}
diff --git a/tdrive/frontend/src/app/features/tabs/state/tabs.ts b/tdrive/frontend/src/app/features/tabs/state/tabs.ts
deleted file mode 100644
index 8029123b..00000000
--- a/tdrive/frontend/src/app/features/tabs/state/tabs.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { atomFamily } from 'recoil';
-
-import { TabType } from 'app/features/tabs/types/tab';
-import TabsAPIClients from 'app/features/tabs/api/tabs-api-client';
-
-export type AtomTabKey = { companyId: string; workspaceId: string; channelId: string };
-
-export const TabState = atomFamily<TabType[], AtomTabKey>({
-  key: 'TabState',
-  default: async ({ companyId, workspaceId, channelId }) => {
-    return await TabsAPIClients.list({ companyId, workspaceId, channelId });
-  },
-});
diff --git a/tdrive/frontend/src/app/features/tabs/types/tab.ts b/tdrive/frontend/src/app/features/tabs/types/tab.ts
deleted file mode 100644
index 6cb3d094..00000000
--- a/tdrive/frontend/src/app/features/tabs/types/tab.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type TabType = {
-  id?: string;
-  channel_id?: string;
-  application_id?: string;
-  order?: string;
-  owner?: string;
-  name?: string;
-  configuration?: object;
-};
diff --git a/tdrive/frontend/src/app/features/users/api/online-user-realtime-api-client.ts b/tdrive/frontend/src/app/features/users/api/online-user-realtime-api-client.ts
index e4cb5758..f0dde082 100644
--- a/tdrive/frontend/src/app/features/users/api/online-user-realtime-api-client.ts
+++ b/tdrive/frontend/src/app/features/users/api/online-user-realtime-api-client.ts
@@ -1,6 +1,6 @@
 import WebSocketService from '../../global/services/websocket-service';
 import Logger from '../../global/framework/logger-service';
-import UsersService from 'app/features/users/services/current-user-service';
+import UsersService from '@features/users/services/current-user-service';
 const logger = Logger.getLogger('OnlineUsersRealtimeAPI');
 
 export type GetUserRequestType = string;
diff --git a/tdrive/frontend/src/app/features/users/api/user-api-client.ts b/tdrive/frontend/src/app/features/users/api/user-api-client.ts
index 0b098410..54184efb 100644
--- a/tdrive/frontend/src/app/features/users/api/user-api-client.ts
+++ b/tdrive/frontend/src/app/features/users/api/user-api-client.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { CompanyType } from 'app/features/companies/types/company';
-import { UserPreferencesType, UserType } from 'app/features/users/types/user';
+import { CompanyType } from '@features/companies/types/company';
+import { UserPreferencesType, UserType } from '@features/users/types/user';
 import Api from '../../global/framework/api-service';
 import { TdriveService } from '../../global/framework/registry-decorator-service';
 import { WebsocketRoom } from '../../global/types/websocket-types';
diff --git a/tdrive/frontend/src/app/features/users/api/user-notification-api-client.ts b/tdrive/frontend/src/app/features/users/api/user-notification-api-client.ts
index af49f781..6f15bbbf 100644
--- a/tdrive/frontend/src/app/features/users/api/user-notification-api-client.ts
+++ b/tdrive/frontend/src/app/features/users/api/user-notification-api-client.ts
@@ -1,7 +1,7 @@
 import Api from '../../global/framework/api-service';
-import { NotificationType } from 'app/features/users/types/notification-types';
+import { NotificationType } from '@features/users/types/notification-types';
 import { TdriveService } from '../../global/framework/registry-decorator-service';
-import { WebsocketRoom } from 'app/features/global/types/websocket-types';
+import { WebsocketRoom } from '@features/global/types/websocket-types';
 
 @TdriveService('UserNotificationAPIClientService')
 class UserNotificationAPIClient {
@@ -29,15 +29,15 @@ class UserNotificationAPIClient {
 
   async acknowledge(notification: NotificationType): Promise<void> {
     const { message_id, channel_id, company_id, thread_id, workspace_id } = notification;
-    await Api.post<{ message_id: string, thread_id: string, channel_id: string, workspace_id: string}, boolean>(
-      `/internal/services/notifications/v1/badges/${company_id}/acknowledge`,
-      {
-        channel_id,
-        workspace_id,
-        thread_id,
-        message_id,
-      }
-    );
+    await Api.post<
+      { message_id: string; thread_id: string; channel_id: string; workspace_id: string },
+      boolean
+    >(`/internal/services/notifications/v1/badges/${company_id}/acknowledge`, {
+      channel_id,
+      workspace_id,
+      thread_id,
+      message_id,
+    });
   }
 }
 
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-current-user.ts b/tdrive/frontend/src/app/features/users/hooks/use-current-user.ts
index 26efb69a..cc678c93 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-current-user.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-current-user.ts
@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef } from 'react';
-import LoginService from 'app/features/auth/login-service';
-import UserAPIClient from 'app/features/users/api/user-api-client';
+import LoginService from '@features/auth/login-service';
+import UserAPIClient from '@features/users/api/user-api-client';
 import { useRecoilState } from 'recoil';
 import { CurrentUserState } from '../state/atoms/current-user';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import Languages from 'app/features/global/services/languages-service';
-import ConfiguratorsManager from 'app/deprecated/Configurators/ConfiguratorsManager.js';
-import { RealtimeApplicationEvent } from 'app/features/global/types/realtime-types';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
+import Languages from '@features/global/services/languages-service';
+import ConfiguratorsManager from '@deprecated/Configurators/ConfiguratorsManager.js';
+import { RealtimeApplicationEvent } from '@features/global/types/realtime-types';
 import { useSetUserList } from './use-user-list';
 
 export const useCurrentUser = () => {
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-notifications.ts b/tdrive/frontend/src/app/features/users/hooks/use-notifications.ts
index e70487a5..7f95b701 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-notifications.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-notifications.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import { useGlobalEffect } from '@features/global/hooks/use-global-effect';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import _ from 'lodash';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 import userNotificationApiClient from '../api/user-notification-api-client';
@@ -13,12 +13,12 @@ import {
   NotificationsWorkspaceBadgesSelector,
 } from '../state/atoms/notifications';
 import { NotificationType } from '../types/notification-types';
-import ElectronService from 'app/features/global/framework/electron-service';
-import windowState from 'app/features/global/utils/window';
+import ElectronService from '@features/global/framework/electron-service';
+import windowState from '@features/global/utils/window';
 import RouterService, { ClientStateType } from '../../router/services/router-service';
 import { pushDesktopNotification } from '../services/push-desktop-notification';
-import { RouterState } from 'app/features/router/state/atoms/router';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
+import { RouterState } from '@features/router/state/atoms/router';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
 
 export let removeBadgesNow: (type: 'company' | 'workspace' | 'channel', id: string) => void = () =>
   undefined;
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-online-users.ts b/tdrive/frontend/src/app/features/users/hooks/use-online-users.ts
index 7009348d..b051f8d0 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-online-users.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-online-users.ts
@@ -4,8 +4,8 @@
 import { useCallback, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
-import Logger from 'app/features/global/framework/logger-service';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
+import Logger from '@features/global/framework/logger-service';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
 import { OnlineUsersState, OnlineUserType } from '../state/atoms/online-users';
 import useWebSocket from '../../global/hooks/use-websocket';
 import {
@@ -14,7 +14,7 @@ import {
   RealtimeUpdateMessageType,
 } from '../../../features/users/api/online-user-realtime-api-client';
 import JWTStorage from '../../auth/jwt-storage-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 const logger = Logger.getLogger('useOnlineUsers');
 
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-search-user-list.ts b/tdrive/frontend/src/app/features/users/hooks/use-search-user-list.ts
index 2252288b..ce0daa5b 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-search-user-list.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-search-user-list.ts
@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useState } from 'react';
 
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import { UserType } from 'app/features/users/types/user';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import { UserType } from '@features/users/types/user';
 import { getCurrentUserList, setUserList, useSetUserList, useUserList } from './use-user-list';
 import UserAPIClient, { SearchContextType } from '../api/user-api-client';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import { distanceFromQuery, matchQuery } from 'app/features/global/utils/strings';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
+import { delayRequest } from '@features/global/utils/managedSearchRequest';
+import { distanceFromQuery, matchQuery } from '@features/global/utils/strings';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 import _ from 'lodash';
 
 export const searchBackend = async (
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-set-last-workspace-preferences.ts b/tdrive/frontend/src/app/features/users/hooks/use-set-last-workspace-preferences.ts
index 9f9328e0..fbc489d3 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-set-last-workspace-preferences.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-set-last-workspace-preferences.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import UserAPIClient from 'app/features/users/api/user-api-client';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
+import UserAPIClient from '@features/users/api/user-api-client';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 
 export const useSetLastWorkspacePreference = () => {
   const companyId = useRouterCompany();
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-user-list.ts b/tdrive/frontend/src/app/features/users/hooks/use-user-list.ts
index a7b2f0cc..b1fccbfe 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-user-list.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-user-list.ts
@@ -2,12 +2,12 @@ import { useEffect } from 'react';
 import { cloneDeep, isEqual, uniqBy } from 'lodash';
 import { useRecoilCallback, useRecoilValueLoadable } from 'recoil';
 
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import { UserCompanyType, UserType, UserWorkspaceType } from 'app/features/users/types/user';
-import WorkspaceUserAPIClient from 'app/features/workspace-members/api/workspace-members-api-client';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import { UserCompanyType, UserType, UserWorkspaceType } from '@features/users/types/user';
+import WorkspaceUserAPIClient from '@features/workspace-members/api/workspace-members-api-client';
 import { UserListState } from '../state/atoms/user-list';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
 import _ from 'lodash';
 
 export const usePreloadSomeUsers = () => {
@@ -73,13 +73,7 @@ export function useSetUserList(key: string) {
 
     if (nextList && nextList.length) {
       const nextListMerged = nextList.map(u =>
-        cloneDeep(
-          _.merge(
-            {},
-            currentList.find(cu => cu.id === u.id) || {},
-            u,
-          ),
-        ),
+        cloneDeep(_.merge({}, currentList.find(cu => cu.id === u.id) || {}, u)),
       );
 
       const newList = _.uniqBy([...nextListMerged, ...currentList], 'id')
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-user.ts b/tdrive/frontend/src/app/features/users/hooks/use-user.ts
index c1b7083d..e566c476 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-user.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-user.ts
@@ -1,9 +1,9 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
-import { UserType } from 'app/features/users/types/user';
+import { useGlobalEffect } from '@features/global/hooks/use-global-effect';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
+import { LoadingState } from '@features/global/state/atoms/Loading';
+import { UserType } from '@features/users/types/user';
 import UserAPIClient from '../api/user-api-client';
 import { UserSelector, UserByUsernameSelector } from '../state/selectors/user-selector';
 
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-users-listener.ts b/tdrive/frontend/src/app/features/users/hooks/use-users-listener.ts
index f1b6527a..fed5c751 100644
--- a/tdrive/frontend/src/app/features/users/hooks/use-users-listener.ts
+++ b/tdrive/frontend/src/app/features/users/hooks/use-users-listener.ts
@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { isArray } from 'lodash';
-import UserListenerService from 'app/features/users/services/listen-users-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
-import UsersService from 'app/features/users/services/current-user-service';
-import userAsyncGet from 'app/features/users/utils/async-get';
+import UserListenerService from '@features/users/services/listen-users-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
+import UsersService from '@features/users/services/current-user-service';
+import userAsyncGet from '@features/users/utils/async-get';
 
 export const useUsersListener = (usersIds: string[] = []) => {
   const users = (isArray(usersIds) ? usersIds : []).filter(
diff --git a/tdrive/frontend/src/app/features/users/services/current-user-service.ts b/tdrive/frontend/src/app/features/users/services/current-user-service.ts
index 73138343..a82a8f11 100755
--- a/tdrive/frontend/src/app/features/users/services/current-user-service.ts
+++ b/tdrive/frontend/src/app/features/users/services/current-user-service.ts
@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Login from 'app/features/auth/login-service';
-import Collections, { Collection } from 'app/deprecated/CollectionsV1/Collections/Collections';
-import Api from 'app/features/global/framework/api-service';
-import Languages from 'app/features/global/services/languages-service';
-import { UserType } from 'app/features/users/types/user';
-import { TdriveService } from 'app/features/global/framework/registry-decorator-service';
-import { addApiUrlIfNeeded } from 'app/features/global/utils/URLUtils';
+import Login from '@features/auth/login-service';
+import Collections, { Collection } from '@deprecated/CollectionsV1/Collections/Collections';
+import Api from '@features/global/framework/api-service';
+import Languages from '@features/global/services/languages-service';
+import { UserType } from '@features/users/types/user';
+import { TdriveService } from '@features/global/framework/registry-decorator-service';
+import { addApiUrlIfNeeded } from '@features/global/utils/URLUtils';
 import { getUser } from '../hooks/use-user-list';
-import { getGradient } from 'app/atoms/avatar';
+import { getGradient } from '@atoms/avatar';
 
 type SearchQueryType = {
   searching: boolean;
diff --git a/tdrive/frontend/src/app/features/users/services/listen-users-service.ts b/tdrive/frontend/src/app/features/users/services/listen-users-service.ts
index 8d7a1dc2..d98ba887 100755
--- a/tdrive/frontend/src/app/features/users/services/listen-users-service.ts
+++ b/tdrive/frontend/src/app/features/users/services/listen-users-service.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ws from 'app/deprecated/websocket/websocket';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import ws from '@deprecated/websocket/websocket';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
 import UserService from './current-user-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import userAsyncGet from 'app/features/users/utils/async-get';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import userAsyncGet from '@features/users/utils/async-get';
 
 type Timeout = ReturnType<typeof setTimeout>;
 
diff --git a/tdrive/frontend/src/app/features/users/services/push-desktop-notification.tsx b/tdrive/frontend/src/app/features/users/services/push-desktop-notification.tsx
index 3c3169b7..450f9ac3 100644
--- a/tdrive/frontend/src/app/features/users/services/push-desktop-notification.tsx
+++ b/tdrive/frontend/src/app/features/users/services/push-desktop-notification.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { notification as antNotification } from 'antd';
 import RouterService, { ClientStateType } from '../../router/services/router-service';
-import popupManager from 'app/deprecated/popupManager/popupManager';
+import popupManager from '@deprecated/popupManager/popupManager';
 import emojione from 'emojione';
 import React from 'react';
 import { X } from 'react-feather';
diff --git a/tdrive/frontend/src/app/features/users/state/atoms/current-user.ts b/tdrive/frontend/src/app/features/users/state/atoms/current-user.ts
index 10b51d36..5d1502eb 100644
--- a/tdrive/frontend/src/app/features/users/state/atoms/current-user.ts
+++ b/tdrive/frontend/src/app/features/users/state/atoms/current-user.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
-import { UserType } from 'app/features/users/types/user';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import { UserType } from '@features/users/types/user';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
 import _ from 'lodash';
 
 export const CurrentUserState = atom<UserType | undefined>({
diff --git a/tdrive/frontend/src/app/features/users/state/atoms/online-users.ts b/tdrive/frontend/src/app/features/users/state/atoms/online-users.ts
index 1b82df65..5e44180f 100644
--- a/tdrive/frontend/src/app/features/users/state/atoms/online-users.ts
+++ b/tdrive/frontend/src/app/features/users/state/atoms/online-users.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { atom, DefaultValue, selector, selectorFamily } from 'recoil';
 
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 import { CurrentUserState } from './current-user';
 
 export type OnlineUserType = Pick<UserType, 'id' | 'connected'> & {
diff --git a/tdrive/frontend/src/app/features/users/state/atoms/user-list.ts b/tdrive/frontend/src/app/features/users/state/atoms/user-list.ts
index 5bfe58bc..c667a089 100644
--- a/tdrive/frontend/src/app/features/users/state/atoms/user-list.ts
+++ b/tdrive/frontend/src/app/features/users/state/atoms/user-list.ts
@@ -1,5 +1,5 @@
 import { atom } from 'recoil';
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 
 export const UserListState = atom<UserType[]>({
   key: 'UserListState',
diff --git a/tdrive/frontend/src/app/features/users/state/context/user-context-state.ts b/tdrive/frontend/src/app/features/users/state/context/user-context-state.ts
index 37f535fb..dd3ec564 100644
--- a/tdrive/frontend/src/app/features/users/state/context/user-context-state.ts
+++ b/tdrive/frontend/src/app/features/users/state/context/user-context-state.ts
@@ -1,7 +1,7 @@
-import { CompanyType } from 'app/features/companies/types/company';
-import { UserType } from 'app/features/users/types/user';
-import { UserContext } from 'app/features/users/types/user-context';
-import { WorkspaceType } from 'app/features/workspaces/types/workspace';
+import { CompanyType } from '@features/companies/types/company';
+import { UserType } from '@features/users/types/user';
+import { UserContext } from '@features/users/types/user-context';
+import { WorkspaceType } from '@features/workspaces/types/workspace';
 
 class UserContextState implements UserContext {
   private _user: UserType | undefined;
diff --git a/tdrive/frontend/src/app/features/users/state/integration/user-context.tsx b/tdrive/frontend/src/app/features/users/state/integration/user-context.tsx
index d6757d27..dc52adb1 100644
--- a/tdrive/frontend/src/app/features/users/state/integration/user-context.tsx
+++ b/tdrive/frontend/src/app/features/users/state/integration/user-context.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
-import { useOnlineUsers } from 'app/features/users/hooks/use-online-users';
+import { useOnlineUsers } from '@features/users/hooks/use-online-users';
 
 /**
  * This hook will be global to application
diff --git a/tdrive/frontend/src/app/features/users/state/selectors/search-user.ts b/tdrive/frontend/src/app/features/users/state/selectors/search-user.ts
index fa18713a..3a0536ca 100644
--- a/tdrive/frontend/src/app/features/users/state/selectors/search-user.ts
+++ b/tdrive/frontend/src/app/features/users/state/selectors/search-user.ts
@@ -1,7 +1,7 @@
 import { selectorFamily } from 'recoil';
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 
-import { UserListState } from 'app/features/users/state/atoms/user-list';
+import { UserListState } from '@features/users/state/atoms/user-list';
 
 /**
  * Search users locally
diff --git a/tdrive/frontend/src/app/features/users/state/selectors/user-selector.ts b/tdrive/frontend/src/app/features/users/state/selectors/user-selector.ts
index 3d704c26..d785d739 100644
--- a/tdrive/frontend/src/app/features/users/state/selectors/user-selector.ts
+++ b/tdrive/frontend/src/app/features/users/state/selectors/user-selector.ts
@@ -1,6 +1,6 @@
 import { selectorFamily } from 'recoil';
-import { UserListState } from 'app/features/users/state/atoms/user-list';
-import { UserType } from 'app/features/users/types/user';
+import { UserListState } from '@features/users/state/atoms/user-list';
+import { UserType } from '@features/users/types/user';
 
 export const UserSelector = selectorFamily<UserType | undefined, string>({
   key: 'UserSelector',
diff --git a/tdrive/frontend/src/app/features/users/types/user-context.ts b/tdrive/frontend/src/app/features/users/types/user-context.ts
index 88e8386c..3840757b 100644
--- a/tdrive/frontend/src/app/features/users/types/user-context.ts
+++ b/tdrive/frontend/src/app/features/users/types/user-context.ts
@@ -1,7 +1,7 @@
 import { CompanyType } from '../../companies/types/company';
 import { PendingFileRecoilType } from '../../files/types/file';
 
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 import { WorkspaceType } from '../../workspaces/types/workspace';
 
 export type UserContext = {
diff --git a/tdrive/frontend/src/app/features/users/types/user.ts b/tdrive/frontend/src/app/features/users/types/user.ts
index 5c603512..deed6729 100644
--- a/tdrive/frontend/src/app/features/users/types/user.ts
+++ b/tdrive/frontend/src/app/features/users/types/user.ts
@@ -1,10 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  CompanyRoleType,
-  CompanyStatusType,
-  CompanyType,
-} from 'app/features/companies/types/company';
-import { WorkspaceType } from 'app/features/workspaces/types/workspace';
+import { CompanyRoleType, CompanyStatusType, CompanyType } from '@features/companies/types/company';
+import { WorkspaceType } from '@features/workspaces/types/workspace';
 
 export type UserPreferencesType = null | {
   locale?: string;
diff --git a/tdrive/frontend/src/app/features/users/utils/async-get.ts b/tdrive/frontend/src/app/features/users/utils/async-get.ts
index bc84e139..8a0bc685 100644
--- a/tdrive/frontend/src/app/features/users/utils/async-get.ts
+++ b/tdrive/frontend/src/app/features/users/utils/async-get.ts
@@ -1,6 +1,6 @@
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 import UserAPIClient from '../api/user-api-client';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
 
 const currentUserRequests: { [key: string]: PromiseLike<UserType | null> } = {};
 const usersCollection = Collections.get('users');
diff --git a/tdrive/frontend/src/app/features/viewer/api/viewer-api-client.ts b/tdrive/frontend/src/app/features/viewer/api/viewer-api-client.ts
index 60db8521..d0932db7 100644
--- a/tdrive/frontend/src/app/features/viewer/api/viewer-api-client.ts
+++ b/tdrive/frontend/src/app/features/viewer/api/viewer-api-client.ts
@@ -1,15 +1,12 @@
-import { ChannelType } from 'app/features/channels/types/channel';
-import { MessageFileType, MessageWithReplies } from 'app/features/messages/types/message';
-import { UserType } from 'app/features/users/types/user';
+import { UserType } from '@features/users/types/user';
 import Api from '../../global/framework/api-service';
 import { TdriveService } from '../../global/framework/registry-decorator-service';
+import { AttachedFileType } from 'app/features/files/types/file';
 
 const MESSAGES_PREFIX = '/internal/services/messages/v1/companies';
 
-export type MessageFileDetails = MessageFileType & {
+export type MessageFileDetails = AttachedFileType & {
   user: UserType;
-  message: MessageWithReplies;
-  channel: ChannelType;
   navigation: {
     previous: null | {
       message_id: string;
diff --git a/tdrive/frontend/src/app/features/viewer/hooks/use-viewer.ts b/tdrive/frontend/src/app/features/viewer/hooks/use-viewer.ts
index f43d6782..093def8b 100644
--- a/tdrive/frontend/src/app/features/viewer/hooks/use-viewer.ts
+++ b/tdrive/frontend/src/app/features/viewer/hooks/use-viewer.ts
@@ -1,10 +1,10 @@
-import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
-import { MessageFileType } from 'app/features/messages/types/message';
+import { useGlobalEffect } from '@features/global/hooks/use-global-effect';
+import { AttachedFileType } from '@features/files/types/file';
 import ViewerAPIClient, { MessageFileDetails } from '../api/viewer-api-client';
 import { atom, useRecoilState } from 'recoil';
-import FileUploadApiClient from 'app/features/files/api/file-upload-api-client';
-import FileUploadService from 'app/features/files/services/file-upload-service';
-import { LoadingState } from 'app/features/global/state/atoms/Loading';
+import FileUploadApiClient from '@features/files/api/file-upload-api-client';
+import FileUploadService from '@features/files/services/file-upload-service';
+import { LoadingState } from '@features/global/state/atoms/Loading';
 
 export const FileViewerState = atom<{
   file: null | { company_id?: string; message_id?: string; id?: string; drive_id?: string };
@@ -23,7 +23,7 @@ export const useFileViewerModal = () => {
   const [status, setStatus] = useRecoilState(FileViewerState);
 
   return {
-    open: (file: MessageFileType) => {
+    open: (file: AttachedFileType) => {
       if (file.metadata?.source === 'internal') setStatus({ file, loading: true });
     },
     close: () => setStatus({ file: null, loading: true }),
diff --git a/tdrive/frontend/src/app/features/workspace-members/api/workspace-members-api-client.ts b/tdrive/frontend/src/app/features/workspace-members/api/workspace-members-api-client.ts
index 9c189394..b7d40040 100644
--- a/tdrive/frontend/src/app/features/workspace-members/api/workspace-members-api-client.ts
+++ b/tdrive/frontend/src/app/features/workspace-members/api/workspace-members-api-client.ts
@@ -1,8 +1,5 @@
 import Api from '../../global/framework/api-service';
-import {
-  WorkspacePendingUserType,
-  WorkspaceUserType,
-} from 'app/features/workspaces/types/workspace';
+import { WorkspacePendingUserType, WorkspaceUserType } from '@features/workspaces/types/workspace';
 import { TdriveService } from '../../global/framework/registry-decorator-service';
 
 const PREFIX = '/internal/services/workspaces/v1/companies';
diff --git a/tdrive/frontend/src/app/features/workspace-members/services/workspace-members-service.ts b/tdrive/frontend/src/app/features/workspace-members/services/workspace-members-service.ts
index 1caa2649..fae4e4bd 100755
--- a/tdrive/frontend/src/app/features/workspace-members/services/workspace-members-service.ts
+++ b/tdrive/frontend/src/app/features/workspace-members/services/workspace-members-service.ts
@@ -2,18 +2,18 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Languages from 'app/features/global/services/languages-service';
-import Observable from 'app/deprecated/CollectionsV1/observable.js';
-import User from 'app/features/users/services/current-user-service';
-import Api from 'app/features/global/framework/api-service';
-import ws from 'app/deprecated/websocket/websocket.js';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import workspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import Numbers from 'app/features/global/utils/Numbers';
-import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
-import CurrentUser from 'app/deprecated/user/CurrentUser';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
+import Languages from '@features/global/services/languages-service';
+import Observable from '@deprecated/CollectionsV1/observable.js';
+import User from '@features/users/services/current-user-service';
+import Api from '@features/global/framework/api-service';
+import ws from '@deprecated/websocket/websocket.js';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import workspaceService from '@deprecated/workspaces/workspaces.jsx';
+import Numbers from '@features/global/utils/Numbers';
+import WorkspaceUserRights from '@features/workspaces/services/workspace-user-rights-service';
+import CurrentUser from '@deprecated/user/CurrentUser';
+import AlertManager from '@features/global/services/alert-manager-service';
+import Globals from '@features/global/services/globals-tdrive-app-service';
 
 const prefixRoute = '/internal/services/workspaces/v1';
 
diff --git a/tdrive/frontend/src/app/features/workspaces/api/workspace-api-client.ts b/tdrive/frontend/src/app/features/workspaces/api/workspace-api-client.ts
index 702c9bd7..df92420c 100644
--- a/tdrive/frontend/src/app/features/workspaces/api/workspace-api-client.ts
+++ b/tdrive/frontend/src/app/features/workspaces/api/workspace-api-client.ts
@@ -1,6 +1,6 @@
 import Api from '../../global/framework/api-service';
-import { CompanyType } from 'app/features/companies/types/company';
-import { WorkspaceType } from 'app/features/workspaces/types/workspace';
+import { CompanyType } from '@features/companies/types/company';
+import { WorkspaceType } from '@features/workspaces/types/workspace';
 import { TdriveService } from '../../global/framework/registry-decorator-service';
 import { WebsocketRoom } from '../../global/types/websocket-types';
 import _ from 'lodash';
@@ -15,11 +15,11 @@ export type UpdateWorkspaceBody = {
 
 export type UpdateWorkspaceInviteDomainBody = {
   domain: string;
-}
+};
 
 type UpdateWorkspaceInviteDomainResponse = {
   status: string;
-}
+};
 
 @TdriveService('WorkspaceAPIClientService')
 class WorkspaceAPIClient {
@@ -117,15 +117,20 @@ class WorkspaceAPIClient {
     ).then(result => result.resources);
   }
 
-  setInvitationDomain =  async (companyId: string, workspaceId: string, domain: string): Promise<void> => {
-    const response = await Api.post<UpdateWorkspaceInviteDomainBody, UpdateWorkspaceInviteDomainResponse>(
-      `${PREFIX}/${companyId}/workspaces/${workspaceId}/invite_domain`, { domain }
-    );
+  setInvitationDomain = async (
+    companyId: string,
+    workspaceId: string,
+    domain: string,
+  ): Promise<void> => {
+    const response = await Api.post<
+      UpdateWorkspaceInviteDomainBody,
+      UpdateWorkspaceInviteDomainResponse
+    >(`${PREFIX}/${companyId}/workspaces/${workspaceId}/invite_domain`, { domain });
 
-    if(response.status !== "success") {
-      throw Error("failed to set invitation domain")
+    if (response.status !== 'success') {
+      throw Error('failed to set invitation domain');
     }
-  }
+  };
 }
 
 export default new WorkspaceAPIClient();
diff --git a/tdrive/frontend/src/app/features/workspaces/hooks/use-workspaces.ts b/tdrive/frontend/src/app/features/workspaces/hooks/use-workspaces.ts
index 498ba428..c39cec53 100644
--- a/tdrive/frontend/src/app/features/workspaces/hooks/use-workspaces.ts
+++ b/tdrive/frontend/src/app/features/workspaces/hooks/use-workspaces.ts
@@ -1,22 +1,22 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { WorkspaceType } from 'app/features/workspaces/types/workspace';
+import { WorkspaceType } from '@features/workspaces/types/workspace';
 import { WorkspaceListStateFamily } from '../state/workspace-list';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
-import { useRealtimeRoom } from 'app/features/global/hooks/use-realtime';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import RouterService from 'app/features/router/services/router-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
+import { useRealtimeRoom } from '@features/global/hooks/use-realtime';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import RouterService from '@features/router/services/router-service';
 import _ from 'lodash';
-import WorkspacesService from 'app/deprecated/workspaces/workspaces.jsx';
+import WorkspacesService from '@deprecated/workspaces/workspaces.jsx';
 import AccessRightsService, {
   RightsOrNone,
-} from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import WorkspaceAPIClient from 'app/features/workspaces/api/workspace-api-client';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
+} from '@features/workspace-members/services/workspace-members-access-rights-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import WorkspaceAPIClient from '@features/workspaces/api/workspace-api-client';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
 import { LoadingState } from '../../global/state/atoms/Loading';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
 import { useEffect } from 'react';
 
 export const useWorkspacesCommons = (companyId = '') => {
diff --git a/tdrive/frontend/src/app/features/workspaces/services/magic-links-service.tsx b/tdrive/frontend/src/app/features/workspaces/services/magic-links-service.tsx
index a625465f..368ef860 100644
--- a/tdrive/frontend/src/app/features/workspaces/services/magic-links-service.tsx
+++ b/tdrive/frontend/src/app/features/workspaces/services/magic-links-service.tsx
@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { CompanyType } from 'app/features/companies/types/company';
-import Api from 'app/features/global/framework/api-service';
+import { CompanyType } from '@features/companies/types/company';
+import Api from '@features/global/framework/api-service';
 
 export type MagicLinksGeneratorResponse = {
   token: string;
diff --git a/tdrive/frontend/src/app/features/workspaces/services/workspace-user-rights-service.ts b/tdrive/frontend/src/app/features/workspaces/services/workspace-user-rights-service.ts
index c4d1e68b..978d686b 100755
--- a/tdrive/frontend/src/app/features/workspaces/services/workspace-user-rights-service.ts
+++ b/tdrive/frontend/src/app/features/workspaces/services/workspace-user-rights-service.ts
@@ -1,7 +1,7 @@
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
 import AccessRightsService, {
   RightsOrNone,
-} from 'app/features/workspace-members/services/workspace-members-access-rights-service';
+} from '@features/workspace-members/services/workspace-members-access-rights-service';
 
 class WorkspaceUserRights {
   isNotConnected(): boolean {
diff --git a/tdrive/frontend/src/app/features/workspaces/services/workspaces-listener-service.ts b/tdrive/frontend/src/app/features/workspaces/services/workspaces-listener-service.ts
index 69f252fc..c5a9b675 100755
--- a/tdrive/frontend/src/app/features/workspaces/services/workspaces-listener-service.ts
+++ b/tdrive/frontend/src/app/features/workspaces/services/workspaces-listener-service.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ws from 'app/deprecated/websocket/websocket.js';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
-import User from 'app/features/users/services/current-user-service';
-import LoginService from 'app/features/auth/login-service';
+import ws from '@deprecated/websocket/websocket.js';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
+import User from '@features/users/services/current-user-service';
+import LoginService from '@features/auth/login-service';
 import { RightsOrNone } from '../../workspace-members/services/workspace-members-access-rights-service';
-import Logger from 'app/features/global/framework/logger-service';
+import Logger from '@features/global/framework/logger-service';
 
 type WebsocketWorkspace = {
   type: 'remove' | 'add' | 'update_group_privileges' | 'update_workspace_level';
diff --git a/tdrive/frontend/src/app/features/workspaces/state/workspace-list.ts b/tdrive/frontend/src/app/features/workspaces/state/workspace-list.ts
index 42877f2e..9a5b102e 100644
--- a/tdrive/frontend/src/app/features/workspaces/state/workspace-list.ts
+++ b/tdrive/frontend/src/app/features/workspaces/state/workspace-list.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { atomFamily, selectorFamily, useSetRecoilState } from 'recoil';
 
-import { WorkspaceType } from 'app/features/workspaces/types/workspace';
-import WorkspaceAPIClient from 'app/features/workspaces/api/workspace-api-client';
-import Logger from 'app/features/global/framework/logger-service';
+import { WorkspaceType } from '@features/workspaces/types/workspace';
+import WorkspaceAPIClient from '@features/workspaces/api/workspace-api-client';
+import Logger from '@features/global/framework/logger-service';
 import _ from 'lodash';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
 
 const logger = Logger.getLogger('WorkspaceListState');
 
diff --git a/tdrive/frontend/src/app/features/workspaces/types/workspace.ts b/tdrive/frontend/src/app/features/workspaces/types/workspace.ts
index a6f944f9..e46d974f 100644
--- a/tdrive/frontend/src/app/features/workspaces/types/workspace.ts
+++ b/tdrive/frontend/src/app/features/workspaces/types/workspace.ts
@@ -1,4 +1,4 @@
-import { UserCompanyType, UserType } from 'app/features/users/types/user';
+import { UserCompanyType, UserType } from '@features/users/types/user';
 
 export type WorkspaceType = {
   id: string;
@@ -33,4 +33,4 @@ export type WorkspacePendingUserType = {
 
 export type WorkspaceInviteDomainType = {
   invite_domain: string | null;
-}
+};
diff --git a/tdrive/frontend/src/app/molecules/download-banner/index.tsx b/tdrive/frontend/src/app/molecules/download-banner/index.tsx
index 1e99d44c..d03eb97d 100644
--- a/tdrive/frontend/src/app/molecules/download-banner/index.tsx
+++ b/tdrive/frontend/src/app/molecules/download-banner/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button } from 'app/atoms/button/button';
-import { Subtitle } from 'app/atoms/text';
+import { Button } from '@atoms/button/button';
+import { Subtitle } from '@atoms/text';
 import { X } from 'react-feather';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
 type PropsType = {
   onBannerClose: () => void;
diff --git a/tdrive/frontend/src/app/molecules/message-quote/index.tsx b/tdrive/frontend/src/app/molecules/message-quote/index.tsx
deleted file mode 100644
index 99a1003a..00000000
--- a/tdrive/frontend/src/app/molecules/message-quote/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { Info } from 'app/atoms/text';
-import Languages from 'app/features/global/services/languages-service';
-import { XIcon } from '@atoms/icons-agnostic';
-
-type PropsType = {
-  message: JSX.Element;
-  author: string;
-  closable?: boolean;
-  deleted?: boolean;
-  goToMessage?: () => void;
-  onClose?: () => void;
-  className?: string;
-};
-
-export default ({
-  author,
-  message,
-  closable = true,
-  onClose,
-  deleted = false,
-  goToMessage,
-  className = '',
-}: PropsType) => {
-  const clickable = !closable;
-
-  return (
-    <div
-      className={
-        'flex flex-row pl-3 pr-2 relative ' +
-        (className || '') +
-        ' ' +
-        (clickable ? 'cursor-pointer hover:bg-blue-100 hover:bg-opacity-50' : '')
-      }
-      onClick={!closable ? goToMessage : () => {}}
-    >
-      <div className="w-[3px] rounded-full bg-blue-500 absolute left-0 top-0 h-full"></div>
-      <div className="grow w-full max-w-full">
-        <h3 className="mt-0.5 -mb-0.5 text-xs text-blue-500">{author}</h3>
-        <div className="text-xs truncate text-ellipsis">
-          {deleted ? (
-            <Info className="italic text-xs">{Languages.t('molecules.message_quote.deleted')}</Info>
-          ) : (
-            message
-          )}
-        </div>
-      </div>
-      {closable && onClose && (
-        <div className="flex-none w-2">
-          <XIcon
-            className="cursor-pointer mt-1 float-right w-3 h-3 text-blue-500 hover:text-blue-600"
-            onClick={e => {
-              e.stopPropagation();
-              onClose();
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/molecules/message-quote/message-quote.stories.tsx b/tdrive/frontend/src/app/molecules/message-quote/message-quote.stories.tsx
deleted file mode 100644
index 814a99d2..00000000
--- a/tdrive/frontend/src/app/molecules/message-quote/message-quote.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import MessageQuote from './index';
-
-export default {
-  title: 'molecules/message-quote',
-  component: MessageQuote,
-} as ComponentMeta<typeof MessageQuote>;
-
-const Template: ComponentStory<typeof MessageQuote> = args => <MessageQuote {...args} />;
-
-export const Editing = Template.bind({});
-export const Displaying = Template.bind({});
-export const longMessage = Template.bind({});
-export const deleted = Template.bind({});
-
-Editing.args = {
-  author: 'John Doe',
-  message: <>'This is a message that is being quoted'</>,
-  closable: true,
-  onClose: () => {
-    console.log('Closed');
-  },
-};
-
-Displaying.args = {
-  author: 'Jane Dove',
-  message: <>'This is a quoted message while displaying it'</>,
-  closable: false,
-  onClose: () => {
-    console.log('Closed');
-  }
-};
-
-longMessage.args = {
-  author: 'John Doe',
-  message: <>`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum magna at tincidunt luctus.
-    Etiam dignissim nec lorem ut porta. Mauris convallis lacinia orci, ut posuere nisi viverra vitae.
-    Cras lacinia nisi sit amet nunc commodo, ac accumsan eros egestas. Nullam ligula quam, vestibulum eget lorem nec,
-    molestie vulputate purus. Curabitur vel arcu eget odio auctor pharetra. Morbi aliquam cursus lacus et vestibulum.
-    Phasellus sapien augue, vulputate id rutrum et, vehicula ac ante. Aenean volutpat purus ut ultricies porttitor.`</>,
-  closable: true,
-};
-
-deleted.args = {
-  author: 'Samir pesiron',
-  message: <>'some deteled message'</>,
-  deleted: true,
-};
diff --git a/tdrive/frontend/src/app/molecules/message-status/index.tsx b/tdrive/frontend/src/app/molecules/message-status/index.tsx
deleted file mode 100644
index 9168a01d..00000000
--- a/tdrive/frontend/src/app/molecules/message-status/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { MessageDeliveryStatusType } from 'app/features/messages/types/message';
-import { StatusCheckDoubleIcon, StatusCheckIcon } from 'app/atoms/icons-agnostic';
-
-type PropsType = {
-  status: MessageDeliveryStatusType | null | undefined;
-};
-
-export default ({ status }: PropsType) => {
-  const messageStatus = status ?? 'read';
-
-  return (
-    <div className="message-delivery-status float-right -mt-4">
-      {messageStatus === 'sent' && <StatusCheckIcon className="text-zinc-400" />}
-      {messageStatus === 'delivered' && <StatusCheckDoubleIcon className="text-zinc-400" />}
-      {messageStatus === 'read' && <StatusCheckDoubleIcon className="text-blue-500" />}
-    </div>
-  );
-};
diff --git a/tdrive/frontend/src/app/molecules/message-status/message-status.stories.tsx b/tdrive/frontend/src/app/molecules/message-status/message-status.stories.tsx
deleted file mode 100644
index bb83ee0e..00000000
--- a/tdrive/frontend/src/app/molecules/message-status/message-status.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import MessageDeliveryStatus from './index';
-
-export default {
-  title: 'molecules/Message-delivery-status',
-  component: MessageDeliveryStatus,
-} as ComponentMeta<typeof MessageDeliveryStatus>;
-
-const Template: ComponentStory<typeof MessageDeliveryStatus> = (args) => <MessageDeliveryStatus {...args} />;
-
-export const sending = Template.bind({});
-export const sent = Template.bind({});
-export const deliverd = Template.bind({});
-export const read = Template.bind({});
-export const error = Template.bind({});
-export const oldMessage = Template.bind({});
-
-sending.args = {
-  status: 'sending',
-};
-
-sent.args = {
-  status: 'sent',
-};
-
-deliverd.args = {
-  status: 'delivered',
-};
-
-read.args = {
-  status: 'read',
-};
-
-error.args = {
-  status: 'error',
-};
-
-oldMessage.args = {
-  status: null,
-};
diff --git a/tdrive/frontend/src/app/molecules/tabs/index.stories.tsx b/tdrive/frontend/src/app/molecules/tabs/index.stories.tsx
deleted file mode 100644
index f91eca2a..00000000
--- a/tdrive/frontend/src/app/molecules/tabs/index.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-import { useArgs } from '@storybook/client-api';
-
-import Tabs from '.';
-
-export default {
-  title: '@molecules/tabs',
-};
-
-const Template: ComponentStory<any> = (args: { activeTab: number; badgeContent: string }) => {
-  const [_, updateArgs] = useArgs();
-
-  const tabs = [
-    <div key="all">All</div>,
-    <div key="chats">Chats</div>,
-    <div key="media" className="flex">
-      <div>Media</div>{' '}
-      {(args.badgeContent && (
-        <div className="bg-blue-500 ml-1 px-2 rounded-full text-white">{args.badgeContent}</div>
-      )) || <></>}
-    </div>,
-    <div key="media">Files</div>,
-  ];
-
-  return (
-    <>
-      <Tabs
-        tabs={tabs}
-        selected={args.activeTab}
-        onClick={idx => {
-          updateArgs({ activeTab: idx });
-          // console.log(args);
-        }}
-      />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  activeTab: 0,
-  badgeContent: '12',
-};
diff --git a/tdrive/frontend/src/app/molecules/tabs/index.tsx b/tdrive/frontend/src/app/molecules/tabs/index.tsx
deleted file mode 100644
index f88e854a..00000000
--- a/tdrive/frontend/src/app/molecules/tabs/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { useEffect } from 'react';
-
-// @ts-ignore
-interface TabsProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  tabs: JSX.Element[] | string[];
-  selected: number;
-  onClick: (idx: number) => void;
-  parentClassName?: string;
-}
-
-const defaultTabClassName =
-  ' cursor-pointer h-12 px-4 flex items-center border-b-2 border-transparent hover:text-blue-600 transition-colors';
-const activeTabClassName = ' text-blue-500 border-blue-500 font-semibold ';
-const inactiveTabClassName = ' text-zinc-500 ';
-
-export default function Tab(props: TabsProps) {
-  useEffect(() => {
-    if (props.selected >= props.tabs.length) props.onClick(0);
-  }, [props.tabs.length]);
-
-  return (
-    <>
-      <div
-        className={`overflow-auto flex w-100 border-b border-zinc-200 dark:border-zinc-800 transition-all select-none ${props.className}`}
-      >
-        {props.tabs.map((tab, idx) => {
-          const cl =
-            defaultTabClassName +
-            (idx === props.selected ? activeTabClassName : inactiveTabClassName) +
-            props.parentClassName;
-          return (
-            <div key={idx} className={cl} onClick={() => props.onClick(idx)}>
-              {tab}
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-}
diff --git a/tdrive/frontend/src/app/views/client/app.tsx b/tdrive/frontend/src/app/views/client/app.tsx
index 7744161e..f3a58f55 100755
--- a/tdrive/frontend/src/app/views/client/app.tsx
+++ b/tdrive/frontend/src/app/views/client/app.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 
-import InitService from 'app/features/global/services/init-service';
-import Client from 'app/views/client';
+import InitService from '@features/global/services/init-service';
+import Client from '@views/client';
 
 export default () => {
   const isAppReady = InitService.useWatcher(() => InitService.app_ready);
diff --git a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
index 04181b56..ccce5ed4 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
@@ -1,16 +1,16 @@
 import { ChevronDownIcon } from '@heroicons/react/outline';
-import { Button } from 'app/atoms/button/button';
-import { Base, BaseSmall, Subtitle, Title } from 'app/atoms/text';
-import Menu from 'app/components/menus/menu';
-import { getFilesTree } from 'app/components/uploads/file-tree-utils';
-import UploadZone from 'app/components/uploads/upload-zone';
-import { setTdriveTabToken } from 'app/features/drive/api-client/api-client';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
-import { DriveRealtimeObject } from 'app/features/drive/hooks/use-drive-realtime';
-import { useDriveUpload } from 'app/features/drive/hooks/use-drive-upload';
-import { DriveItemSelectedList } from 'app/features/drive/state/store';
-import { formatBytes } from 'app/features/drive/utils';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import { Button } from '@atoms/button/button';
+import { Base, BaseSmall, Subtitle, Title } from '@atoms/text';
+import Menu from '@components/menus/menu';
+import { getFilesTree } from '@components/uploads/file-tree-utils';
+import UploadZone from '@components/uploads/upload-zone';
+import { setTdriveTabToken } from '@features/drive/api-client/api-client';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { DriveRealtimeObject } from '@features/drive/hooks/use-drive-realtime';
+import { useDriveUpload } from '@features/drive/hooks/use-drive-upload';
+import { DriveItemSelectedList } from '@features/drive/state/store';
+import { formatBytes } from '@features/drive/utils';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 import _ from 'lodash';
 import { memo, Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { atomFamily, useRecoilState, useSetRecoilState } from 'recoil';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx b/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx
index 33eafccf..88ade15b 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Input } from '@atoms/input/input-text';
-import { useSearchUsers } from 'app/features/users/hooks/use-search-user-list';
-import User from 'app/components/ui/user';
+import { useSearchUsers } from '@features/users/hooks/use-search-user-list';
+import User from '@components/ui/user';
 import { Button } from '@atoms/button/button';
-import { UserType } from 'app/features/users/types/user';
-import { InputDecorationIcon } from 'app/atoms/input/input-decoration-icon';
+import { UserType } from '@features/users/types/user';
+import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
 import { SearchIcon } from '@heroicons/react/solid';
-import { Info } from 'app/atoms/text';
-import Languages from 'app/features/global/services/languages-service';
+import { Info } from '@atoms/text';
+import Languages from '@features/global/services/languages-service';
 import _ from 'lodash';
 
 export default (props: {
diff --git a/tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx b/tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx
index ab09dc29..30eebf35 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx
@@ -1,11 +1,3 @@
-import { DriveApiClient } from 'app/features/drive/api-client/api-client';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
-import { getPublicLink } from 'app/features/drive/hooks/use-drive-item';
-import { useDrivePreview } from 'app/features/drive/hooks/use-drive-preview';
-import { DriveItemSelectedList } from 'app/features/drive/state/store';
-import { DriveItem, DriveItemDetails } from 'app/features/drive/types';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import { copyToClipboard } from 'app/features/global/utils/CopyClipboard';
 import { useCallback } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { DriveCurrentFolderAtom } from './browser';
@@ -16,6 +8,14 @@ import { PropertiesModalAtom } from './modals/properties';
 import { SelectorModalAtom } from './modals/selector';
 import { AccessModalAtom } from './modals/update-access';
 import { VersionsModalAtom } from './modals/versions';
+import { DriveApiClient } from '@features/drive/api-client/api-client';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
+import { getPublicLink } from '@features/drive/hooks/use-drive-item';
+import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
+import { DriveItemSelectedList } from '@features/drive/state/store';
+import { DriveItem, DriveItemDetails } from '@features/drive/types';
+import { ToasterService } from '@features/global/services/toaster-service';
+import { copyToClipboard } from '@features/global/utils/CopyClipboard';
 
 /**
  * This will build the context menu in different contexts
diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/common.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/common.tsx
index a7f5c30c..9d2743a7 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/documents/common.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/documents/common.tsx
@@ -1,5 +1,5 @@
-import { Checkbox } from 'app/atoms/input/input-checkbox';
-import { DriveItem } from 'app/features/drive/types';
+import { Checkbox } from '@atoms/input/input-checkbox';
+import { DriveItem } from '@features/drive/types';
 import { ReactNode } from 'react';
 
 export type DriveItemProps = {
diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
index 8e045e08..3f151a78 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx
@@ -1,5 +1,5 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline';
-import { Button } from 'app/atoms/button/button';
+import { Button } from '@atoms/button/button';
 import {
   FileTypeArchiveIcon,
   FileTypeDocumentIcon,
@@ -9,12 +9,12 @@ import {
   FileTypeSlidesIcon,
   FileTypeSpreadsheetIcon,
   FileTypeUnknownIcon,
-} from 'app/atoms/icons-colored';
-import { Base, BaseSmall } from 'app/atoms/text';
-import Menu from 'app/components/menus/menu';
-import { useDrivePreview } from 'app/features/drive/hooks/use-drive-preview';
-import { formatBytes } from 'app/features/drive/utils';
-import fileUploadApiClient from 'app/features/files/api/file-upload-api-client';
+} from '@atoms/icons-colored';
+import { Base, BaseSmall } from '@atoms/text';
+import Menu from '@components/menus/menu';
+import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
+import { formatBytes } from '@features/drive/utils';
+import fileUploadApiClient from '@features/files/api/file-upload-api-client';
 import { useState } from 'react';
 import Avatar from '../../../../../atoms/avatar';
 import { PublicIcon } from '../components/public-icon';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx b/tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx
index 8ef7c45e..8c716e33 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx
@@ -1,9 +1,9 @@
 import { DotsHorizontalIcon } from '@heroicons/react/outline';
 import { FolderIcon } from '@heroicons/react/solid';
-import { Button } from 'app/atoms/button/button';
-import { Base, BaseSmall } from 'app/atoms/text';
-import Menu from 'app/components/menus/menu';
-import { formatBytes } from 'app/features/drive/utils';
+import { Button } from '@atoms/button/button';
+import { Base, BaseSmall } from '@atoms/text';
+import Menu from '@components/menus/menu';
+import { formatBytes } from '@features/drive/utils';
 import { useState } from 'react';
 import { PublicIcon } from '../components/public-icon';
 import { CheckableIcon, DriveItemProps } from './common';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/drive-item.tsx b/tdrive/frontend/src/app/views/client/body/drive/drive-item.tsx
index 3e4fbdb6..de1f0877 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/drive-item.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/drive-item.tsx
@@ -1,5 +1,5 @@
 import { DesktopComputerIcon } from '@heroicons/react/solid';
-import { Base } from 'app/atoms/text';
+import { Base } from '@atoms/text';
 
 export const DriveItem = ({ className, onClick }: { className?: string; onClick: Function }) => {
   return (
diff --git a/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx b/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
index 90e50aea..8aea0046 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
@@ -1,6 +1,6 @@
-import { Button } from 'app/atoms/button/button';
-import { Title } from 'app/atoms/text';
-import { DriveItem } from 'app/features/drive/types';
+import { Button } from '@atoms/button/button';
+import { Title } from '@atoms/text';
+import { DriveItem } from '@features/drive/types';
 import { useEffect, useState } from 'react';
 import { PublicIcon } from './components/public-icon';
 
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-delete/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-delete/index.tsx
index 92bd1486..248ef57b 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-delete/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-delete/index.tsx
@@ -1,10 +1,10 @@
-import { Button } from 'app/atoms/button/button';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { Base } from 'app/atoms/text';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
-import { DriveItemSelectedList } from 'app/features/drive/state/store';
-import { DriveItem } from 'app/features/drive/types';
+import { Button } from '@atoms/button/button';
+import { Modal, ModalContent } from '@atoms/modal';
+import { Base } from '@atoms/text';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { DriveItemSelectedList } from '@features/drive/state/store';
+import { DriveItem } from '@features/drive/types';
 import { useEffect, useState } from 'react';
 import { atom, useRecoilState } from 'recoil';
 
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx
index 2b7d0f92..32e083dd 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx
@@ -1,10 +1,10 @@
-import { Button } from 'app/atoms/button/button';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { Base } from 'app/atoms/text';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
-import { DriveItemSelectedList } from 'app/features/drive/state/store';
-import { DriveItem } from 'app/features/drive/types';
+import { Button } from '@atoms/button/button';
+import { Modal, ModalContent } from '@atoms/modal';
+import { Base } from '@atoms/text';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { DriveItemSelectedList } from '@features/drive/state/store';
+import { DriveItem } from '@features/drive/types';
 import { useEffect, useState } from 'react';
 import { atom, useRecoilState } from 'recoil';
 
@@ -61,7 +61,7 @@ const ConfirmTrashModalContent = ({ items }: { items: DriveItem[] }) => {
           await Promise.all((items || []).map(async item => await remove(item.id, item.parent_id)));
           setSelected({});
           setLoading(false);
-          refresh("trash");
+          refresh('trash');
           setState({ ...state, open: false });
         }}
       >
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx
index 949730d8..60067fc5 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx
@@ -1,10 +1,10 @@
-import { Button } from 'app/atoms/button/button';
-import { Input } from 'app/atoms/input/input-text';
-import { Info } from 'app/atoms/text';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
 import { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { CreateModalAtom } from '.';
+import { Button } from '@atoms/button/button';
+import { Input } from '@atoms/input/input-text';
+import { Info } from '@atoms/text';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
 
 export const CreateFolder = () => {
   const [name, setName] = useState<string>('');
@@ -20,7 +20,7 @@ export const CreateFolder = () => {
         disabled={loading}
         placeholder="Folder name"
         className="w-full mt-4"
-        onChange={(e:any) => setName(e.target.value)}
+        onChange={(e: any) => setName(e.target.value)}
       />
 
       <Button
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-link.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-link.tsx
index ae899059..c316695d 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-link.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-link.tsx
@@ -1,7 +1,7 @@
-import { Button } from 'app/atoms/button/button';
-import { Input } from 'app/atoms/input/input-text';
-import { Info } from 'app/atoms/text';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
+import { Button } from '@atoms/button/button';
+import { Input } from '@atoms/input/input-text';
+import { Info } from '@atoms/text';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
 import { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { CreateModalAtom } from '.';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx
index 3c3368b3..16143d5c 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx
@@ -6,12 +6,12 @@ import {
   FolderDownloadIcon,
   LinkIcon,
 } from '@heroicons/react/outline';
-import Avatar from 'app/atoms/avatar';
-import A from 'app/atoms/link';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { Base } from 'app/atoms/text';
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
-import { Application } from 'app/features/applications/types/application';
+import Avatar from '@atoms/avatar';
+import A from '@atoms/link';
+import { Modal, ModalContent } from '@atoms/modal';
+import { Base } from '@atoms/text';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import { Application } from '@features/applications/types/application';
 import { ReactNode } from 'react';
 import { atom, useRecoilState } from 'recoil';
 import { slideXTransition, slideXTransitionReverted } from 'src/utils/transitions';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/properties/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/properties/index.tsx
index e0be25aa..98bf4da0 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/properties/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/properties/index.tsx
@@ -1,9 +1,9 @@
-import { Button } from 'app/atoms/button/button';
-import { InputLabel } from 'app/atoms/input/input-decoration-label';
-import { Input } from 'app/atoms/input/input-text';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
+import { Button } from '@atoms/button/button';
+import { InputLabel } from '@atoms/input/input-decoration-label';
+import { Input } from '@atoms/input/input-text';
+import { Modal, ModalContent } from '@atoms/modal';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
 import { useEffect, useState } from 'react';
 import { atom, useRecoilState } from 'recoil';
 
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/selector/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/selector/index.tsx
index 6dc60a73..eec824e1 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/selector/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/selector/index.tsx
@@ -1,9 +1,9 @@
 import { DocumentIcon, FolderIcon } from '@heroicons/react/solid';
-import { Button } from 'app/atoms/button/button';
-import { Checkbox } from 'app/atoms/input/input-checkbox';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
-import { DriveItem } from 'app/features/drive/types';
+import { Button } from '@atoms/button/button';
+import { Checkbox } from '@atoms/input/input-checkbox';
+import { Modal, ModalContent } from '@atoms/modal';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { DriveItem } from '@features/drive/types';
 import { useEffect, useState } from 'react';
 import { atom, useRecoilState } from 'recoil';
 import { PathRender } from '../../header-path';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/common.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/common.tsx
index 95f6671e..f062f036 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/common.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/common.tsx
@@ -1,5 +1,5 @@
-import Select from 'app/atoms/input/input-select';
-import { DriveFileAccessLevel } from 'app/features/drive/types';
+import Select from '@atoms/input/input-select';
+import { DriveFileAccessLevel } from '@features/drive/types';
 
 export const AccessLevel = ({
   disabled,
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/index.tsx
index cbc2de6e..13e8ee43 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/index.tsx
@@ -1,5 +1,5 @@
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
+import { Modal, ModalContent } from '@atoms/modal';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
 import { useEffect } from 'react';
 import { atom, useRecoilState } from 'recoil';
 import { InternalAccessManager } from './internal-access';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-access.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-access.tsx
index 1a6e9c3e..0d54d190 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-access.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-access.tsx
@@ -1,13 +1,13 @@
-import Avatar from 'app/atoms/avatar';
-import { Checkbox } from 'app/atoms/input/input-checkbox';
-import { Base, Info } from 'app/atoms/text';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
-import { DriveFileAccessLevel } from 'app/features/drive/types';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import { useUser } from 'app/features/users/hooks/use-user';
-import currentUserService from 'app/features/users/services/current-user-service';
-import { UserType } from 'app/features/users/types/user';
+import Avatar from '@atoms/avatar';
+import { Checkbox } from '@atoms/input/input-checkbox';
+import { Base, Info } from '@atoms/text';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { DriveFileAccessLevel } from '@features/drive/types';
+import AlertManager from '@features/global/services/alert-manager-service';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
+import { useUser } from '@features/users/hooks/use-user';
+import currentUserService from '@features/users/services/current-user-service';
+import { UserType } from '@features/users/types/user';
 import { useState } from 'react';
 import SelectUsers from '../../components/select-users';
 import { AccessLevel } from './common';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx
index 9c5935a3..546a2090 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/update-access/public-link-access.tsx
@@ -1,8 +1,8 @@
-import A from 'app/atoms/link';
-import { Base, Info } from 'app/atoms/text';
-import { useDriveItem, getPublicLink } from 'app/features/drive/hooks/use-drive-item';
-import { ToasterService } from 'app/features/global/services/toaster-service';
-import { copyToClipboard } from 'app/features/global/utils/CopyClipboard';
+import A from '@atoms/link';
+import { Base, Info } from '@atoms/text';
+import { useDriveItem, getPublicLink } from '@features/drive/hooks/use-drive-item';
+import { ToasterService } from '@features/global/services/toaster-service';
+import { copyToClipboard } from '@features/global/utils/CopyClipboard';
 import { AccessLevel } from './common';
 
 export const PublicLinkManager = ({ id, disabled }: { id: string; disabled?: boolean }) => {
diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/versions/index.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/versions/index.tsx
index 003c1016..d40db90c 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/versions/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/modals/versions/index.tsx
@@ -1,11 +1,11 @@
-import { Button } from 'app/atoms/button/button';
-import { Modal, ModalContent } from 'app/atoms/modal';
-import { Base, BaseSmall } from 'app/atoms/text';
-import UploadZone from 'app/components/uploads/upload-zone';
-import { useDriveActions } from 'app/features/drive/hooks/use-drive-actions';
-import { useDriveItem } from 'app/features/drive/hooks/use-drive-item';
-import { formatBytes } from 'app/features/drive/utils';
-import { formatDate } from 'app/features/global/utils/format-date';
+import { Button } from '@atoms/button/button';
+import { Modal, ModalContent } from '@atoms/modal';
+import { Base, BaseSmall } from '@atoms/text';
+import UploadZone from '@components/uploads/upload-zone';
+import { useDriveActions } from '@features/drive/hooks/use-drive-actions';
+import { useDriveItem } from '@features/drive/hooks/use-drive-item';
+import { formatBytes } from '@features/drive/utils';
+import { formatDate } from '@features/global/utils/format-date';
 import _ from 'lodash';
 import { useEffect, useRef } from 'react';
 import { atom, useRecoilState } from 'recoil';
diff --git a/tdrive/frontend/src/app/views/client/body/drive/shared.tsx b/tdrive/frontend/src/app/views/client/body/drive/shared.tsx
index 89509520..36b51ef5 100755
--- a/tdrive/frontend/src/app/views/client/body/drive/shared.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/shared.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
-import MenusBodyLayer from 'app/components/menus/menus-body-layer';
-import Api from 'app/features/global/framework/api-service';
-import Languages from 'app/features/global/services/languages-service';
-import { addApiUrlIfNeeded } from 'app/features/global/utils/URLUtils';
-import RouterService from 'app/features/router/services/router-service';
-import Drive from 'app/views/client/body/drive';
+import MenusBodyLayer from '@components/menus/menus-body-layer';
+import Api from '@features/global/framework/api-service';
+import Languages from '@features/global/services/languages-service';
+import { addApiUrlIfNeeded } from '@features/global/utils/URLUtils';
+import RouterService from '@features/router/services/router-service';
+import Drive from '@views/client/body/drive';
 import Avatar from '../../../../atoms/avatar';
 import { setPublicLinkToken } from '../../../../features/drive/api-client/api-client';
 import { useParams } from 'react-router-dom';
diff --git a/tdrive/frontend/src/app/views/client/body/index.tsx b/tdrive/frontend/src/app/views/client/body/index.tsx
index a7bb455e..a1a93bf4 100644
--- a/tdrive/frontend/src/app/views/client/body/index.tsx
+++ b/tdrive/frontend/src/app/views/client/body/index.tsx
@@ -1,11 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import { FC, useEffect, useState } from 'react';
 
-import AccountStatusComponent from 'app/components/on-boarding/account-status-component';
-import CompanyBillingBanner from 'app/components/on-boarding/company-billing-banner';
-import useRouterChannel from 'app/features/router/hooks/use-router-channel';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
+import useRouterChannel from '@features/router/hooks/use-router-channel';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 import Drive from './drive';
 
 type PropsType = {
@@ -19,8 +17,6 @@ const MainView: FC<PropsType> = ({ className }) => {
 
   return (
     <div className={'grow min-h-full relative ' + (className ? className : '')}>
-      <AccountStatusComponent />
-      {companyId && <CompanyBillingBanner companyId={companyId || ''} />}
       <MainContentWrapper key={companyId + workspaceId + channelId} />
     </div>
   );
diff --git a/tdrive/frontend/src/app/views/client/common/account.tsx b/tdrive/frontend/src/app/views/client/common/account.tsx
index c85c0031..66655842 100644
--- a/tdrive/frontend/src/app/views/client/common/account.tsx
+++ b/tdrive/frontend/src/app/views/client/common/account.tsx
@@ -1,12 +1,12 @@
-import Avatar from 'app/atoms/avatar';
-import { Base, Info } from 'app/atoms/text';
-import Menu from 'app/components/menus/menu';
-import LoginService from 'app/features/auth/login-service';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import currentUserService from 'app/features/users/services/current-user-service';
-import AccountParameter from 'app/views/client/popup/UserParameter/UserParameter';
+import Avatar from '@atoms/avatar';
+import { Base, Info } from '@atoms/text';
+import Menu from '@components/menus/menu';
+import LoginService from '@features/auth/login-service';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
+import currentUserService from '@features/users/services/current-user-service';
+import AccountParameter from '@views/client/popup/UserParameter/UserParameter';
 import Languages from '../../../features/global/services/languages-service';
-import ModalManagerDepreciated from 'app/deprecated/popupManager/popupManager';
+import ModalManagerDepreciated from '@deprecated/popupManager/popupManager';
 
 export default ({ sidebar }: { sidebar?: boolean }): JSX.Element => {
   const { user } = useCurrentUser();
diff --git a/tdrive/frontend/src/app/views/client/common/app-grid.tsx b/tdrive/frontend/src/app/views/client/common/app-grid.tsx
index 64968428..801ad542 100644
--- a/tdrive/frontend/src/app/views/client/common/app-grid.tsx
+++ b/tdrive/frontend/src/app/views/client/common/app-grid.tsx
@@ -1,6 +1,6 @@
 import { ViewGridIcon } from '@heroicons/react/outline';
-import { Button } from 'app/atoms/button/button';
-import Menu from 'app/components/menus/menu';
+import { Button } from '@atoms/button/button';
+import Menu from '@components/menus/menu';
 import { Base } from '../../../atoms/text';
 import InitService from '../../../features/global/services/init-service';
 
diff --git a/tdrive/frontend/src/app/views/client/common/search.tsx b/tdrive/frontend/src/app/views/client/common/search.tsx
index 8ac53ffa..25d04bcf 100644
--- a/tdrive/frontend/src/app/views/client/common/search.tsx
+++ b/tdrive/frontend/src/app/views/client/common/search.tsx
@@ -1,11 +1,11 @@
 import { Button } from '@atoms/button/button';
 import { Input } from '@atoms/input/input-text';
 import { AdjustmentsIcon, SearchIcon } from '@heroicons/react/outline';
-import { InputDecorationIcon } from 'app/atoms/input/input-decoration-icon';
-import Languages from 'app/features/global/services/languages-service';
-import RouterServices from 'app/features/router/services/router-service';
-import { useSearchModal } from 'app/features/search/hooks/use-search';
-import { SearchInputState } from 'app/features/search/state/search-input';
+import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
+import Languages from '@features/global/services/languages-service';
+import RouterServices from '@features/router/services/router-service';
+import { useSearchModal } from '@features/search/hooks/use-search';
+import { SearchInputState } from '@features/search/state/search-input';
 import { useRecoilState } from 'recoil';
 
 export default (): JSX.Element => {
diff --git a/tdrive/frontend/src/app/views/client/index.tsx b/tdrive/frontend/src/app/views/client/index.tsx
index aea5b055..28b7bf5f 100755
--- a/tdrive/frontend/src/app/views/client/index.tsx
+++ b/tdrive/frontend/src/app/views/client/index.tsx
@@ -2,30 +2,24 @@
 import classNames from 'classnames';
 import React, { Suspense, useState } from 'react';
 
-import UsersSearchModal from 'app/components/channel-members-list/users-search-modal';
-import ChatUploadsViewer from 'app/components/file-uploads/uploads-viewer';
-import { useFeatureToggles } from 'app/components/locked-features-components/feature-toggles-hooks';
-import MenusBodyLayer from 'app/components/menus/menus-body-layer.jsx';
-import ModalComponent from 'app/components/modal/modal-component';
-import CompanyStatusComponent from 'app/components/on-boarding/company-status-component';
-import PopupService from 'app/deprecated/popupManager/popupManager.js';
-import useUsetiful from 'app/features/global/hooks/use-usetiful';
-import Languages from 'app/features/global/services/languages-service';
-import { useCurrentUser, useCurrentUserRealtime } from 'app/features/users/hooks/use-current-user';
-import UserContext from 'app/features/users/state/integration/user-context';
-import Viewer from 'app/views/client/viewer/viewer';
+import ChatUploadsViewer from '@components/file-uploads/uploads-viewer';
+import { useFeatureToggles } from '@components/locked-features-components/feature-toggles-hooks';
+import MenusBodyLayer from '@components/menus/menus-body-layer.jsx';
+import ModalComponent from '@components/modal/modal-component';
+import PopupService from '@deprecated/popupManager/popupManager.js';
+import useUsetiful from '@features/global/hooks/use-usetiful';
+import Languages from '@features/global/services/languages-service';
+import { useCurrentUser, useCurrentUserRealtime } from '@features/users/hooks/use-current-user';
+import UserContext from '@features/users/state/integration/user-context';
+import Viewer from '@views/client/viewer/viewer';
 import ConnectionIndicator from 'components/connection-indicator/connection-indicator';
-import DraggableBodyLayer from 'components/draggable/draggable-body-layer.jsx';
 import NewVersionComponent from 'components/new-version/new-version-component';
 import PopupComponent from 'components/popup-component/popup-component.jsx';
 import SearchPopup from 'components/search-popup/search-popup';
 import DriveUploadViewer from 'components/uploads/upload-viewer.jsx';
 import MainView from './body';
 
-import ChannelAttachementList from 'app/components/channel-attachement-list/channel-attachement-list';
-import DownloadAppBanner from 'app/components/download-app-banner/download-app-banner';
-import { EditChannelModal } from 'app/components/edit-channel';
-import Invitation from 'app/components/invitation/invitation';
+import DownloadAppBanner from '@components/download-app-banner/download-app-banner';
 import DesktopRedirect from '../../components/desktop-redirect';
 import Header from './header';
 import SideBar from './side-bar';
@@ -49,7 +43,6 @@ export default React.memo((): JSX.Element => {
         <div className="fade_in bg-zinc-100 dark:bg-black flex flex-col gap-2 h-full">
           <DownloadAppBanner />
           <NewVersionComponent />
-          <CompanyStatusComponent />
 
           <FeatureToggles features={activeFeatureNames}>
             <>
@@ -101,17 +94,12 @@ export default React.memo((): JSX.Element => {
       {PopupService.isOpen() && <PopupComponent key="PopupComponent" />}
       {page}
       <MenusBodyLayer />
-      <DraggableBodyLayer />
       <DriveUploadViewer />
       <Viewer />
       <ModalComponent />
       <SearchPopup />
-      <ChannelAttachementList />
       <ConnectionIndicator />
       <ChatUploadsViewer />
-      <UsersSearchModal />
-      <EditChannelModal />
-      <Invitation />
     </>
   );
 });
diff --git a/tdrive/frontend/src/app/views/client/popup/AddUser/AddUserByEmail.tsx b/tdrive/frontend/src/app/views/client/popup/AddUser/AddUserByEmail.tsx
index 1a0810d6..9d0d7892 100644
--- a/tdrive/frontend/src/app/views/client/popup/AddUser/AddUserByEmail.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/AddUser/AddUserByEmail.tsx
@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Typography } from 'antd';
-import Languages from 'app/features/global/services/languages-service';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
-import AutoHeight from 'app/components/auto-height/auto-height';
-import ConsoleService from 'app/features/console/services/console-service';
-import WorkspacesUsers from 'app/features/workspace-members/services/workspace-members-service';
+import Languages from '@features/global/services/languages-service';
+import popupManager from '@deprecated/popupManager/popupManager.js';
+import AutoHeight from '@components/auto-height/auto-height';
+import ConsoleService from '@features/console/services/console-service';
+import WorkspacesUsers from '@features/workspace-members/services/workspace-members-service';
 import MagicLinks from './MagicLinks';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 import './AddUser.scss';
-import LockedInviteAlert from 'app/components/locked-features-components/locked-invite-alert';
-import { useFeatureToggles } from 'app/components/locked-features-components/feature-toggles-hooks';
-import FeatureTogglesService from 'app/features/global/services/feature-toggles-service';
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
+import LockedInviteAlert from '@components/locked-features-components/locked-invite-alert';
+import { useFeatureToggles } from '@components/locked-features-components/feature-toggles-hooks';
+import FeatureTogglesService from '@features/global/services/feature-toggles-service';
+import { useCurrentCompany } from '@features/companies/hooks/use-companies';
 
 type PropsType = {
   [key: string]: unknown;
diff --git a/tdrive/frontend/src/app/views/client/popup/AddUser/MagicLinks.tsx b/tdrive/frontend/src/app/views/client/popup/AddUser/MagicLinks.tsx
index c5c7e946..34da8e61 100644
--- a/tdrive/frontend/src/app/views/client/popup/AddUser/MagicLinks.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/AddUser/MagicLinks.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Input, Space, message } from 'antd';
 import { DeleteOutlined, RetweetOutlined } from '@ant-design/icons';
-import Languages from 'app/features/global/services/languages-service';
-import RouterServices from 'app/features/router/services/router-service';
+import Languages from '@features/global/services/languages-service';
+import RouterServices from '@features/router/services/router-service';
 import './MagicLinks.scss';
-import { MagicLinksGeneratorService } from 'app/features/workspaces/services/magic-links-service';
+import { MagicLinksGeneratorService } from '@features/workspaces/services/magic-links-service';
 
 type PropsType = {
   loading?: boolean;
@@ -24,7 +24,11 @@ export default (props: PropsType): JSX.Element => {
     setDisabled(val);
   };
 
-  const magicLinksService = new MagicLinksGeneratorService(companyId as string, workspaceId as string, busy);
+  const magicLinksService = new MagicLinksGeneratorService(
+    companyId as string,
+    workspaceId as string,
+    busy,
+  );
 
   useEffect(() => {
     init();
diff --git a/tdrive/frontend/src/app/views/client/popup/CreateCompanyView/CreateCompanyView.jsx b/tdrive/frontend/src/app/views/client/popup/CreateCompanyView/CreateCompanyView.jsx
index 012385fe..adf39bd5 100755
--- a/tdrive/frontend/src/app/views/client/popup/CreateCompanyView/CreateCompanyView.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/CreateCompanyView/CreateCompanyView.jsx
@@ -2,18 +2,18 @@
 /* eslint-disable react/no-direct-mutation-state */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import LoginService from 'app/features/auth/login-service';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
+import Languages from '@features/global/services/languages-service';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
+import LoginService from '@features/auth/login-service';
+import popupManager from '@deprecated/popupManager/popupManager.js';
 import Emojione from 'components/emojione/emojione';
 import StepCounter from 'components/step-counter/step-counter.jsx';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
 import './CreateCompanyView.scss';
 import Input from 'components/inputs/input.jsx';
-import CurrentUser from 'app/deprecated/user/CurrentUser';
-import InitService from 'app/features/global/services/init-service';
-import AddUserByEmail from 'app/views/client/popup/AddUser/AddUserByEmail';
+import CurrentUser from '@deprecated/user/CurrentUser';
+import InitService from '@features/global/services/init-service';
+import AddUserByEmail from '@views/client/popup/AddUser/AddUserByEmail';
 
 export default class CreateCompanyView extends Component {
   constructor() {
diff --git a/tdrive/frontend/src/app/views/client/popup/CreateWorkspacePage/CreateWorkspacePage.jsx b/tdrive/frontend/src/app/views/client/popup/CreateWorkspacePage/CreateWorkspacePage.jsx
index 47b462cc..6df81daa 100755
--- a/tdrive/frontend/src/app/views/client/popup/CreateWorkspacePage/CreateWorkspacePage.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/CreateWorkspacePage/CreateWorkspacePage.jsx
@@ -1,14 +1,14 @@
 /* eslint-disable react/no-direct-mutation-state */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import GroupService from 'app/deprecated/workspaces/groups.js';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
+import Languages from '@features/global/services/languages-service';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
+import GroupService from '@deprecated/workspaces/groups.js';
+import popupManager from '@deprecated/popupManager/popupManager.js';
 import Emojione from 'components/emojione/emojione';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
 import Input from 'components/inputs/input.jsx';
-import AddUserByEmail from 'app/views/client/popup/AddUser/AddUserByEmail';
+import AddUserByEmail from '@views/client/popup/AddUser/AddUserByEmail';
 import './CreateWorkspacePage.scss';
 
 export default class CreateWorkspacePage extends Component {
diff --git a/tdrive/frontend/src/app/views/client/popup/SecondMail/SecondMail.jsx b/tdrive/frontend/src/app/views/client/popup/SecondMail/SecondMail.jsx
index b9e5b23c..d0196e8b 100755
--- a/tdrive/frontend/src/app/views/client/popup/SecondMail/SecondMail.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/SecondMail/SecondMail.jsx
@@ -1,13 +1,13 @@
 /* eslint-disable react/jsx-key */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import userService from 'app/features/users/services/current-user-service';
-import loginService from 'app/features/auth/login-service';
-import AccountService from 'app/deprecated/login/account';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
+import Languages from '@features/global/services/languages-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
+import userService from '@features/users/services/current-user-service';
+import loginService from '@features/auth/login-service';
+import AccountService from '@deprecated/login/account';
+import popupManager from '@deprecated/popupManager/popupManager.js';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
 import Input from 'components/inputs/input.jsx';
 import './SecondMail.scss';
diff --git a/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Assistant.tsx b/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Assistant.tsx
index 67ca1420..836d5b12 100755
--- a/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Assistant.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Assistant.tsx
@@ -1,8 +1,8 @@
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import * as Text from '@atoms/text';
-import { ToasterService as Toaster } from 'app/features/global/services/toaster-service';
-import UserAPIClient from 'app/features/users/api/user-api-client';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
+import { ToasterService as Toaster } from '@features/global/services/toaster-service';
+import UserAPIClient from '@features/users/api/user-api-client';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
 import Radio from 'components/inputs/radio.jsx';
 
 export type preferencesType = Record<string, unknown>;
diff --git a/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Notifications.tsx b/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Notifications.tsx
deleted file mode 100755
index c8ab99a7..00000000
--- a/tdrive/frontend/src/app/views/client/popup/UserParameter/Pages/Notifications.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { isEqual } from 'lodash';
-import Languages from 'app/features/global/services/languages-service';
-import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
-import Attribute from 'components/parameters/attribute.jsx';
-import Switch from 'components/inputs/switch';
-import Radio from 'components/inputs/radio.jsx';
-
-import { preferencesType } from 'app/features/users/types/notification-preferences-type';
-import { UseNotificationPreferences } from 'app/features/notifications-preferences/hooks/use-notifications-preference-hook';
-import { playNotificationAudio } from 'app/features/users/services/push-desktop-notification';
-
-export default () => {
-  const { save, notifsPreferences } = UseNotificationPreferences();
-  const [newPreferences, setNewPreferences] = useState<preferencesType>();
-
-  useEffect(() => {
-    if (notifsPreferences && notifsPreferences.length) {
-      setNewPreferences(
-        notifsPreferences[0]?.preferences || {
-          highlight_words: [],
-          night_break: { enable: false, from: 0, to: 0 },
-          private_message_content: false,
-          mobile_notifications: 'always',
-          email_notifications_delay: 15,
-          deactivate_notifications_until: 0,
-          notification_sound: 'default',
-        },
-      );
-    }
-  }, [notifsPreferences]);
-
-  const saveNewPreferences = async (preferences: preferencesType) => {
-    save(preferences);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const generateTimeOptions = () => {
-    const options = [];
-    for (let value = 0; value < 24; value += 0.5) {
-      const text = ~~value + ':' + ((value * 2) % 2 === 0 ? '00' : '30');
-      options.push(
-        <option key={value} value={value}>
-          {text}
-        </option>,
-      );
-    }
-    return options;
-  };
-
-  if (!newPreferences) {
-    return <div></div>;
-  }
-
-  return (
-    <>
-      <div className="title">{Languages.t('scenes.apps.account.notifications.title')}</div>
-      <div className="group_section">
-        <div className="subtitle">
-          {Languages.t('scenes.app.popup.userparameter.pages.frequency_notif_subtitle')}
-        </div>
-        {/* <Attribute
-          label={Languages.t('scenes.apps.account.notifications.keywords_subtitle')}
-          description={Languages.t(
-            'scenes.app.popup.userparameter.pages.keywords_notif_description',
-          )}
-        >
-          <div className="parameters_form" style={{ maxWidth: 'none', paddingTop: 10 }}>
-            <Input
-              value={newPreferences.highlight_words.join(', ')}
-              placeholder={Languages.t('scenes.apps.account.notifications.keywords_placeholder')}
-              className="bottom-margin"
-              size="large"
-              onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-                setNewPreferences({
-                  ...newPreferences,
-                  highlight_words: evt.target.value.split(', '),
-                });
-              }}
-            ></Input>
-          </div>
-        </Attribute> */}
-        {/* <Attribute
-          label={Languages.t('scenes.app.popup.userparameter.pages.no_night_disturbing_label')}
-          description={Languages.t(
-            'scenes.app.popup.userparameter.pages.no_disturbing_notif_period_description',
-          )}
-        >
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <Switch
-              // TODO: Change the title and add the traduction
-              label={'Enable night feature'}
-              checked={newPreferences.night_break.enable}
-              onChange={(checked: boolean) => {
-                setNewPreferences({
-                  ...newPreferences,
-                  night_break: {
-                    ...newPreferences.night_break,
-                    enable: checked,
-                  },
-                });
-              }}
-            />
-            <div className="parameters_form" style={{ maxWidth: 'none', paddingTop: 10 }}>
-              <div className="text">
-                {Languages.t('scenes.apps.account.notifications.disturb_option_a')}
-                <select
-                  id="after"
-                  className="select_inline"
-                  style={{ width: '80px', display: 'inline-block', margin: '0 10px' }}
-                  value={
-                    NotificationParameters.transform_period(
-                      newPreferences.night_break.from,
-                      newPreferences.night_break.to,
-                      -new Date().getTimezoneOffset() / 60,
-                    )[0]
-                  }
-                  onChange={(evt) => {
-                    setNewPreferences({
-                      ...newPreferences,
-                      night_break: {
-                        ...newPreferences.night_break,
-                        from: NotificationParameters.transform_period(
-                          evt.target.value,
-                          newPreferences.night_break.to,
-                          new Date().getTimezoneOffset() / 60,
-                        )[0],
-                      },
-                    });
-                  }}
-                >
-                  {generateTimeOptions()}
-                </select>
-                {Languages.t('scenes.apps.account.notifications.disturb_option_b')}
-                <select
-                  id="before"
-                  className="select_inline"
-                  style={{ width: '80px', display: 'inline-block', margin: '0 10px' }}
-                  value={
-                    NotificationParameters.transform_period(
-                      newPreferences.night_break.from,
-                      newPreferences.night_break.to,
-                      -new Date().getTimezoneOffset() / 60,
-                    )[1]
-                  }
-                  onChange={(evt) => {
-                    setNewPreferences({
-                      ...newPreferences,
-                      night_break: {
-                        ...newPreferences.night_break,
-                        to: NotificationParameters.transform_period(
-                          newPreferences.night_break.from,
-                          evt.target.value,
-                          new Date().getTimezoneOffset() / 60,
-                        )[1],
-                      },
-                    });
-                  }}
-                >
-                  {generateTimeOptions()}
-                </select>
-                {Languages.t('scenes.apps.account.notifications.disturb_option_c')}
-              </div>
-            </div>
-          </div>
-        </Attribute> */}
-        <Attribute
-          label={Languages.t('scenes.apps.account.notifications.devices_subtitle')}
-          description={Languages.t(
-            'scenes.app.popup.userparameter.pages.frequency_notif_configuration_description',
-          )}
-        >
-          <div className="parameters_form" style={{ maxWidth: 'none', paddingTop: 10 }}>
-            <Radio
-              small
-              label={Languages.t('scenes.apps.account.notifications.devices_option_ever')}
-              value={newPreferences.mobile_notifications === 'always'}
-              onChange={() => {
-                setNewPreferences({
-                  ...newPreferences,
-                  mobile_notifications: 'always',
-                });
-              }}
-            />
-            {/*
-            <br />
-
-            <Radio
-              small
-              label={Languages.t('scenes.apps.account.notifications.devices_option_inactive')}
-              value={newPreferences.mobile_notifications === 'when_inactive'}
-              onChange={() => {
-                setNewPreferences({
-                  ...newPreferences,
-                  mobile_notifications: 'when_inactive',
-                });
-              }}
-            />
-            <br /> */}
-
-            <Radio
-              small
-              label={Languages.t('scenes.apps.account.notifications.devices_option_never')}
-              value={newPreferences.mobile_notifications === 'never'}
-              onChange={() => {
-                setNewPreferences({
-                  ...newPreferences,
-                  mobile_notifications: 'never',
-                });
-              }}
-            />
-          </div>
-        </Attribute>
-        <Attribute
-          label={Languages.t('scenes.apps.account.notifications.mail_subtitle')}
-          description={Languages.t(
-            'scenes.app.popup.userparameter.pages.mail_frequency_notif_configuration_description',
-          )}
-        >
-          <div className="parameters_form" style={{ maxWidth: 'none', paddingTop: 10 }}>
-            {/* TODO: Add an explanatory message */}
-            <div className="parameters_form">
-              <select
-                value={newPreferences.email_notifications_delay}
-                onChange={evt => {
-                  setNewPreferences({
-                    ...newPreferences,
-                    email_notifications_delay: parseInt((evt.target as HTMLSelectElement).value),
-                  });
-                }}
-              >
-                <option value="0">
-                  {Languages.t('scenes.app.popup.userparameter.pages.email_notif_delay_never')}
-                </option>
-                <option value="15">
-                  {Languages.t(
-                    'scenes.app.popup.userparameter.pages.email_notif_delay_quarter_hour',
-                  )}
-                </option>
-                <option value="60">
-                  {Languages.t('scenes.app.popup.userparameter.pages.email_notif_delay_one_hour')}
-                </option>
-                <option value="1440">
-                  {Languages.t('scenes.app.popup.userparameter.pages.email_notif_delay_one_day')}
-                </option>
-              </select>
-            </div>
-          </div>
-        </Attribute>
-        {/* TODO: Add DE and RU traduction and implement the feature */}
-        <Attribute
-          label={Languages.t('scenes.apps.account.notifications.sound')}
-          description={Languages.t('scenes.apps.account.notifications.sound')}
-        >
-          <div className="parameters_form" style={{ maxWidth: 'none', paddingTop: 10 }}>
-            {/* TODO: Add an explanatory message */}
-            <div className="parameters_form">
-              <select
-                value={newPreferences.notification_sound}
-                onChange={evt => {
-                  playNotificationAudio(evt.target.value);
-                  setNewPreferences({
-                    ...newPreferences,
-                    notification_sound: (evt.target as HTMLSelectElement).value,
-                  });
-                }}
-              >
-                <option value="none">
-                  {Languages.t('scenes.app.popup.userparameter.pages.notification_sound.none')}
-                </option>
-                <option value="default">
-                  {Languages.t('scenes.app.popup.userparameter.pages.notification_sound.defaut')}
-                </option>
-                <option value="belligerent">Belligerent</option>
-                <option value="chord">Chord</option>
-                <option value="polite">Polite</option>
-              </select>
-            </div>
-          </div>
-        </Attribute>
-      </div>
-      <div className="group_section">
-        <div className="subtitle">
-          {Languages.t('scenes.apps.account.notifications.privacy_subtitle')}
-        </div>
-        <Attribute
-          label={Languages.t('scenes.app.popup.userparameter.pages.notif_content_label')}
-          description={Languages.t(
-            'scenes.app.popup.userparameter.pages.private_message_content.show',
-          )}
-        >
-          <Switch
-            label={Languages.t(
-              // TODO: Add DE and RU translation
-              newPreferences.private_message_content
-                ? 'scenes.app.popup.userparameter.pages.private_message_content.hide'
-                : 'scenes.app.popup.userparameter.pages.private_message_content.show',
-            )}
-            checked={newPreferences.private_message_content}
-            onChange={(checked: boolean) => {
-              setNewPreferences({
-                ...newPreferences,
-                private_message_content: checked,
-              });
-            }}
-          />
-        </Attribute>
-      </div>
-      <div style={{ textAlign: 'right' }}>
-        <ButtonWithTimeout
-          className="small buttonValidation"
-          disabled={isEqual(newPreferences, notifsPreferences[0].preferences)}
-          onClick={() => saveNewPreferences(newPreferences)}
-          value={Languages.t('general.update')}
-        />
-      </div>
-    </>
-  );
-};
diff --git a/tdrive/frontend/src/app/views/client/popup/UserParameter/UserParameter.jsx b/tdrive/frontend/src/app/views/client/popup/UserParameter/UserParameter.jsx
index 00320183..23a9bb5a 100755
--- a/tdrive/frontend/src/app/views/client/popup/UserParameter/UserParameter.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/UserParameter/UserParameter.jsx
@@ -2,26 +2,25 @@
 /* eslint-disable react/jsx-key */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import LoginService from 'app/features/auth/login-service';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
-import userService from 'app/features/users/services/current-user-service';
-import currentUserService from 'app/deprecated/user/CurrentUser';
-import uploadService from 'app/deprecated/uploadManager/upload-manager.js';
+import Languages from '@features/global/services/languages-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import LoginService from '@features/auth/login-service';
+import popupManager from '@deprecated/popupManager/popupManager.js';
+import userService from '@features/users/services/current-user-service';
+import currentUserService from '@deprecated/user/CurrentUser';
+import uploadService from '@deprecated/uploadManager/upload-manager.js';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
 import Attribute from 'components/parameters/attribute.jsx';
-import Notifications from './Pages/Notifications';
 import Assistant from './Pages/Assistant';
 import MenuList from 'components/menus/menu-component.jsx';
 import './UserParameter.scss';
 import Input from 'components/inputs/input.jsx';
 import { Button } from '../../../../atoms/button/button';
 import { ExternalLinkIcon } from '@heroicons/react/outline';
-import InitService from 'app/features/global/services/init-service';
+import InitService from '@features/global/services/init-service';
 import * as Text from '../../../../atoms/text';
-import workspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import { getFilesTree } from 'app/components/uploads/file-tree-utils';
+import workspaceService from '@deprecated/workspaces/workspaces.jsx';
+import { getFilesTree } from '@components/uploads/file-tree-utils';
 
 export default class UserParameter extends Component {
   constructor(props) {
@@ -606,9 +605,6 @@ export default class UserParameter extends Component {
         </div>
       );
     }
-    if (this.state.page === 3) {
-      return <Notifications />;
-    }
     if (this.state.page === 4) {
       return <Assistant />;
     }
@@ -646,15 +642,6 @@ export default class UserParameter extends Component {
                     this.setPage(4);
                   },
                 },
-                {
-                  type: 'menu',
-                  text: this.state.i18n.t('scenes.apps.account.notifications.title'),
-                  emoji: ':bell:',
-                  selected: this.state.page === 3 ? 'selected' : '',
-                  onClick: () => {
-                    this.setPage(3);
-                  },
-                },
               ]}
             />
           </div>
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/ApplicationsTable.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/ApplicationsTable.tsx
index 7efa5a92..e99afae9 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/ApplicationsTable.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/ApplicationsTable.tsx
@@ -4,13 +4,13 @@ import { ColumnsType } from 'antd/lib/table';
 import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
 import { Divider, Table, Typography, Row, Input, Col, Button } from 'antd';
 
-import { Application } from 'app/features/applications/types/application';
-import Languages from 'app/features/global/services/languages-service';
-import { useApplications } from 'app/features/applications/hooks/use-applications';
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import AvatarComponent from 'app/components/avatar/avatar';
+import { Application } from '@features/applications/types/application';
+import Languages from '@features/global/services/languages-service';
+import { useApplications } from '@features/applications/hooks/use-applications';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import { useCurrentCompany } from '@features/companies/hooks/use-companies';
+import { delayRequest } from '@features/global/utils/managedSearchRequest';
+import AvatarComponent from '@components/avatar/avatar';
 
 import './ApplicationsStyles.scss';
 
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationPopup.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationPopup.tsx
index 7ea66c00..2fa59cac 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationPopup.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationPopup.tsx
@@ -5,12 +5,12 @@ import { capitalize } from 'lodash';
 import { Check } from 'react-feather';
 import { Tabs, Button, Typography, Col, Tag, Descriptions, Row, Divider } from 'antd';
 
-import { Application, ApplicationAccess } from 'app/features/applications/types/application';
-import Languages from 'app/features/global/services/languages-service';
-import AvatarComponent from 'app/components/avatar/avatar';
-import ObjectModal from 'app/components/object-modal/object-modal';
-import ModalManager from 'app/components/modal/modal-manager';
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
+import { Application, ApplicationAccess } from '@features/applications/types/application';
+import Languages from '@features/global/services/languages-service';
+import AvatarComponent from '@components/avatar/avatar';
+import ObjectModal from '@components/object-modal/object-modal';
+import ModalManager from '@components/modal/modal-manager';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
 
 import './ApplicationsStyles.scss';
 
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationsTable.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationsTable.tsx
index f6681c6d..63a0ea70 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationsTable.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Applications/CompanyApplicationsTable.tsx
@@ -7,18 +7,18 @@ import { Divider, Table, Typography, Row, Col, Button, Grid } from 'antd';
 import {
   useCompanyApplications,
   useCompanyApplicationsRealtime,
-} from 'app/features/applications/hooks/use-company-applications';
-import { Application } from 'app/features/applications/types/application';
-import Languages from 'app/features/global/services/languages-service';
-import ModalManager from 'app/components/modal/modal-manager';
-import AvatarComponent from 'app/components/avatar/avatar';
+} from '@features/applications/hooks/use-company-applications';
+import { Application } from '@features/applications/types/application';
+import Languages from '@features/global/services/languages-service';
+import ModalManager from '@components/modal/modal-manager';
+import AvatarComponent from '@components/avatar/avatar';
 import CompanyApplicationPopup from './CompanyApplicationPopup';
 import Menu from 'components/menus/menu';
-import WorkspacesApps from 'app/deprecated/workspaces/workspaces_apps.jsx';
-import AlertManager from 'app/features/global/services/alert-manager-service';
+import WorkspacesApps from '@deprecated/workspaces/workspaces_apps.jsx';
+import AlertManager from '@features/global/services/alert-manager-service';
 import ApplicationEditor from '../../../application-parameters/pages/application-editor';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import AccessRightsService from '@features/workspace-members/services/workspace-members-access-rights-service';
 
 import './ApplicationsStyles.scss';
 
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIdendity.jsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIdendity.jsx
index ae4f44be..2c3e0a42 100755
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIdendity.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIdendity.jsx
@@ -1,10 +1,10 @@
 import { Component } from 'react';
 
-import { getFilesTree } from 'app/components/uploads/file-tree-utils';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
-import groupService from 'app/deprecated/workspaces/groups';
-import Languages from 'app/features/global/services/languages-service';
-import { addApiUrlIfNeeded } from 'app/features/global/utils/URLUtils';
+import { getFilesTree } from '@components/uploads/file-tree-utils';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections';
+import groupService from '@deprecated/workspaces/groups';
+import Languages from '@features/global/services/languages-service';
+import { addApiUrlIfNeeded } from '@features/global/utils/URLUtils';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout';
 import Input from 'components/inputs/input';
 import Attribute from 'components/parameters/attribute';
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIntegrations.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIntegrations.tsx
index a224f0b3..9db98fa6 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIntegrations.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CompanyIntegrations.tsx
@@ -2,13 +2,13 @@ import React, { Suspense } from 'react';
 
 import { Button, Row, Typography } from 'antd';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import ApplicationsTable from './Applications/ApplicationsTable';
 import CompanyApplicationsTable from './Applications/CompanyApplicationsTable';
 import ApplicationCreator from '../../application-parameters/pages/application-creator';
-import ModalManager from 'app/components/modal/modal-manager';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
+import ModalManager from '@components/modal/modal-manager';
+import AccessRightsService from '@features/workspace-members/services/workspace-members-access-rights-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
 
 import './Pages.scss';
 
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CreateCompanyAccount.jsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CreateCompanyAccount.jsx
index 319a3eb1..2a7b9ccf 100755
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CreateCompanyAccount.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/CreateCompanyAccount.jsx
@@ -1,18 +1,18 @@
 /* eslint-disable react/jsx-key */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import AlertManager from 'app/features/global/services/alert-manager-service';
+import Languages from '@features/global/services/languages-service';
+import AlertManager from '@features/global/services/alert-manager-service';
 import Input from 'components/inputs/input.jsx';
 import Button from 'components/buttons/button.jsx';
-import MediumPopupManager from 'app/components/modal/modal-manager';
+import MediumPopupManager from '@components/modal/modal-manager';
 import {
   ObjectModal,
   ObjectModalFormTitle,
   ObjectModalTitle,
 } from 'components/object-modal/deprecated-object-modal.jsx';
-import Api from 'app/features/global/framework/api-service';
-import Workspaces from 'app/deprecated/workspaces/workspaces.jsx';
+import Api from '@features/global/framework/api-service';
+import Workspaces from '@deprecated/workspaces/workspaces.jsx';
 import './pages.scss';
 
 export default class CreateCompanyAccount extends Component {
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/DeleteWorkspacePopup.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/DeleteWorkspacePopup.tsx
index 129d78c1..057aebf5 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/DeleteWorkspacePopup.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/DeleteWorkspacePopup.tsx
@@ -5,14 +5,14 @@ import classNames from 'classnames';
 import { AlertTriangle } from 'react-feather';
 import { Alert, Button, Checkbox, Input, Row, Typography } from 'antd';
 
-import Logger from 'app/features/global/framework/logger-service';
-import { WorkspaceType, WorkspaceUserType } from 'app/features/workspaces/types/workspace';
-import Languages from 'app/features/global/services/languages-service';
-import ObjectModal from 'app/components/object-modal/object-modal';
-import WorkspaceAPIClient from 'app/features/workspaces/api/workspace-api-client';
-import RouterService from 'app/features/router/services/router-service';
-import ModalManager from 'app/components/modal/modal-manager';
-import WorkspaceUserAPIClient from 'app/features/workspace-members/api/workspace-members-api-client';
+import Logger from '@features/global/framework/logger-service';
+import { WorkspaceType, WorkspaceUserType } from '@features/workspaces/types/workspace';
+import Languages from '@features/global/services/languages-service';
+import ObjectModal from '@components/object-modal/object-modal';
+import WorkspaceAPIClient from '@features/workspaces/api/workspace-api-client';
+import RouterService from '@features/router/services/router-service';
+import ModalManager from '@components/modal/modal-manager';
+import WorkspaceUserAPIClient from '@features/workspace-members/api/workspace-members-api-client';
 
 import './styles.scss';
 
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/WorkspaceIdentity.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/WorkspaceIdentity.tsx
index f92b9459..07f2a705 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/WorkspaceIdentity.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/Workspace/WorkspaceIdentity.tsx
@@ -3,17 +3,17 @@ import React, { Suspense, useEffect, useRef, useState } from 'react';
 import { isEqual } from 'lodash';
 import { Avatar, Button, Col, Descriptions, Divider, Input, Row, Switch, Typography } from 'antd';
 
-import Languages from 'app/features/global/services/languages-service';
-import { useCurrentWorkspace } from 'app/features/workspaces/hooks/use-workspaces';
-import AvatarComponent from 'app/components/avatar/avatar';
-import ModalManager from 'app/components/modal/modal-manager';
+import Languages from '@features/global/services/languages-service';
+import { useCurrentWorkspace } from '@features/workspaces/hooks/use-workspaces';
+import AvatarComponent from '@components/avatar/avatar';
+import ModalManager from '@components/modal/modal-manager';
 import DeleteWorkspacePopup from './DeleteWorkspacePopup';
 import WorkspaceAPIClient, {
   WorkspaceUpdateResource,
-} from 'app/features/workspaces/api/workspace-api-client';
-import { ToasterService as Toaster } from 'app/features/global/services/toaster-service';
-import { addApiUrlIfNeeded } from 'app/features/global/utils/URLUtils';
-import { getBase64 } from 'app/features/global/utils/strings';
+} from '@features/workspaces/api/workspace-api-client';
+import { ToasterService as Toaster } from '@features/global/services/toaster-service';
+import { addApiUrlIfNeeded } from '@features/global/utils/URLUtils';
+import { getBase64 } from '@features/global/utils/strings';
 
 const { Item } = Descriptions;
 const { Text, Title, Link } = Typography;
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartner.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartner.tsx
index 77dfae78..bfa96580 100755
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartner.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartner.tsx
@@ -1,26 +1,24 @@
 import React, { useState } from 'react';
 import { Search } from 'react-feather';
 import { Row, Col, Button, Input, Typography, Divider } from 'antd';
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import groupService from 'app/deprecated/workspaces/groups.js';
-import workspacesUsers from 'app/features/workspace-members/services/workspace-members-service';
+import Languages from '@features/global/services/languages-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
+import groupService from '@deprecated/workspaces/groups.js';
+import workspacesUsers from '@features/workspace-members/services/workspace-members-service';
 import Switch from 'components/inputs/switch';
-import Pending from 'app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Pending';
-import Members from 'app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Members';
-import LockedInviteAlert from 'app/components/locked-features-components/locked-invite-alert';
+import Pending from '@views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Pending';
+import Members from '@views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Members';
+import LockedInviteAlert from '@components/locked-features-components/locked-invite-alert';
 import FeatureTogglesService, {
   FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
+} from '@features/global/services/feature-toggles-service';
+import { useCurrentCompany } from '@features/companies/hooks/use-companies';
 
 import './Pages.scss';
 import { useSetRecoilState } from 'recoil';
-import { invitationState } from 'app/features/invitation/state/invitation';
-import { useInvitationUsers } from 'app/features/invitation/hooks/use-invitation-users';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
+import AccessRightsService from '@features/workspace-members/services/workspace-members-access-rights-service';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 
 type PropsType = {
   col: {
@@ -55,8 +53,6 @@ export default () => {
   Languages.useListener();
   const { company } = useCurrentCompany();
   const workspaceId = useRouterWorkspace();
-  const setInvitationState = useSetRecoilState(invitationState);
-  const { allowed_guests, allowed_members } = useInvitationUsers();
 
   const usersInGroup = [];
   Object.keys(workspacesUsers.users_by_group[groupService.currentGroupId] || {}).map(
@@ -115,16 +111,6 @@ export default () => {
       )}
 
       <Row className="small-y-margin" justify="space-between" align="middle">
-        {AccessRightsService.hasLevel(workspaceId, 'moderator') &&
-          (allowed_guests > 0 || allowed_members > 0) && (
-            <Col>
-              <Button type="primary" onClick={() => setInvitationState(true)}>
-                {Languages.t(
-                  'scenes.app.popup.workspaceparameter.pages.collaboraters_adding_button',
-                )}
-              </Button>
-            </Col>
-          )}
         <Col>
           <Input
             placeholder={Languages.t('components.listmanager.filter')}
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/MemberGrade.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/MemberGrade.tsx
index c5c7b00a..812ce754 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/MemberGrade.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/MemberGrade.tsx
@@ -1,5 +1,5 @@
 import { Col, Row, Typography } from 'antd';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import { ChevronsUp, ChevronUp } from 'react-feather';
 const { Text } = Typography;
 
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Members.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Members.tsx
index 6db1e8e1..68f22ef5 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Members.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Members.tsx
@@ -1,27 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import { Table, Row, Typography } from 'antd';
-import AlertManager from 'app/features/global/services/alert-manager-service';
+import AlertManager from '@features/global/services/alert-manager-service';
 import EditIcon from '@material-ui/icons/MoreHorizOutlined';
 import Menu from 'components/menus/menu.jsx';
 import { ColumnsType } from 'antd/lib/table';
-import UserService from 'app/features/users/services/current-user-service';
-import workspacesUsers from 'app/features/workspace-members/services/workspace-members-service';
-import workspaceUserRightsService from 'app/features/workspaces/services/workspace-user-rights-service';
-import InitService from 'app/features/global/services/init-service';
+import UserService from '@features/users/services/current-user-service';
+import workspacesUsers from '@features/workspace-members/services/workspace-members-service';
+import workspaceUserRightsService from '@features/workspaces/services/workspace-user-rights-service';
+import InitService from '@features/global/services/init-service';
 import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
-import Api from 'app/features/global/framework/api-service';
-import ConsoleService from 'app/features/console/services/console-service';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import Icon from 'app/components/icon/icon';
-import { WorkspaceUserType } from 'app/features/workspaces/types/workspace';
-import { useSetUserList } from 'app/features/users/hooks/use-user-list';
-import { useSearchUsers } from 'app/features/users/hooks/use-search-user-list';
+import Api from '@features/global/framework/api-service';
+import ConsoleService from '@features/console/services/console-service';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
+import { delayRequest } from '@features/global/utils/managedSearchRequest';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import Icon from '@components/icon/icon';
+import { WorkspaceUserType } from '@features/workspaces/types/workspace';
+import { useSetUserList } from '@features/users/hooks/use-user-list';
+import { useSearchUsers } from '@features/users/hooks/use-search-user-list';
 import MemberGrade from './MemberGrade';
 
 type ColumnObjectType = { [key: string]: any };
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Pending.tsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Pending.tsx
index b3981f5d..80674291 100644
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Pending.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/Pages/WorkspacePartnerTabs/Pending.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import { Divider, Table, Typography } from 'antd';
 import Menu from 'components/menus/menu.jsx';
 import EditIcon from '@material-ui/icons/MoreHorizOutlined';
 import { ColumnsType } from 'antd/lib/table';
 import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
-import WorkspaceUserAPIClient from 'app/features/workspace-members/api/workspace-members-api-client';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import AccessRightsService from '@features/workspace-members/services/workspace-members-access-rights-service';
+import WorkspaceUserAPIClient from '@features/workspace-members/api/workspace-members-api-client';
 
 type PendingEmailResourceType = {
   company_role: string;
diff --git a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/WorkspaceParameter.jsx b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/WorkspaceParameter.jsx
index ba455e00..25b6f6cc 100755
--- a/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/WorkspaceParameter.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/WorkspaceParameter/WorkspaceParameter.jsx
@@ -1,20 +1,20 @@
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import LoginService from 'app/features/auth/login-service';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
-import userService from 'app/features/users/services/current-user-service';
-import currentUserService from 'app/deprecated/user/CurrentUser';
+import Languages from '@features/global/services/languages-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import LoginService from '@features/auth/login-service';
+import popupManager from '@deprecated/popupManager/popupManager.js';
+import userService from '@features/users/services/current-user-service';
+import currentUserService from '@deprecated/user/CurrentUser';
 import CompanyIntegration from './Pages/CompanyIntegrations';
 import WorkspacePartner from './Pages/WorkspacePartner';
 import CompanyIdendity from './Pages/CompanyIdendity.jsx';
-import WorkspaceUserRights from 'app/features/workspaces/services/workspace-user-rights-service';
-import WorkspaceService from 'app/deprecated/workspaces/workspaces.jsx';
+import WorkspaceUserRights from '@features/workspaces/services/workspace-user-rights-service';
+import WorkspaceService from '@deprecated/workspaces/workspaces.jsx';
 import MenuList from 'components/menus/menu-component.jsx';
-import InitService from 'app/features/global/services/init-service';
-import ConsoleService from 'app/features/console/services/console-service';
+import InitService from '@features/global/services/init-service';
+import ConsoleService from '@features/console/services/console-service';
 
 import './WorkspaceParameter.scss';
 import WorkspaceIdentity from './Pages/Workspace/WorkspaceIdentity';
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/AppsParameters.jsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/AppsParameters.jsx
index f39f0fc5..92176619 100755
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/AppsParameters.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/AppsParameters.jsx
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import Collections from 'app/deprecated/CollectionsV1/Collections/Collections.js';
-import LoginService from 'app/features/auth/login-service';
-import popupManager from 'app/deprecated/popupManager/popupManager.js';
-import userService from 'app/features/users/services/current-user-service';
-import currentUserService from 'app/deprecated/user/CurrentUser';
+import Languages from '@features/global/services/languages-service';
+import Collections from '@deprecated/CollectionsV1/Collections/Collections.js';
+import LoginService from '@features/auth/login-service';
+import popupManager from '@deprecated/popupManager/popupManager.js';
+import userService from '@features/users/services/current-user-service';
+import currentUserService from '@deprecated/user/CurrentUser';
 import WorkspaceApps from './pages/WorkspaceApps.js.js.js.js.js.js.js';
 import WorkspaceAppsInformations from './pages/WorkspaceAppsInformations.jsx';
 import TwacodeTester from './pages/TwacodeTester.jsx';
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/TwacodeTester.jsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/TwacodeTester.jsx
index b3a8fd99..672f7775 100755
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/TwacodeTester.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/TwacodeTester.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import AutoHeight from 'components/auto-height/auto-height.jsx';
 import Twacode from 'components/twacode/twacode';
 
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsEditor.jsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsEditor.jsx
index 8018a3bd..6833fde7 100755
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsEditor.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsEditor.jsx
@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import Api from 'app/features/global/framework/api-service';
+import Api from '@features/global/framework/api-service';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
-import Icon from 'app/components/icon/icon';
+import Icon from '@components/icon/icon';
 import Emojione from 'components/emojione/emojione';
 import Attribute from 'components/parameters/attribute';
 import Input from 'components/inputs/input';
 import TagPicker from 'components/tag-picker/tag-picker';
 import AutoHeight from 'components/auto-height/auto-height';
 import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board';
-import { getCompanyApplication as getApplication } from 'app/features/applications/state/company-applications';
+import { getCompanyApplication as getApplication } from '@features/applications/state/company-applications';
 
 import './pages.scss';
-import WorkspacesApp from 'app/deprecated/workspaces/workspaces_apps.jsx';
+import WorkspacesApp from '@deprecated/workspaces/workspaces_apps.jsx';
 import InlineTagPicker from 'components/inline-tag-picker/inline-tag-picker';
 import Switch from 'components/inputs/switch';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout';
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsInformations.jsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsInformations.jsx
index 18909f54..11e2bec0 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsInformations.jsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/WorkspaceAppsInformations.jsx
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import InputWithClipBoard from 'components/input-with-clip-board/input-with-clip-board.jsx';
-import workspaceService from 'app/deprecated/workspaces/workspaces.jsx';
-import userService from 'app/features/users/services/current-user-service';
+import workspaceService from '@deprecated/workspaces/workspaces.jsx';
+import userService from '@features/users/services/current-user-service';
 import './pages.scss';
 
 export default class WorkspaceAppsInformations extends Component {
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-creator.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-creator.tsx
index cfe8f029..c695c87b 100755
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-creator.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-creator.tsx
@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { Input, Row, Typography, Button, Col, Checkbox } from 'antd';
 
-import Languages from 'app/features/global/services/languages-service';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import { useCurrentCompany } from 'app/features/companies/hooks/use-companies';
-import ApplicationsAPIClient from 'app/features/applications/api/applications-api-client';
+import Languages from '@features/global/services/languages-service';
+import AlertManager from '@features/global/services/alert-manager-service';
+import { useCurrentCompany } from '@features/companies/hooks/use-companies';
+import ApplicationsAPIClient from '@features/applications/api/applications-api-client';
 import {
   buildDefaultApplicationPayload,
   getApplicationIdentityCode,
-} from 'app/features/applications/utils/application';
-import ModalManager from 'app/components/modal/modal-manager';
-import ObjectModal from 'app/components/object-modal/object-modal';
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
+} from '@features/applications/utils/application';
+import ModalManager from '@components/modal/modal-manager';
+import ObjectModal from '@components/object-modal/object-modal';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
 
 import './pages.scss';
 import ApplicationEditor from './application-editor';
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-access.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-access.tsx
index 1a52d160..60265578 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-access.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-access.tsx
@@ -8,9 +8,9 @@ import {
   Application,
   ApplicationAccess as ApplicationAccessType,
   ApplicationScopes,
-} from 'app/features/applications/types/application';
+} from '@features/applications/types/application';
 import { ApplicationHelp } from './application-help';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 
 const { Text, Title } = Typography;
 export const ApplicationAccess = ({
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-api.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-api.tsx
index c9ef6a7d..f0a4c34d 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-api.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-api.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Input, Row, Typography } from 'antd';
 
-import { Application } from 'app/features/applications/types/application';
-import Languages from 'app/features/global/services/languages-service';
+import { Application } from '@features/applications/types/application';
+import Languages from '@features/global/services/languages-service';
 
 const { Text, Link, Title } = Typography;
 export const ApplicationAPI = ({
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-display.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-display.tsx
index 0035ac0e..bb6d98c4 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-display.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-display.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Input, Typography } from 'antd';
 
-import { Application } from 'app/features/applications/types/application';
+import { Application } from '@features/applications/types/application';
 
 const { Text } = Typography;
 export const ApplicationDisplay = ({
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-help.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-help.tsx
index 3eb67732..fa4aa928 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-help.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-help.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Row, Typography } from 'antd';
 
-import Emojione from 'app/components/emojione/emojione';
-import Languages from 'app/features/global/services/languages-service';
+import Emojione from '@components/emojione/emojione';
+import Languages from '@features/global/services/languages-service';
 
 const { Text, Link } = Typography;
 export const ApplicationHelp = () => (
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-identity.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-identity.tsx
index 8cf042b5..b92db619 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-identity.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-identity.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Input, Row, Typography } from 'antd';
 
-import { Application } from 'app/features/applications/types/application';
-import Languages from 'app/features/global/services/languages-service';
+import { Application } from '@features/applications/types/application';
+import Languages from '@features/global/services/languages-service';
 
 const { Title, Text } = Typography;
 export const ApplicationIdentity = ({
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-publication.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-publication.tsx
index 51c0053e..53ca1655 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-publication.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/application-publication.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 import { Button, Row, Typography } from 'antd';
-import { Application } from 'app/features/applications/types/application';
+import { Application } from '@features/applications/types/application';
 
-import Languages from 'app/features/global/services/languages-service';
-import Emojione from 'app/components/emojione/emojione';
-import AlertManager from 'app/features/global/services/alert-manager-service';
-import ApplicationsAPIClient from 'app/features/applications/api/applications-api-client';
-import { ToasterService } from 'app/features/global/services/toaster-service';
+import Languages from '@features/global/services/languages-service';
+import Emojione from '@components/emojione/emojione';
+import AlertManager from '@features/global/services/alert-manager-service';
+import ApplicationsAPIClient from '@features/applications/api/applications-api-client';
+import { ToasterService } from '@features/global/services/toaster-service';
 
 const { Title, Text } = Typography;
 
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/tag-picker.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/tag-picker.tsx
index 240b552e..b1909f4a 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/tag-picker.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/components/tag-picker.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Tag } from 'antd';
 
-import { ApplicationScopes } from 'app/features/applications/types/application';
+import { ApplicationScopes } from '@features/applications/types/application';
 import { defaultApplicationScopes } from '../default-scopes';
 
 export const TagPicker = ({
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/default-scopes.ts b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/default-scopes.ts
index d8cddd1c..ab44a05b 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/default-scopes.ts
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/default-scopes.ts
@@ -1,4 +1,4 @@
-import { ApplicationScopes } from 'app/features/applications/types/application';
+import { ApplicationScopes } from '@features/applications/types/application';
 
 export const defaultApplicationScopes: ApplicationScopes[] = [
   'files',
diff --git a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/index.tsx b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/index.tsx
index e5947bac..d2a3fff2 100644
--- a/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/index.tsx
+++ b/tdrive/frontend/src/app/views/client/popup/application-parameters/pages/application-editor/index.tsx
@@ -3,20 +3,20 @@ import React, { useState } from 'react';
 import { isEqual } from 'lodash';
 import { Tabs, Button, Typography, Col, Row, Divider } from 'antd';
 
-import { Application } from 'app/features/applications/types/application';
-import Languages from 'app/features/global/services/languages-service';
-import AvatarComponent from 'app/components/avatar/avatar';
-import ObjectModal from 'app/components/object-modal/object-modal';
-import AlertManager from 'app/features/global/services/alert-manager-service';
+import { Application } from '@features/applications/types/application';
+import Languages from '@features/global/services/languages-service';
+import AvatarComponent from '@components/avatar/avatar';
+import ObjectModal from '@components/object-modal/object-modal';
+import AlertManager from '@features/global/services/alert-manager-service';
 
 import { ApplicationPublication } from './components/application-publication';
 import { ApplicationIdentity } from './components/application-identity';
 import { ApplicationAPI } from './components/application-api';
 import { ApplicationDisplay } from './components/application-display';
 import { ApplicationAccess } from './components/application-access';
-import ApplicationsAPIClient from 'app/features/applications/api/applications-api-client';
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
-import ModalManager from 'app/components/modal/modal-manager';
+import ApplicationsAPIClient from '@features/applications/api/applications-api-client';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import ModalManager from '@components/modal/modal-manager';
 import { ApplicationHelp } from './components/application-help';
 
 import '../../../WorkspaceParameter/Pages/Applications/ApplicationsStyles.scss';
diff --git a/tdrive/frontend/src/app/views/client/side-bar/actions.tsx b/tdrive/frontend/src/app/views/client/side-bar/actions.tsx
index c9378e35..13240e23 100644
--- a/tdrive/frontend/src/app/views/client/side-bar/actions.tsx
+++ b/tdrive/frontend/src/app/views/client/side-bar/actions.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@atoms/button/button';
 import { PlusIcon, TruckIcon, UploadIcon } from '@heroicons/react/outline';
 import { useCallback, useRef } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -11,6 +10,7 @@ import useRouterCompany from '../../../features/router/hooks/use-router-company'
 import { DriveCurrentFolderAtom } from '../body/drive/browser';
 import { ConfirmDeleteModalAtom } from '../body/drive/modals/confirm-delete';
 import { CreateModal, CreateModalAtom } from '../body/drive/modals/create';
+import { Button } from '@atoms/button/button';
 
 export default () => {
   const companyId = useRouterCompany();
diff --git a/tdrive/frontend/src/app/views/client/viewer/archive/display.tsx b/tdrive/frontend/src/app/views/client/viewer/archive/display.tsx
index 0308f1d8..02406116 100644
--- a/tdrive/frontend/src/app/views/client/viewer/archive/display.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/archive/display.tsx
@@ -1,5 +1,5 @@
-import { Button } from 'app/atoms/button/button';
-import Languages from 'app/features/global/services/languages-service';
+import { Button } from '@atoms/button/button';
+import Languages from '@features/global/services/languages-service';
 
 export default (props: { download: string; name: string }) => {
   return (
diff --git a/tdrive/frontend/src/app/views/client/viewer/display.tsx b/tdrive/frontend/src/app/views/client/viewer/display.tsx
index 33c03faf..a7253c7e 100644
--- a/tdrive/frontend/src/app/views/client/viewer/display.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/display.tsx
@@ -2,7 +2,7 @@ import {
   useFileViewerModal,
   useViewerDataLoading,
   useViewerDisplayData,
-} from 'app/features/viewer/hooks/use-viewer';
+} from '@features/viewer/hooks/use-viewer';
 import ImageDisplay from './images/display';
 import VideoDisplay from './videos/display';
 import PdfDisplay from './pdf/display';
@@ -20,7 +20,7 @@ export default () => {
   }
 
   if (type === 'image') {
-    return <ImageDisplay loading={loading} setLoading={setLoading}  download={download} />;
+    return <ImageDisplay loading={loading} setLoading={setLoading} download={download} />;
   }
 
   if (type === 'video' || type === 'audio') {
diff --git a/tdrive/frontend/src/app/views/client/viewer/drive-display.tsx b/tdrive/frontend/src/app/views/client/viewer/drive-display.tsx
index ea469805..05b0506b 100644
--- a/tdrive/frontend/src/app/views/client/viewer/drive-display.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/drive-display.tsx
@@ -2,7 +2,7 @@ import {
   useDrivePreviewDisplayData,
   useDrivePreviewLoading,
   useDrivePreviewModal,
-} from 'app/features/drive/hooks/use-drive-preview';
+} from '@features/drive/hooks/use-drive-preview';
 import ImageDisplay from './images/display';
 import VideoDisplay from './videos/display';
 import PdfDisplay from './pdf/display';
diff --git a/tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx b/tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx
index ca961a38..3b43cec0 100644
--- a/tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx
@@ -1,21 +1,21 @@
 import { Transition } from '@headlessui/react';
 import { DownloadIcon, XIcon } from '@heroicons/react/outline';
-import { Modal } from 'app/atoms/modal';
+import { useEffect, useState } from 'react';
+import { fadeTransition } from 'src/utils/transitions';
+import Controls from './controls';
+import DriveDisplay from './drive-display';
+import { Button } from '@atoms/button/button';
+import { Loader } from '@atoms/loader';
+import { Modal } from '@atoms/modal';
+import * as Text from '@atoms/text';
 import {
   useDrivePreview,
   useDrivePreviewDisplayData,
   useDrivePreviewLoading,
-} from 'app/features/drive/hooks/use-drive-preview';
-import { addShortcut, removeShortcut } from 'app/features/global/services/shortcut-service';
-import { useEffect, useState } from 'react';
-import { fadeTransition } from 'src/utils/transitions';
-import * as Text from '@atoms/text';
-import { formatDate } from 'app/features/global/utils/format-date';
-import { formatSize } from 'app/features/global/utils/format-file-size';
-import { Button } from 'app/atoms/button/button';
-import DriveDisplay from './drive-display';
-import { Loader } from 'app/atoms/loader';
-import Controls from './controls';
+} from '@features/drive/hooks/use-drive-preview';
+import { addShortcut, removeShortcut } from '@features/global/services/shortcut-service';
+import { formatDate } from '@features/global/utils/format-date';
+import { formatSize } from '@features/global/utils/format-file-size';
 
 export const DrivePreview = (): React.ReactElement => {
   const { isOpen, close, loading } = useDrivePreview();
diff --git a/tdrive/frontend/src/app/views/client/viewer/images/controls.tsx b/tdrive/frontend/src/app/views/client/viewer/images/controls.tsx
index 7adefbf0..92475c2b 100644
--- a/tdrive/frontend/src/app/views/client/viewer/images/controls.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/images/controls.tsx
@@ -1,5 +1,5 @@
-import { Button } from 'app/atoms/button/button';
-import { ZoomOutIcon, ZoomInIcon, RotateCwIcon } from 'app/atoms/icons-agnostic';
+import { Button } from '@atoms/button/button';
+import { ZoomOutIcon, ZoomInIcon, RotateCwIcon } from '@atoms/icons-agnostic';
 import { getImageControls } from './display';
 
 export default () => {
diff --git a/tdrive/frontend/src/app/views/client/viewer/link/display.tsx b/tdrive/frontend/src/app/views/client/viewer/link/display.tsx
index 16be26bf..748f0ddb 100644
--- a/tdrive/frontend/src/app/views/client/viewer/link/display.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/link/display.tsx
@@ -1,5 +1,5 @@
-import { Button } from 'app/atoms/button/button';
-import { useDrivePreviewDisplayData } from 'app/features/drive/hooks/use-drive-preview';
+import { Button } from '@atoms/button/button';
+import { useDrivePreviewDisplayData } from '@features/drive/hooks/use-drive-preview';
 import { useEffect, useState } from 'react';
 
 export default (props: { download: string; name: string }) => {
diff --git a/tdrive/frontend/src/app/views/client/viewer/other/controls.tsx b/tdrive/frontend/src/app/views/client/viewer/other/controls.tsx
index e979e641..6e1b5363 100644
--- a/tdrive/frontend/src/app/views/client/viewer/other/controls.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/other/controls.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Button } from 'app/atoms/button/button';
-import LockedOnlyOfficePopup from 'app/components/locked-features-components/locked-only-office-popup/locked-only-office-popup';
-import ModalManager from 'app/components/modal/modal-manager';
-import { useDrivePreview } from 'app/features/drive/hooks/use-drive-preview';
+import { Button } from '@atoms/button/button';
+import LockedOnlyOfficePopup from '@components/locked-features-components/locked-only-office-popup/locked-only-office-popup';
+import ModalManager from '@components/modal/modal-manager';
+import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
 import FeatureTogglesService, {
   FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
-import Languages from 'app/features/global/services/languages-service';
+} from '@features/global/services/feature-toggles-service';
+import Languages from '@features/global/services/languages-service';
 import MenuManager from 'components/menus/menus-manager';
 import { useEditors } from './editors-service';
 
diff --git a/tdrive/frontend/src/app/views/client/viewer/other/editors-service.ts b/tdrive/frontend/src/app/views/client/viewer/other/editors-service.ts
index b386a413..be273cb9 100644
--- a/tdrive/frontend/src/app/views/client/viewer/other/editors-service.ts
+++ b/tdrive/frontend/src/app/views/client/viewer/other/editors-service.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCompanyApplications } from 'app/features/applications/hooks/use-company-applications';
-import { Application } from 'app/features/applications/types/application';
-import jwtStorageService from 'app/features/auth/jwt-storage-service';
-import useRouterCompany from 'app/features/router/hooks/use-router-company';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
+import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
+import { Application } from '@features/applications/types/application';
+import jwtStorageService from '@features/auth/jwt-storage-service';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
 
 type EditorType = {
   url?: string;
diff --git a/tdrive/frontend/src/app/views/client/viewer/viewer.tsx b/tdrive/frontend/src/app/views/client/viewer/viewer.tsx
index a6c43764..050cdcae 100644
--- a/tdrive/frontend/src/app/views/client/viewer/viewer.tsx
+++ b/tdrive/frontend/src/app/views/client/viewer/viewer.tsx
@@ -1,32 +1,25 @@
-import { DownloadIcon, VerticalDotsIcon } from '@atoms/icons-agnostic';
-import { Modal } from '@atoms/modal';
-import * as Text from '@atoms/text';
 import { Transition } from '@headlessui/react';
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from '@heroicons/react/outline';
-import Avatar from 'app/atoms/avatar';
-import { Button } from 'app/atoms/button/button';
-import { Loader } from 'app/atoms/loader';
-import MenuManager from 'app/components/menus/menus-manager';
-import { openMessage } from 'app/components/search-popup/common';
-import { channelAttachmentListState } from 'app/features/channels/state/channel-attachment-list';
-import Languages from 'app/features/global/services/languages-service';
-import { addShortcut, removeShortcut } from 'app/features/global/services/shortcut-service';
-import { formatDate } from 'app/features/global/utils/format-date';
-import { formatSize } from 'app/features/global/utils/format-file-size';
-import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
-import currentUserService from 'app/features/users/services/current-user-service';
-import { UserType } from 'app/features/users/types/user';
+import { useEffect, useState } from 'react';
+import { fadeTransition, fadeZoomTransition } from 'src/utils/transitions';
+import Controls from './controls';
+import Display from './display';
+import Avatar from '@atoms/avatar';
+import { Button } from '@atoms/button/button';
+import { DownloadIcon } from '@atoms/icons-agnostic';
+import { Loader } from '@atoms/loader';
+import { Modal } from '@atoms/modal';
+import * as Text from '@atoms/text';
+import { addShortcut, removeShortcut } from '@features/global/services/shortcut-service';
+import { formatSize } from '@features/global/utils/format-file-size';
+import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
+import currentUserService from '@features/users/services/current-user-service';
+import { UserType } from '@features/users/types/user';
 import {
   useFileViewer,
   useViewerDataLoading,
   useViewerDisplayData,
-} from 'app/features/viewer/hooks/use-viewer';
-import { Message } from 'features/messages/types/message';
-import { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
-import { fadeTransition, fadeZoomTransition } from 'src/utils/transitions';
-import Controls from './controls';
-import Display from './display';
+} from '@features/viewer/hooks/use-viewer';
 
 let animationTimeout: number = setTimeout(() => undefined);
 
@@ -138,19 +131,10 @@ const Footer = () => {
   const user = status?.details?.user as UserType;
   const name = status.details?.metadata?.name;
   const extension = name?.split('.').pop();
-
   const workspaceId = useRouterWorkspace();
-  const setChannelAttachmentState = useSetRecoilState(channelAttachmentListState);
 
   return (
     <>
-      {status.details?.message && (
-        <div className="z-10 p-5 pb-0 bg-black w-full flex text-white">
-          <Text.Base noColor className="block text-white">
-            {status.details?.message.text.substring(0, 500)}
-          </Text.Base>
-        </div>
-      )}
       <div className="z-10 p-5 bg-black w-full flex text-white">
         <div className="mr-4 w-12">
           <Avatar
@@ -163,8 +147,7 @@ const Footer = () => {
             {name}
           </Text.Base>
           <Text.Info className="whitespace-nowrap">
-            {currentUserService.getFullName(user)} •{' '}
-            {formatDate(status.details?.message?.created_at)} • {extension?.toLocaleUpperCase()},{' '}
+            {currentUserService.getFullName(user)} • {extension?.toLocaleUpperCase()},{' '}
             {formatSize(status.details?.metadata?.size)}
           </Text.Info>
         </div>
@@ -182,43 +165,6 @@ const Footer = () => {
               download && (window.location.href = download);
             }}
           />
-
-          <Button
-            iconSize="lg"
-            className="ml-4 !rounded-full"
-            theme="dark"
-            size="lg"
-            icon={VerticalDotsIcon}
-            onClick={e => {
-              e.stopPropagation();
-
-              MenuManager.openMenu(
-                [
-                  {
-                    type: 'menu',
-                    text: Languages.t('scenes.apps.messages.jump'),
-                    onClick: () => {
-                      close();
-                      setChannelAttachmentState(false);
-                      openMessage(status.details?.message as unknown as Message, workspaceId);
-                    },
-                  },
-                  {
-                    type: 'menu',
-                    text: Languages.t('components.channel_attachement_list.open'),
-                    onClick: () => {
-                      close();
-                      setChannelAttachmentState(true);
-                    },
-                  },
-                ],
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (window as any).getBoundingClientRect(e.target),
-                'top',
-                { margin: 0 },
-              );
-            }}
-          />
         </div>
       </div>
     </>
diff --git a/tdrive/frontend/src/app/views/error/error-boundary.tsx b/tdrive/frontend/src/app/views/error/error-boundary.tsx
index 48a0d8ef..74f2d8f9 100755
--- a/tdrive/frontend/src/app/views/error/error-boundary.tsx
+++ b/tdrive/frontend/src/app/views/error/error-boundary.tsx
@@ -1,11 +1,11 @@
 import React, { ErrorInfo } from 'react';
-import RouterServices from 'app/features/router/services/router-service';
+import RouterServices from '@features/router/services/router-service';
 
-import 'app/styles/ui.less';
+import '@styles/ui.less';
 
 type PropsType = {
-  children: React.ReactElement
-}
+  children: React.ReactElement;
+};
 export default class ErrorBoundary extends React.Component<PropsType, { hasError: boolean }> {
   static lastError: Record<string, Record<string, Error | string>> | null = null;
 
diff --git a/tdrive/frontend/src/app/views/error/index.tsx b/tdrive/frontend/src/app/views/error/index.tsx
index 4a4f774c..742dc7c6 100644
--- a/tdrive/frontend/src/app/views/error/index.tsx
+++ b/tdrive/frontend/src/app/views/error/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import Emojione from 'components/emojione/emojione';
-import RouterServices from 'app/features/router/services/router-service';
-import InitService from 'app/features/global/services/init-service';
+import RouterServices from '@features/router/services/router-service';
+import InitService from '@features/global/services/init-service';
 import ErrorBoundary from './error-boundary';
 
 import './styles.scss';
diff --git a/tdrive/frontend/src/app/views/join/index.tsx b/tdrive/frontend/src/app/views/join/index.tsx
index eac36bda..dc38217f 100644
--- a/tdrive/frontend/src/app/views/join/index.tsx
+++ b/tdrive/frontend/src/app/views/join/index.tsx
@@ -6,17 +6,17 @@ import { Button, Col, Divider, Layout, Row, Space, Typography } from 'antd';
 import {
   MagicLinksJoinResponse,
   MagicLinksJoinService,
-} from 'app/features/workspaces/services/magic-links-service';
-import Languages from 'app/features/global/services/languages-service';
-import RouterService from 'app/features/router/services/router-service';
-import InitService from 'app/features/global/services/init-service';
-import LockedInviteAlert from 'app/components/locked-features-components/locked-invite-alert';
+} from '@features/workspaces/services/magic-links-service';
+import Languages from '@features/global/services/languages-service';
+import RouterService from '@features/router/services/router-service';
+import InitService from '@features/global/services/init-service';
+import LockedInviteAlert from '@components/locked-features-components/locked-invite-alert';
 import FeatureTogglesService, {
   FeatureNames,
-} from 'app/features/global/services/feature-toggles-service';
+} from '@features/global/services/feature-toggles-service';
 
 import './styles.scss';
-import LocalStorage from 'app/features/global/framework/local-storage-service';
+import LocalStorage from '@features/global/framework/local-storage-service';
 
 const { Title, Text } = Typography;
 
diff --git a/tdrive/frontend/src/app/views/login/console/console-login.tsx b/tdrive/frontend/src/app/views/login/console/console-login.tsx
index d334a30e..8fc99668 100644
--- a/tdrive/frontend/src/app/views/login/console/console-login.tsx
+++ b/tdrive/frontend/src/app/views/login/console/console-login.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
-import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import RouterService from 'app/features/router/services/router-service';
+import { useCurrentUser } from '@features/users/hooks/use-current-user';
+import RouterService from '@features/router/services/router-service';
 
 export default () => {
   const { user } = useCurrentUser();
diff --git a/tdrive/frontend/src/app/views/login/internal/error/index.tsx b/tdrive/frontend/src/app/views/login/internal/error/index.tsx
index 715aada3..d730338b 100755
--- a/tdrive/frontend/src/app/views/login/internal/error/index.tsx
+++ b/tdrive/frontend/src/app/views/login/internal/error/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Languages from 'app/features/global/services/languages-service';
+import Languages from '@features/global/services/languages-service';
 import Emojione from 'components/emojione/emojione';
 import './styles.scss';
 import { Button } from 'antd';
-import LoginService from 'app/features/auth/login-service';
+import LoginService from '@features/auth/login-service';
 
 export default () => {
   return (
@@ -11,7 +11,11 @@ export default () => {
       <div className="error_message skew_in_top_nobounce">
         <div className="title">
           <Emojione type="❌" size={32} />{' '}
-          {Languages.t('scenes.login_error', [], 'There was an error while logging you into Tdrive')}
+          {Languages.t(
+            'scenes.login_error',
+            [],
+            'There was an error while logging you into Tdrive',
+          )}
         </div>
         <div className="subtitle">{LoginService.parsed_error_code}</div>
 
diff --git a/tdrive/frontend/src/app/views/login/internal/forgot-password/index.jsx b/tdrive/frontend/src/app/views/login/internal/forgot-password/index.jsx
index 745d9183..bfb08b82 100755
--- a/tdrive/frontend/src/app/views/login/internal/forgot-password/index.jsx
+++ b/tdrive/frontend/src/app/views/login/internal/forgot-password/index.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import LoginService from 'app/features/auth/login-service';
-import AccountService from 'app/deprecated/login/account.js';
+import Languages from '@features/global/services/languages-service';
+import LoginService from '@features/auth/login-service';
+import AccountService from '@deprecated/login/account.js';
 import Emojione from 'components/emojione/emojione';
 import StepCounter from 'components/step-counter/step-counter.jsx';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
diff --git a/tdrive/frontend/src/app/views/login/internal/internal-login.tsx b/tdrive/frontend/src/app/views/login/internal/internal-login.tsx
index daf30246..632b4e8a 100755
--- a/tdrive/frontend/src/app/views/login/internal/internal-login.tsx
+++ b/tdrive/frontend/src/app/views/login/internal/internal-login.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { Typography } from 'antd';
 
-import Globals from 'app/features/global/services/globals-tdrive-app-service';
-import Languages from 'app/features/global/services/languages-service';
-import InitService from 'app/features/global/services/init-service';
-import LoginService from 'app/features/auth/login-service';
-import Icon from 'app/components/icon/icon.jsx';
+import Globals from '@features/global/services/globals-tdrive-app-service';
+import Languages from '@features/global/services/languages-service';
+import InitService from '@features/global/services/init-service';
+import LoginService from '@features/auth/login-service';
+import Icon from '@components/icon/icon.jsx';
 
 import LoginView from './login-view/login-view';
 import Signin from './signin/signin.jsx';
diff --git a/tdrive/frontend/src/app/views/login/internal/login-view/login-view.jsx b/tdrive/frontend/src/app/views/login/internal/login-view/login-view.jsx
index 037832ea..53d353c5 100755
--- a/tdrive/frontend/src/app/views/login/internal/login-view/login-view.jsx
+++ b/tdrive/frontend/src/app/views/login/internal/login-view/login-view.jsx
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import LoginService from 'app/features/auth/login-service';
+import Languages from '@features/global/services/languages-service';
+import LoginService from '@features/auth/login-service';
 import Emojione from 'components/emojione/emojione';
 import Button from 'components/buttons/button.jsx';
 import Input from 'components/inputs/input.jsx';
-import InitService from 'app/features/global/services/init-service';
+import InitService from '@features/global/services/init-service';
 import { Typography } from 'antd';
 export default class LoginView extends Component {
   constructor() {
diff --git a/tdrive/frontend/src/app/views/login/internal/signin/signin.jsx b/tdrive/frontend/src/app/views/login/internal/signin/signin.jsx
index 8354f13f..c88a2dfe 100755
--- a/tdrive/frontend/src/app/views/login/internal/signin/signin.jsx
+++ b/tdrive/frontend/src/app/views/login/internal/signin/signin.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import LoginService from 'app/features/auth/login-service';
+import Languages from '@features/global/services/languages-service';
+import LoginService from '@features/auth/login-service';
 import Emojione from 'components/emojione/emojione';
 import StepCounter from 'components/step-counter/step-counter.jsx';
 import ButtonWithTimeout from 'components/buttons/button-with-timeout.jsx';
diff --git a/tdrive/frontend/src/app/views/login/internal/verify-mail/verify-mail.jsx b/tdrive/frontend/src/app/views/login/internal/verify-mail/verify-mail.jsx
index c705bbfb..363b413d 100755
--- a/tdrive/frontend/src/app/views/login/internal/verify-mail/verify-mail.jsx
+++ b/tdrive/frontend/src/app/views/login/internal/verify-mail/verify-mail.jsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 
-import Languages from 'app/features/global/services/languages-service';
-import LoginService from 'app/features/auth/login-service';
-import AccountService from 'app/deprecated/login/account';
+import Languages from '@features/global/services/languages-service';
+import LoginService from '@features/auth/login-service';
+import AccountService from '@deprecated/login/account';
 import Emojione from 'components/emojione/emojione';
-import WindowState from 'app/features/global/utils/window';
+import WindowState from '@features/global/utils/window';
 
 export default class VerifyMail extends Component {
   constructor() {
diff --git a/tdrive/frontend/src/app/views/login/login.tsx b/tdrive/frontend/src/app/views/login/login.tsx
index 3bc95bec..b7ef0ae5 100644
--- a/tdrive/frontend/src/app/views/login/login.tsx
+++ b/tdrive/frontend/src/app/views/login/login.tsx
@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React, { lazy, Suspense } from 'react';
 
-import InitService from 'app/features/global/services/init-service';
+import InitService from '@features/global/services/init-service';
 
-const InternalLogin = lazy(() => import('app/views/login/internal/internal-login'));
-const ConsoleLogin = lazy(() => import('app/views/login/console/console-login'));
+const InternalLogin = lazy(() => import('@views/login/internal/internal-login'));
+const ConsoleLogin = lazy(() => import('@views/login/console/console-login'));
 
 export default () => (
   <Suspense fallback={<></>}>
diff --git a/tdrive/frontend/src/app/views/login/logout.tsx b/tdrive/frontend/src/app/views/login/logout.tsx
index d598f38d..a4f838ca 100644
--- a/tdrive/frontend/src/app/views/login/logout.tsx
+++ b/tdrive/frontend/src/app/views/login/logout.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React, { useEffect } from 'react';
 
-import LoginService from 'app/features/auth/login-service';
+import LoginService from '@features/auth/login-service';
 
 export default () => {
   useEffect(() => {
diff --git a/tdrive/frontend/src/utils/browser-detect/index.ts b/tdrive/frontend/src/utils/browser-detect/index.ts
index 4d2a367e..6f6ee221 100644
--- a/tdrive/frontend/src/utils/browser-detect/index.ts
+++ b/tdrive/frontend/src/utils/browser-detect/index.ts
@@ -1,5 +1,5 @@
-import Electron from 'app/features/global/framework/electron-service';
-import { getDevice } from 'app/features/global/utils/device';
+import Electron from '@features/global/framework/electron-service';
+import { getDevice } from '@features/global/utils/device';
 import { getBrowserInformation } from './common';
 import { detect } from './detect';
 
diff --git a/tdrive/frontend/src/utils/messages/index.ts b/tdrive/frontend/src/utils/messages/index.ts
deleted file mode 100644
index 21022d1f..00000000
--- a/tdrive/frontend/src/utils/messages/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NodeMessage } from 'app/features/messages/types/message';
-import routerService from 'app/features/router/services/router-service';
-
-/**
- * Go to a specific message.
- * 
- * @param {NodeMessage} message - The message to scroll to
- * @param {String} companyId - The company id
- * @param {String} channelId - The channel id
- * @param {String} workspaceId - The workspace id
- */
-export const gotoMessage = (message: NodeMessage, companyId: string, channelId: string, workspaceId: string): void => {
-  routerService.push(
-    routerService.generateRouteFromState({
-      companyId,
-      channelId,
-      workspaceId,
-      threadId: message.thread_id,
-    }),
-  );
-};