merge from local

packages/app/config/context-menu/default/index.js

@@ -5,7 +5,7 @@ export default {
         if (text) {
             items.push({
                 label: "Copy",
-                icon: "Copy",
+                icon: "FiCopy",
                 action: (clickedItem, ctx) => {
                     copyToClipboard(text)
 
@@ -16,7 +16,7 @@ export default {
 
         items.push({
             label: "Paste",
-            icon: "Clipboard",
+            icon: "FiClipboard",
             action: (clickedItem, ctx) => {
                 app.message.error("This action is not supported by your browser")
 
@@ -26,7 +26,7 @@ export default {
 
         items.push({
             label: "Report a bug",
-            icon: "AlertTriangle",
+            icon: "FiAlertTriangle",
             action: (clickedItem, ctx) => {
                 app.eventBus.emit("app.reportBug", {
                     clickedItem,

packages/app/config/context-menu/post/index.js

@@ -5,7 +5,7 @@ export default {
     "post-card": (items, parent, element, control) => {
         items.push({
             label: "Copy ID",
-            icon: "Copy",
+            icon: "FiCopy",
             action: () => {
                 copyToClipboard(parent.id)
                 control.close()
@@ -14,7 +14,7 @@ export default {
 
         items.push({
             label: "Copy Link",
-            icon: "Link",
+            icon: "FiLink",
             action: () => {
                 copyToClipboard(`${window.location.origin}/post/${parent.id}`)
                 control.close()
@@ -39,7 +39,7 @@ export default {
 
             items.push({
                 label: "Copy media URL",
-                icon: "Copy",
+                icon: "FiCopy",
                 action: () => {
                     copyToClipboard(media.src)
                     control.close()
@@ -48,7 +48,7 @@ export default {
 
             items.push({
                 label: "Open media in new tab",
-                icon: "ExternalLink",
+                icon: "FiExternalLink",
                 action: () => {
                     window.open(media.src, "_blank")
                     control.close()
@@ -57,7 +57,7 @@ export default {
 
             items.push({
                 label: "Download media",
-                icon: "Download",
+                icon: "FiDownload",
                 action: () => {
                     download(media.src)
                     control.close()

packages/app/config/settingsGroupsDecorators.json

@@ -1,19 +1,19 @@
 {
     "general": {
         "title": "General",
-        "icon": "Settings"
+        "icon": "FiSettings"
     },
     "notifications": {
         "title": "Notifications",
-        "icon": "Bell"
+        "icon": "FiBell"
     },
     "sidebar": {
         "title": "Sidebar",
-        "icon": "Layout"
+        "icon": "FiLayout"
     },
     "aspect": {
         "title": "Aspect",
-        "icon": "Eye"
+        "icon": "FiEye"
     },
     "animations": {
         "title": "Animations",
@@ -21,23 +21,23 @@
     },
     "security.account": {
         "title": "Account Security",
-        "icon": "Lock"
+        "icon": "FiLock"
     },
     "security.other": {
         "title": "Others",
-        "icon": "MoreHorizontal"
+        "icon": "FiMoreHorizontal"
     },
     "account.basicInfo": {
         "title": "Basic Information",
-        "icon": "Info"
+        "icon": "FiInfo"
     },
     "account.profile": {
         "title": "Profile",
-        "icon": "Book"
+        "icon": "FiBook"
     },
     "layout": {
         "title": "Layout",
-        "icon": "Layers"
+        "icon": "FiLayers"
     },
     "posts": {
         "title": "Posts",
@@ -53,7 +53,7 @@
     },
     "ui.sounds": {
         "title": "UI Sounds",
-        "icon": "Volume2"
+        "icon": "FiVolume2"
     },
     "privacy.general": {
         "title": "Privacy",

packages/app/config/sidebar/BottomItems.json

@@ -2,23 +2,23 @@
     {
         "id": "search",
         "label": "Search",
-        "icon": "Search"
+        "icon": "FiSearch"
     },
     {
         "id": "messages",
         "label": "Messages",
-        "icon": "MessageCircle",
+        "icon": "FiMessageCircle",
         "path": "/messages"
     },
     {
         "id": "notifications",
         "label": "Notifications",
-        "icon": "Bell"
+        "icon": "FiBell"
     },
     {
         "id": "settings",
         "label": "Settings",
-        "icon": "Settings",
+        "icon": "FiSettings",
         "path": "/settings"
     }
 ]

packages/app/package.json

@@ -16,9 +16,9 @@
     },
     "dependencies": {
         "@ant-design/icons": "^5.4.0",
-        "@capacitor/assets": "^2.0.4",
         "@capacitor/android": "^5.0.5",
         "@capacitor/app": "^5.0.3",
+        "@capacitor/assets": "^2.0.4",
         "@capacitor/cli": "^5.0.5",
         "@capacitor/core": "^5.0.5",
         "@capacitor/haptics": "1.1.4",
@@ -94,4 +94,4 @@
         "vaul": "^0.9.2",
         "vite": "^5.4.4"
     }
-}
+}

packages/app/src/App.jsx

@@ -14,6 +14,8 @@ import { StatusBar, Style } from "@capacitor/status-bar"
 import { App as CapacitorApp } from "@capacitor/app"
 import { CapacitorUpdater } from "@capgo/capacitor-updater"
 
+import AppsMenu from "@components/AppMenu"
+
 import AuthModel from "@models/auth"
 import SessionModel from "@models/session"
 import UserModel from "@models/user"
@@ -119,6 +121,9 @@ class ComtyApp extends React.Component {
 					}
 				})
 			},
+			openAppsMenu: () => {
+				app.layout.drawer.open("apps", AppsMenu)
+			},
 			openRegisterForm: async (options = {}) => {
 				app.layout.drawer.open("Register", UserRegister, {
 					defaultLocked: options.defaultLocked ?? false,
@@ -371,6 +376,10 @@ class ComtyApp extends React.Component {
 	}
 
 	initialization = async () => {
+		// await new Promise((resolve) => {
+		// 	setTimeout(resolve, 8000)
+		// })
+
 		app.eventBus.emit("app.initialization.start")
 
 		console.debug(`[App] Initializing app`)

packages/app/src/components/FeaturedEventAnnouncement/index.jsx

@@ -38,7 +38,7 @@ export default (props) => {
         </div>
 
         <div className="indicator">
-            <Icons.Target /> <span>Featured event</span>
+            <Icons.FiTarget /> <span>Featured event</span>
         </div>
     </div>
 }

packages/app/src/components/FollowersList/index.jsx

@@ -76,7 +76,7 @@ export default (props) => {
 
     if (followers.length === 0) {
         return <antd.Result
-            icon={<Icons.UserX style={{ fontSize: "50px" }} />}
+            icon={<Icons.FiUserX style={{ fontSize: "50px" }} />}
         >
             <h2>
                 It's seems this user has no followers, yet.

packages/app/src/components/Icons/index.jsx

@@ -5,7 +5,7 @@ import VerifiedBadge from "./customIcons/verifiedBadge"
 import Crown from "./customIcons/crown"
 
 // import icons lib
-import * as lib1 from "feather-reactjs"
+import * as lib1 from "react-icons/fi"
 import * as lib2 from "@ant-design/icons"
 import * as lib3 from "react-icons/md"
 import * as lib4 from "react-icons/io"

packages/app/src/components/Login/index.jsx

@@ -234,6 +234,7 @@ class Login extends React.Component {
                 </div>
             </div>
         }
+
         return <div className="login_wrapper">
             <div className="content">
                 <h1>
@@ -256,7 +257,7 @@ class Login extends React.Component {
                         name="username"
                         className="field"
                     >
-                        <span><Icons.Mail /> Username or Email</span>
+                        <span><Icons.FiMail /> Username or Email</span>
                         <antd.Input
                             placeholder="myusername / myemail@example.com"
                             onChange={(e) => this.onUpdateInput("username", e.target.value)}
@@ -275,7 +276,7 @@ class Login extends React.Component {
                             }
                         )}
                     >
-                        <span><Icons.Lock /> Password</span>
+                        <span><Icons.FiLock /> Password</span>
                         <antd.Input.Password
                             //placeholder="********"
                             onChange={(e) => this.onUpdateInput("password", e.target.value)}
@@ -292,7 +293,7 @@ class Login extends React.Component {
                             }
                         )}
                     >
-                        <span><Icons.Lock /> Verification Code</span>
+                        <span><Icons.FiLock /> Verification Code</span>
 
                         {
                             this.state.mfa_required && <>

packages/app/src/components/MusicStudio/ReleaseEditor/index.jsx

@@ -148,7 +148,7 @@ const ReleaseEditor = (props) => {
                             {
                                 customPage.props?.onSave && <antd.Button
                                     type="primary"
-                                    icon={<Icons.Save />}
+                                    icon={<Icons.FiSave />}
                                     onClick={() => customPage.props.onSave()}
                                 >
                                     Save
@@ -179,7 +179,7 @@ const ReleaseEditor = (props) => {
                             <antd.Button
                                 type="primary"
                                 onClick={handleSubmit}
-                                icon={<Icons.Save />}
+                                icon={<Icons.FiSave />}
                                 disabled={submitting || loading || !canFinish()}
                                 loading={submitting}
                             >

packages/app/src/components/MusicStudio/ReleaseEditor/tabs/Tracks/components/TrackListItem/index.jsx

@@ -67,7 +67,7 @@ const TrackListItem = (props) => {
                     <div className="music-studio-release-editor-tracks-list-item-actions">
                         <antd.Button
                             type="ghost"
-                            icon={<Icons.Edit2 />}
+                            icon={<Icons.FiEdit2 />}
                             onClick={onClickEditTrack}
                         />
 

packages/app/src/components/MusicStudio/ReleaseEditor/tabs/Tracks/index.jsx

@@ -314,7 +314,7 @@ class TracksManager extends React.Component {
                     this.state.list.length === 0 ?
                         <UploadHint /> : <antd.Button
                             className="uploadMoreButton"
-                            icon={<Icons.Plus />}
+                            icon={<Icons.FiPlus />}
                         >
                             Add another
                         </antd.Button>

packages/app/src/components/MusicStudio/TrackEditor/index.jsx

@@ -95,7 +95,7 @@ const TrackEditor = (props) => {
 
         <div className="track-editor-field">
             <div className="track-editor-field-header">
-                <Icons.User />
+                <Icons.FiUser />
                 <span>Artist</span>
             </div>
 

packages/app/src/components/Player/BackgroundMediaPlayer/index.jsx

@@ -173,7 +173,7 @@ export class BackgroundMediaPlayer extends React.Component {
                     size="small"
                     shape="rounded"
                     type="ghost"
-                    icon={<Icons.ChevronRight />}
+                    icon={<Icons.FiChevronRight />}
                     onClick={app.cores.player.playback.next}
                 />
 
@@ -181,7 +181,7 @@ export class BackgroundMediaPlayer extends React.Component {
                     size="small"
                     shape="rounded"
                     type="ghost"
-                    icon={<Icons.Minimize />}
+                    icon={<Icons.FiMinimize />}
                     onClick={this.onClickMinimize}
                 />
             </div>

packages/app/src/components/Player/Controls/index.jsx

@@ -57,7 +57,7 @@ const Controls = (props) => {
             <antd.Button
                 type="ghost"
                 shape="round"
-                icon={<Icons.ChevronLeft />}
+                icon={<Icons.FiChevronLeft />}
                 onClick={() => handleAction("previous")}
                 disabled={ctx.control_locked}
             />
@@ -81,7 +81,7 @@ const Controls = (props) => {
             <antd.Button
                 type="ghost"
                 shape="round"
-                icon={<Icons.ChevronRight />}
+                icon={<Icons.FiChevronRight />}
                 onClick={() => handleAction("next")}
                 disabled={ctx.control_locked}
             />
@@ -108,8 +108,8 @@ const Controls = (props) => {
                     >
                         {
                             ctx.muted
-                                ? <Icons.VolumeX />
+                                ? <Icons.FiVolumeX />
-                                : <Icons.Volume2 />
+                                : <Icons.FiVolume2 />
                         }
                     </button>
                 </antd.Popover>

packages/app/src/components/Player/ToolBarPlayer/index.jsx

@@ -128,7 +128,7 @@ const Player = (props) => {
             </antd.Button> */}
 
             <antd.Button
-                icon={<Icons.X />}
+                icon={<Icons.FiX />}
                 shape="circle"
                 onClick={() => app.cores.player.close()}
             />

packages/app/src/components/PostCard/components/actions/index.jsx

@@ -14,14 +14,14 @@ const SelfActionsItems = [
     {
         key: "onClickEdit",
         label: <>
-            <Icons.Edit />
+            <Icons.FiEdit />
             <span>Edit</span>
         </>,
     },
     {
         key: "onClickDelete",
         label: <>
-            <Icons.Trash />
+            <Icons.FiTrash />
             <span>Delete</span>
         </>,
     },
@@ -41,7 +41,7 @@ const MoreActionsItems = [
     {
         key: "onClickShare",
         label: <>
-            <Icons.Share />
+            <Icons.FiShare />
             <span>Share</span>
         </>,
     },
@@ -51,7 +51,7 @@ const MoreActionsItems = [
     {
         key: "onClickReport",
         label: <>
-            <Icons.AlertTriangle />
+            <Icons.FiAlertTriangle />
             <span>Report</span>
         </>,
     },
@@ -122,7 +122,7 @@ export default (props) => {
                     }}
                 >
                     <div className="icon">
-                        <Icons.MoreHorizontal />
+                        <Icons.FiMoreHorizontal />
                     </div>
                 </Dropdown>
             </div>

packages/app/src/components/PostCard/components/actions/replyButton/index.jsx

@@ -12,7 +12,7 @@ export default (props) => {
             type="ghost"
             shape="circle"
             onClick={props.onClick}
-            icon={<Icons.Repeat />}
+            icon={<Icons.FiRepeat />}
         />
         {
             props.count > 0 && <span className="replies_count">{props.count}</span>

packages/app/src/components/PostCard/components/header/index.jsx

@@ -21,7 +21,7 @@ const PostCardHeader = (props) => {
                 className="post-header-replied_to"
             >
                 <div className="post-header-replied_to-label">
-                    <Icons.Repeat />
+                    <Icons.FiRepeat />
 
                     <span>
                         Replied to

packages/app/src/components/PostCard/index.jsx

@@ -154,7 +154,7 @@ export default class PostCard extends React.PureComponent {
 
         return <div className="postCard error">
             <h1>
-                <Icons.AlertTriangle />
+                <Icons.FiAlertTriangle />
                 <span>Cannot render this post</span>
                 <span>
                     Maybe this version of the app is outdated or is not supported yet

packages/app/src/components/PostCreator/index.jsx

@@ -399,7 +399,7 @@ export default class PostCreator extends React.Component {
                     >
                         <antd.Button
                             type="link"
-                            icon={<Icons.Trash />}
+                            icon={<Icons.FiTrash />}
                         />
                     </antd.Popconfirm>
                 }
@@ -583,7 +583,7 @@ export default class PostCreator extends React.Component {
                         type="primary"
                         disabled={loading || !this.canSubmit()}
                         onClick={this.debounceSubmit}
-                        icon={loading ? <Icons.LoadingOutlined spin /> : (editMode ? <Icons.MdEdit /> : <Icons.Send />)}
+                        icon={loading ? <Icons.LoadingOutlined spin /> : (editMode ? <Icons.MdEdit /> : <Icons.FiSend />)}
                     />
                 </div>
             </div>
@@ -619,12 +619,12 @@ export default class PostCreator extends React.Component {
                 <antd.Button
                     type="ghost"
                     onClick={this.handleUploadClick}
-                    icon={<Icons.Upload />}
+                    icon={<Icons.FiUpload />}
                 />
 
                 <antd.Button
                     type="ghost"
-                    icon={<Icons.MdPoll />}
+                    icon={<Icons.FiMdPoll />}
                     onClick={this.handleAddPoll}
                 />
             </div>

packages/app/src/components/PostsList/index.jsx

@@ -71,7 +71,7 @@ const PostList = React.forwardRef((props, ref) => {
                     shape="round"
                     onClick={props.onResumeRealtimeUpdates}
                     loading={props.resumingLoading}
-                    icon={<Icons.SyncOutlined />}
+                    icon={<Icons.FiSyncOutlined />}
                 >
                     Resume
                 </antd.Button>

packages/app/src/components/Searcher/index.jsx

@@ -17,7 +17,7 @@ import "./index.less"
 
 const ResultsTypeDecorators = {
     users: {
-        icon: "Users",
+        icon: "FiUsers",
         label: "Users",
         onClick: (item) => {
             app.navigation.goToAccount(item.username)
@@ -31,7 +31,7 @@ const ResultsTypeDecorators = {
         }
     },
     tracks: {
-        icon: "Album",
+        icon: "FiAlbum",
         label: "Tracks",
         renderItem: (props) => {
             const { item, onClick } = props
@@ -42,7 +42,7 @@ const ResultsTypeDecorators = {
         }
     },
     playlists: {
-        icon: "Album",
+        icon: "FiAlbum",
         label: "Playlists",
         renderItem: (props) => {
             return <div className="suggestion">
@@ -232,7 +232,7 @@ export default (props) => {
             placeholder="Start typing to search..."
             onChange={handleOnSearch}
             value={searchValue}
-            prefix={<Icons.Search />}
+            prefix={<Icons.FiSearch />}
             autoFocus={props.autoFocus ?? false}
             onFocus={props.onFocus}
             onBlur={props.onUnfocus}

packages/app/src/components/SortableList/index.jsx

@@ -141,7 +141,7 @@ export const DragActiveActions = ({
         <Button
             type="primary"
             size="small"
-            icon={<Icons.Check />}
+            icon={<Icons.FiCheck />}
             onClick={() => setActiveDrag(false)}
         />
 

packages/app/src/components/StepsForm/index.jsx

@@ -156,7 +156,7 @@ export default class StepsForm extends React.Component {
                     })
 
                     return () => <div>
-                        <Icons.XCircle /> Error
+                        <Icons.FiXCircle /> Error
                     </div>
                 }
             }, {
@@ -220,7 +220,7 @@ export default class StepsForm extends React.Component {
                 <ActionsBar mode="float">
                     {this.state.step > 0 && (
                         <antd.Button style={{ margin: "0 8px" }} onClick={() => this.prev()}>
-                            <Icons.ChevronLeft />
+                            <Icons.FiChevronLeft />
                             <Translation>
                                 {t => t("Previous")}
                             </Translation>
@@ -228,7 +228,7 @@ export default class StepsForm extends React.Component {
                     )}
                     {this.state.step < steps.length - 1 && (
                         <antd.Button disabled={!this.state.canNext} type="primary" onClick={() => this.next()}>
-                            <Icons.ChevronRight />
+                            <Icons.FiChevronRight />
                             <Translation>
                                 {t => t("Next")}
                             </Translation>

packages/app/src/components/UploadButton/index.jsx

@@ -93,7 +93,7 @@ export default (props) => {
     >
         <div className="uploadButton-content">
             {
-                !progess && (props.icon ?? <Icons.Upload
+                !progess && (props.icon ?? <Icons.FiUpload
                     style={{
                         margin: 0
                     }}

packages/app/src/components/UserCard/index.jsx

@@ -127,9 +127,9 @@ export const UserCard = React.forwardRef((props, ref) => {
         </div>
 
         <div className="description">
-            <h3>
+            <span>
                 {user.description}
-            </h3>
+            </span>
         </div>
 
         {

packages/app/src/components/UserCard/index.less

@@ -337,7 +337,8 @@ html {
 
         h3 {
             margin: 0;
-            font-size: 0.9rem;
+            font-size: 0.8rem;
+            font-weight: normal;
 
             height: 100%;
 

packages/app/src/components/UserRegister/index.jsx

@@ -11,7 +11,7 @@ const steps = [
     {
         key: "username",
         title: "Step 1",
-        icon: "User",
+        icon: "FiUser",
         description: () => <div>
             <p>Enter your username you gonna use for your account, its used to access to your account.</p>
             <p>It must be unique, on lower case, and contain only accepted characters as letters, numbers, underscores.</p>
@@ -141,7 +141,7 @@ const steps = [
     {
         key: "password",
         title: "Step 2",
-        icon: "Key",
+        icon: "FiKey",
         description: "Enter a password for the account. must comply with the password requirements policy.",
         required: true,
         content: (props) => {
@@ -256,7 +256,7 @@ const steps = [
     {
         key: "email",
         title: "Step 3",
-        icon: "Mail",
+        icon: "FiMail",
         description: "Enter a email for the account",
         required: true,
         content: (props) => {

packages/app/src/components/UserSelector/index.jsx

@@ -16,7 +16,7 @@ const ResultsTypeDecorators = {
         label: "Recent"
     },
     "users": {
-        icon: "Users",
+        icon: "FiUsers",
         label: "Users"
     }
 }
@@ -181,7 +181,7 @@ const UserSelector = (props) => {
             placeholder="Start typing to search..."
             onChange={handleOnSearch}
             value={searchValue}
-            prefix={<Icons.Search />}
+            prefix={<Icons.FiSearch />}
             autoFocus={props.autoFocus ?? false}
             onFocus={props.onFocus}
             onBlur={props.onUnfocus}

packages/app/src/components/WidgetItemPreview/index.jsx

@@ -94,8 +94,8 @@ export default React.memo((props) => {
         <div className="widget_preview_item_actions">
             {
                 installed && <antd.Switch
-                    checkedChildren={<Icons.Eye />}
+                    checkedChildren={<Icons.FiEye />}
-                    unCheckedChildren={<Icons.EyeOff />}
+                    unCheckedChildren={<Icons.FiEyeOff />}
                     onChange={(checked) => {
                         props.onChangeVisible(checked)
                         setVisible(checked)
@@ -105,7 +105,7 @@ export default React.memo((props) => {
             }
 
             <antd.Button
-                icon={installed ? <Icons.MdSync /> : <Icons.Plus />}
+                icon={installed ? <Icons.MdSync /> : <Icons.FiPlus />}
                 onClick={installed ? onUpdate : onInstall}
                 type={installed ? "default" : "primary"}
             />
@@ -113,7 +113,7 @@ export default React.memo((props) => {
             {
                 installed && <antd.Button
                     type="primary"
-                    icon={<Icons.Trash />}
+                    icon={<Icons.FiTrash />}
                     onClick={handleItemRemove}
                     danger
                 />

packages/app/src/components/WidgetsBrowser/index.jsx

@@ -53,7 +53,7 @@ export const WidgetBrowser = (props) => {
             placeholder="Start typing to search..."
             onChange={handleOnSearch}
             value={searchValue}
-            prefix={<Icons.Search />}
+            prefix={<Icons.FiSearch />}
             autoFocus
         />
 

packages/app/src/components/WidgetsWrapper/index.jsx

@@ -259,7 +259,7 @@ export default class WidgetsWrapper extends React.Component {
                 activeDragActions={[
                     {
                         id: "settings",
-                        icon: "Settings",
+                        icon: "FiSettings",
                         onClick: () => {
                             app.location.push("/settings?tab=widgets")
                         }

packages/app/src/cores/notifications/ui.jsx

@@ -65,7 +65,7 @@ class NotificationUI {
         }
 
         if (notification.icon) {
-            notfObj.icon = React.isValidElement(notification.icon) ? notification.icon : (createIconRender(notification.icon) ?? <Icons.Bell />)
+            notfObj.icon = React.isValidElement(notification.icon) ? notification.icon : (createIconRender(notification.icon) ?? <Icons.FiBell />)
         }
 
         if (Array.isArray(notification.actions)) {

packages/app/src/cores/windows/components/defaultWindow/index.jsx

@@ -97,7 +97,7 @@ export default class DefaultWindowRender extends React.Component {
 
         actions.push({
             key: "close",
-            render: () => <Icons.XCircle style={{ margin: 0, padding: 0 }} />,
+            render: () => <Icons.FiXCircle style={{ margin: 0, padding: 0 }} />,
             onClick: () => {
                 this.props.close()
             },

packages/app/src/layouts/components/@mobile/bottomBar/index.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import * as antd from "antd"
 import classnames from "classnames"
-import { ActionSheet } from "antd-mobile"
 import { Motion, spring } from "react-motion"
 
 import { Icons, createIconRender } from "@components/Icons"
@@ -63,7 +62,7 @@ const PlayerButton = (props) => {
 
 const AccountButton = React.forwardRef((props, ref) => {
     const user = app.userData
-    const ActionSheetRef = React.useRef()
+    const ActionMenu = React.useRef()
 
     const handleClick = () => {
         if (!user) {
@@ -74,31 +73,34 @@ const AccountButton = React.forwardRef((props, ref) => {
     }
 
     const handleHold = () => {
-        ActionSheetRef.current = ActionSheet.show({
+        ActionMenu.current = app.layout.draggable.actions({
-            actions: [
+            list: [
                 {
                     key: "settings",
-                    text: <><Icons.Settings /> <span>Settings</span></>,
+                    icon: "FiSettings",
+                    label: "Settings",
                     onClick: () => {
                         app.navigation.goToSettings()
-                        ActionSheetRef.current.close()
+                        ActionMenu.current.close()
                     }
                 },
                 {
                     key: "account",
-                    text: <><Icons.User /> <span>Account</span></>,
+                    icon: "FiUser",
+                    label: "Account",
                     onClick: () => {
                         app.navigation.goToAccount()
-                        ActionSheetRef.current.close()
+                        ActionMenu.current.close()
                     }
                 },
                 {
                     key: "logout",
-                    text: <><Icons.MdOutlineLogout /> <span>Logout</span></>,
+                    icon: "FiLogOut",
+                    label: "Logout",
                     danger: true,
                     onClick: () => {
                         app.eventBus.emit("app.logout_request")
-                        ActionSheetRef.current.close()
+                        ActionMenu.current.close()
                     }
                 }
             ]
@@ -116,7 +118,7 @@ const AccountButton = React.forwardRef((props, ref) => {
     >
         <div className="icon">
             {
-                user ? <antd.Avatar shape="square" src={app.userData.avatar} /> : createIconRender("Login")
+                user ? <antd.Avatar shape="square" src={app.userData.avatar} /> : createIconRender("FiLogin")
             }
         </div>
     </div>
@@ -365,7 +367,7 @@ export class BottomBar extends React.Component {
                                     onClick={openCreator}
                                 >
                                     <div className="icon">
-                                        {createIconRender("PlusCircle")}
+                                        {createIconRender("FiPlusCircle")}
                                     </div>
                                 </div>
 
@@ -395,7 +397,7 @@ export class BottomBar extends React.Component {
                                     }}
                                 >
                                     <div className="icon">
-                                        {createIconRender("Home")}
+                                        {createIconRender("FiHome")}
                                     </div>
                                 </div>
 
@@ -406,7 +408,7 @@ export class BottomBar extends React.Component {
                                     onClick={app.controls.openSearcher}
                                 >
                                     <div className="icon">
-                                        {createIconRender("Search")}
+                                        {createIconRender("FiSearch")}
                                     </div>
                                 </div>
 

packages/app/src/layouts/components/@mobile/quickNav/index.jsx

@@ -11,7 +11,7 @@ export const QuickNavMenuItems = [
     },
     {
         id: "tv",
-        icon: "Tv",
+        icon: "FiTv",
         label: "Tv",
         location: "/tv"
     },
@@ -24,7 +24,7 @@ export const QuickNavMenuItems = [
     },
     {
         id: "marketplace",
-        icon: "Box",
+        icon: "FiBox",
         label: "Marketplace",
         location: "/marketplace",
         disabled: true

packages/app/src/layouts/components/draggableDrawer/index.jsx

@@ -1,6 +1,9 @@
 import React from "react"
 import { Drawer } from "vaul"
 
+import {createIconRender} from "@components/Icons"
+import { Translation } from "react-i18next"
+
 import "./index.less"
 
 export class DraggableDrawerController extends React.Component {
@@ -10,6 +13,7 @@ export class DraggableDrawerController extends React.Component {
         this.interface = {
             open: this.open,
             close: this.close,
+            actions: this.actions,
         }
 
         this.state = {
@@ -33,6 +37,16 @@ export class DraggableDrawerController extends React.Component {
         this.destroy(drawer.id)
     }
 
+    actions = (data) => {
+        const win = this.open("actions-menu", ActionsComponent, {
+            componentProps: {
+                ...data,
+            }
+        })
+
+        return win
+    }
+
     open = (id, render, options = {}) => {
         let drawerObj = {
             id: id,
@@ -59,7 +73,10 @@ export class DraggableDrawerController extends React.Component {
             drawers: [...this.state.drawers, drawerObj],
         })
 
-        return true
+        return {
+            ...drawerObj,
+            close: () => this.destroy(id),
+        }
     }
 
     destroy = (id) => {
@@ -136,4 +153,26 @@ export const DraggableDrawer = (props) => {
             </Drawer.Content>
         </Drawer.Portal>
     </Drawer.Root>
+}
+
+const ActionsComponent = (props) => {
+    console.log(props)
+    return <div
+        className="app-drawer-actions"
+    >
+        {
+            props.list.map((action) => {
+                return <div
+                    key={action.id}
+                    className="app-drawer-action"
+                    onClick={() => {
+                        action.onClick()
+                    }}
+                >
+                    {createIconRender(action.icon)}
+                    <span><Translation>{t => t(action.label)}</Translation></span>
+                </div>
+            })
+        }
+    </div>
 }

packages/app/src/layouts/components/draggableDrawer/index.less

@@ -42,4 +42,26 @@
 
 .app-drawer-handle {
     background-color: var(--background-color-contrast);
+}
+
+.app-drawer-actions {
+    display: flex;
+    flex-direction: column;
+
+    gap: 10px;
+
+    color: var(--text-color);
+
+    .app-drawer-action {
+        display: inline-flex;
+        flex-direction: row;
+
+        padding: 10px;
+
+        border-radius: 12px;
+
+        font-size: 1rem;
+
+        background-color: var(--background-color-primary);
+    }
 }

packages/app/src/layouts/components/sidebar/index.jsx

@@ -22,7 +22,7 @@ const ActionMenuItems = [
 	{
 		key: "profile",
 		label: <>
-			<Icons.User />
+			<Icons.FiUser />
 			<Translation>
 				{t => t("Profile")}
 			</Translation>
@@ -40,7 +40,7 @@ const ActionMenuItems = [
 	{
 		key: "addons",
 		label: <>
-			<Icons.Box />
+			<Icons.FiBox />
 			<Translation>
 				{t => t("Addons")}
 			</Translation>
@@ -61,7 +61,7 @@ const ActionMenuItems = [
 	{
 		key: "logout",
 		label: <>
-			<Icons.LogOut />
+			<Icons.FiLogOut />
 			<Translation>
 				{t => t("Logout")}
 			</Translation>
@@ -267,7 +267,7 @@ export default class Sidebar extends React.Component {
 				label: <Translation>
 					{t => t("Login")}
 				</Translation>,
-				icon: <Icons.LogIn />,
+				icon: <Icons.FiLogIn />,
 			})
 		}
 

packages/app/src/pages/account/index.jsx

@@ -227,7 +227,7 @@ export default class Account extends React.Component {
 							{
 								id: "posts",
 								label: "Posts",
-								icon: "BookOpen",
+								icon: "FiBookOpen",
 							},
 							{
 								id: "music",
@@ -237,12 +237,12 @@ export default class Account extends React.Component {
 							{
 								id: "followers",
 								label: "Followers",
-								icon: "Users",
+								icon: "FiUsers",
 							},
 							{
 								id: "details",
 								label: "Details",
-								icon: "Info",
+								icon: "FiInfo",
 							}
 						])}
 					/>

packages/app/src/pages/account/index.mobile.jsx

@@ -19,7 +19,7 @@ import "./index.mobile.less"
 const Tabs = [
     {
         key: "posts",
-        icon: "BookOpen",
+        icon: "FiBookOpen",
         label: <Translation>
             {t => t("Posts")}
         </Translation>,
@@ -27,7 +27,7 @@ const Tabs = [
     },
     {
         key: "followers",
-        icon: "Users",
+        icon: "FiUsers",
         label: <Translation>
             {t => t("Followers")}
         </Translation>,
@@ -35,7 +35,7 @@ const Tabs = [
     },
     {
         key: "details",
-        icon: "Info",
+        icon: "FiInfo",
         label: <Translation>
             {t => t("Details")}
         </Translation>,

packages/app/src/pages/account/tabs/details/index.jsx

@@ -88,7 +88,7 @@ export default (props) => {
         <div className="inline_field">
             <div className="field_header">
                 <div className="field_icon">
-                    <Icons.Users />
+                    <Icons.FiUsers />
                 </div>
 
                 <span>
@@ -106,7 +106,7 @@ export default (props) => {
         <div className="inline_field">
             <div className="field_header">
                 <div className="field_icon">
-                    <Icons.Calendar />
+                    <Icons.FiCalendar />
                 </div>
 
                 <span>
@@ -122,7 +122,7 @@ export default (props) => {
                 header={<>
                     <div className="field_header">
                         <div className="field_icon">
-                            <Icons.Award />
+                            <Icons.FiAward />
                         </div>
 
                         <span>

packages/app/src/pages/account/tabs/posts/index.jsx

@@ -8,7 +8,7 @@ import PostModel from "@models/post"
 
 const emptyListRender = () => {
     return <Result
-        icon={<Icons.UserX style={{ fontSize: "50px" }} />}
+        icon={<Icons.FiUserX style={{ fontSize: "50px" }} />}
     >
         <h2>
             It's seems this user has no public post, yet.

packages/app/src/pages/auth/forms/register/steps/email/index.jsx

@@ -83,7 +83,7 @@ const EmailStepComponent = (props) => {
 export default {
     key: "email",
     title: "Step 3",
-    icon: "Mail",
+    icon: "FiMail",
     description: "Enter a email for the account, it can be used to access to your account. \n Will not be shared with anyone else and not be used for marketing purposes.",
     required: true,
     content: EmailStepComponent,

packages/app/src/pages/auth/forms/register/steps/password/index.jsx

@@ -118,7 +118,7 @@ export const PasswordStepComponent = (props) => {
 export default {
     key: "password",
     title: "Step 2",
-    icon: "Key",
+    icon: "FiKey",
     description: "Enter a password for the account. must comply with the password requirements policy.",
     required: true,
     content: PasswordStepComponent,

packages/app/src/pages/auth/forms/register/steps/username/index.jsx

@@ -155,7 +155,7 @@ export const UsernameStepComponent = (props) => {
 export default {
     key: "username",
     title: "Step 1",
-    icon: "User",
+    icon: "FiUser",
     description: () => <div>
         <p>Enter your username you gonna use for your account, its used to access to your account and give a easy name to identify you.</p>
         <p>You can set a diferent public name for your account after registration.</p>

packages/app/src/pages/auth/forms/selector/index.jsx

@@ -11,7 +11,7 @@ const MainSelector = (props) => {
 
     return <>
         <div className="content_header">
-            <img src={app.isMobile ? config.logo.alt : config.logo.full} className="logo" />
+            <img src={config.logo.alt} className="logo" />
         </div>
 
         <div className="actions">
@@ -23,14 +23,13 @@ const MainSelector = (props) => {
                         app.navigation.goMain()
                     }}
                 >
-                    Continue as {app.userData.username}
+                    <antd.Avatar size={23} shape="square" src={app.userData.avatar} /> Continue as {app.userData.username}
                 </antd.Button>
             }
 
             <antd.Button
                 onClick={onClickLogin}
-                size="large"
+                icon={<Icons.FiLogIn />}
-                icon={<Icons.LogIn />}
                 type="primary"
             >
                 Continue with a Comty™ Account
@@ -38,28 +37,25 @@ const MainSelector = (props) => {
 
             <antd.Button
                 onClick={onClickLogin}
-                size="large"
+                icon={<Icons.FiLogIn />}
-                icon={<Icons.LogIn />}
                 type="primary"
                 disabled
             >
                 Continue with a RageStudio© ID™
             </antd.Button>
-        </div>
 
-        <h4>Or create a new account</h4>
+            <h4>Or create a new account</h4>
 
-        <div className="actions">
             <antd.Button
                 onClick={onClickRegister}
-                icon={<Icons.UserPlus />}
+                icon={<Icons.FiUserPlus />}
                 type="primary"
             >
                 Create a Comty™ Account
             </antd.Button>
 
             <p>
-                <Icons.Info />
+                <Icons.FiInfo />
                 Registering a new account accepts the <a onClick={() => app.location.push("/terms")}>Terms and Conditions</a> and <a onClick={() => app.location.push("/privacy")}>Privacy policy</a> for the services provided by {config.author}
             </p>
         </div>

packages/app/src/pages/auth/index.jsx

@@ -50,7 +50,7 @@ const AuthPage = (props) => {
         changeStage(2)
     }
 
-    return <div className="loginPage">
+    return <div className="login-page">
         <div className="background">
             <GradientSVG />
         </div>

packages/app/src/pages/auth/index.less

@@ -1,4 +1,4 @@
-.loginPage {
+.login-page {
     display: flex;
     flex-direction: column;
 
@@ -87,13 +87,13 @@
 
             min-width: 420px;
 
+            gap: 20px;
+
             padding: 40px;
 
             .content_header {
                 height: 70px;
 
-                margin-bottom: 50px;
-
                 img {
                     width: 100%;
                     height: 100%;
@@ -109,11 +109,10 @@
 
                 width: 100%;
 
-                margin-bottom: 20px;
+                gap: 15px;
 
                 .ant-btn {
                     width: 100%;
-                    margin-bottom: 20px;
 
                     font-weight: 500;
                     letter-spacing: -0.6px;

packages/app/src/pages/creator/music/components/BasicInformation/index.jsx

@@ -106,7 +106,7 @@ export default (props) => {
 
             <div className="field">
                 <div className="field_header">
-                    <Icons.Eye />
+                    <Icons.FiEye />
                     <span>Visibility</span>
                 </div>
 

packages/app/src/pages/creator/music/components/TracksUploads/index.jsx

@@ -91,7 +91,7 @@ const FileItemEditor = (props) => {
 
         <div className="fileItemEditor_field">
             <div className="fileItemEditor_field_header">
-                <Icons.User />
+                <Icons.FiUser />
                 <span>Artist</span>
             </div>
 
@@ -173,7 +173,7 @@ const FileItemEditor = (props) => {
 
         <div className="fileItemEditor_field">
             <div className="fileItemEditor_field_header">
-                <Icons.Tag />
+                <Icons.FiTag />
                 <span>Spotify ID</span>
             </div>
 
@@ -378,7 +378,7 @@ export default (props) => {
                     props.fileList.length === 0 ?
                         <UploadHint /> : <antd.Button
                             className="uploadMoreButton"
-                            icon={<Icons.Plus />}
+                            icon={<Icons.FiPlus />}
                         />
                 }
             </antd.Upload>

packages/app/src/pages/featured-event/[id].jsx

@@ -137,17 +137,17 @@ export default (props) => {
             <div className="panel">
                 <div className="card">
                     <div className="dates">
-                        <Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
+                        <Icons.FiCalendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
                     </div>
 
                     <div className="location">
-                        <Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
+                        <Icons.FiMapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
                     </div>
                 </div>
 
                 <div className="card">
                     <Button>
-                        <Icons.Calendar /> Add to Calendar
+                        <Icons.FiCalendar /> Add to Calendar
                     </Button>
                 </div>
             </div>

packages/app/src/pages/messages/[to_user_id]/index.jsx

@@ -168,7 +168,7 @@ const ChatPage = (props) => {
                 />
                 <antd.Button
                     type="primary"
-                    icon={<Icons.Send />}
+                    icon={<Icons.FiSend />}
                     onClick={submitMessage}
                 />
             </div>

packages/app/src/pages/music/tabs/index.jsx

@@ -6,7 +6,7 @@ export default [
     {
         key: "explore",
         label: "Explore",
-        icon: "Compass",
+        icon: "FiCompass",
         component: ExploreTab
     },
     {
@@ -24,7 +24,7 @@ export default [
     {
         key: "radio",
         label: "Radio",
-        icon: "Radio",
+        icon: "FiRadio",
         disabled: true
     },
 ]

packages/app/src/pages/music/tabs/spaces/index.jsx

@@ -28,7 +28,7 @@ export default () => {
             <div className="spacesExplorer_header_actions">
                 <antd.Button
                     type="primary"
-                    icon={<Icons.PlusCircle />}
+                    icon={<Icons.FiPlusCircle />}
                 >
                     Create
                 </antd.Button>

packages/app/src/pages/nfc/[tag_id].jsx

@@ -18,8 +18,6 @@ export default (props) => {
             return false
         }
 
-        console.log(result)
-
         switch (result.behavior.type) {
             case "url": {
                 return window.location.href = result.behavior.value

packages/app/src/pages/post/[post_id].jsx

@@ -44,7 +44,7 @@ const PostPage = (props) => {
 
         {
             !!result.hasReplies && <div className="post-page-replies">
-                <h1><Icons.Repeat />Replies</h1>
+                <h1><Icons.FiRepeat />Replies</h1>
 
                 <PostsList
                     disableReplyTag

packages/app/src/pages/settings/components/SettingItemComponent/index.jsx

@@ -507,7 +507,7 @@ export default class SettingItemComponent extends React.PureComponent {
                     {
                         this.state.debouncedValue && <antd.Button
                             type="round"
-                            icon={<Icons.Save />}
+                            icon={<FiSave />}
                             onClick={async () => await this.dispatchUpdate(this.state.debouncedValue)}
                         >
                             Save

packages/app/src/pages/settings/index.jsx

@@ -25,7 +25,7 @@ const extraMenuItems = [
         label: <div style={{
             color: "#f72585"
         }}>
-            {createIconRender("Heart")}
+            {createIconRender("FiHeart")}
             Support us
         </div>,
     },

packages/app/src/pages/studio/music/index.jsx

@@ -16,7 +16,7 @@ const MusicStudioPage = (props) => {
 
             <antd.Button
                 type="primary"
-                icon={<Icons.PlusCircle />}
+                icon={<Icons.FiPlusCircle />}
                 onClick={() => {
                     app.location.push("/studio/music/new")
                 }}

packages/app/src/pages/studio/tv/components/ProfileConnection/index.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import * as antd from "antd"
 
-import useRequest from "comty.js/dist/hooks/useRequest"
+import useRequest from "comty.js/hooks/useRequest"
 import Streaming from "@models/spectrum"
 
 const ProfileConnection = (props) => {

packages/app/src/pages/timeline/index.jsx

@@ -12,7 +12,7 @@ export default class Home extends React.Component {
             extraItems={[
                 {
                     key: "create",
-                    icon: "PlusCircle",
+                    icon: "FiPlusCircle",
                     label: <Translation>{(t) => t("Create")}</Translation>,
                     props: {
                         type: "primary",

packages/app/src/pages/timeline/tabs.jsx

@@ -12,13 +12,13 @@ export default [
     {
         key: "global",
         label: "Global",
-        icon: "Globe",
+        icon: "FiGlobe",
         component: GlobalTab
     },
     {
         key: "savedPosts",
         label: "Saved posts",
-        icon: "Bookmark",
+        icon: "FiBookmark",
         component: SavedPostsTab
     }
 ]

packages/app/src/pages/tv/live/[id].jsx

@@ -326,7 +326,7 @@ export default class StreamViewer extends React.Component {
                                         {
                                             !this.state.isEnded && <div className="livestream_player_header_user_spectators">
                                                 <antd.Tag
-                                                    icon={<Icons.Eye />}
+                                                    icon={<Icons.FiEye />}
                                                 >
                                                     {this.state.spectators}
                                                 </antd.Tag>
@@ -388,7 +388,7 @@ export default class StreamViewer extends React.Component {
                 <div className="chatbox">
                     {
                         !this.state.cinemaMode && <div className="chatbox_header">
-                            <h4><Icons.MessageCircle /> Live chat</h4>
+                            <h4><Icons.FiMessageCircle /> Live chat</h4>
                         </div>
                     }
                     <LiveChat

packages/app/src/pages/tv/tabs.jsx

@@ -4,13 +4,13 @@ export default [
     {
         key: "live",
         label: "Livestreams",
-        icon: "Radio",
+        icon: "FiRadio",
         component: LivestreamsList
     },
     {
         key: "videos",
         label: "Videos",
-        icon: "Video",
+        icon: "FiVideo",
         component: LivestreamsList,
         disabled: true,
     },
@@ -22,13 +22,13 @@ export default [
             {
                 key: "controlPanel.uploads",
                 label: "Uploads",
-                icon: "Upload",
+                icon: "FiUpload",
                 disabled: true
             },
             {
                 key: "controlPanel.streaming_settings",
                 label: "Stream Configuration",
-                icon: "Settings",
+                icon: "FiSettings",
                 disabled: true,
             },
             {

packages/app/src/settings/about/index.jsx

@@ -18,7 +18,7 @@ const connectionsTooltipStrings = {
 
 export default {
     id: "about",
-    icon: "Info",
+    icon: "FiInfo",
     label: "About",
     group: "bottom",
     render: () => {
@@ -81,9 +81,9 @@ export default {
                     </div>
                 </div>
                 <div className="versions">
-                    <antd.Tag><Icons.Tag />v{window.app.version ?? "experimental"}</antd.Tag>
+                    <antd.Tag><Icons.FiTag />v{window.app.version ?? "experimental"}</antd.Tag>
                     <antd.Tag color={isProduction ? "green" : "magenta"}>
-                        {isProduction ? <Icons.CheckCircle /> : <Icons.Triangle />}
+                        {isProduction ? <Icons.FiCheckCircle /> : <Icons.FiTriangle />}
                         {String(import.meta.env.MODE)}
                     </antd.Tag>
                 </div>
@@ -91,7 +91,7 @@ export default {
 
             <div className="group">
                 <div className="group_header">
-                    <h3><Icons.Info />Server information</h3>
+                    <h3><Icons.FiInfo />Server information</h3>
                 </div>
 
                 <div className="field">

packages/app/src/settings/apparence/index.jsx

@@ -6,7 +6,7 @@ import "./index.less"
 
 export default {
     id: "apparence",
-    icon: "Eye",
+    icon: "FiEye",
     label: "Apparence",
     group: "app",
     order: 1,
@@ -14,7 +14,7 @@ export default {
         {
             id: "style:variant_mode",
             group: "aspect",
-            icon: "Moon",
+            icon: "FiMoon",
             title: "Theme",
             description: "Change the theme of the application.",
             component: loadable(() => import("../components/themeVariantSelector")),
@@ -135,7 +135,7 @@ export default {
             extraActions: [
                 {
                     id: "delete",
-                    icon: "Delete",
+                    icon: "FiDelete",
                     title: "Remove",
                     onClick: (ctx) => {
                         return ctx.dispatchUpdate("")

packages/app/src/settings/components/changePassword/index.jsx

@@ -69,7 +69,7 @@ const ChangePasswordComponent = (props) => {
 
     return <div className="changePasswordPrompt">
         <div className="title">
-            <h1><Icons.Lock />Change Password</h1>
+            <h1><Icons.FiLock />Change Password</h1>
         </div>
 
         <div className="form">

packages/app/src/settings/components/profileLinks/index.jsx

@@ -104,7 +104,7 @@ export default class ProfileEditor extends React.Component {
                         <Button
                             className="profile_links_field_removebtn"
                             onClick={() => this.remove(index)}
-                            icon={<Icons.Trash />}
+                            icon={<Icons.FiTrash />}
                             shape="circle"
                         />
                     </div>
@@ -113,7 +113,7 @@ export default class ProfileEditor extends React.Component {
 
             <Button
                 onClick={this.add}
-                icon={<Icons.Plus />}
+                icon={<Icons.FiPlus />}
             >
                 Add
             </Button>

packages/app/src/settings/components/sessionItem/index.jsx

@@ -32,7 +32,7 @@ const DeviceIcon = (props) => {
             return <FirefoxIcon />
         }
         default: {
-            return <Icons.Globe />
+            return <Icons.FiGlobe />
         }
     }
 }
@@ -86,12 +86,12 @@ const SessionItem = (props) => {
             <antd.Badge dot={isCurrentSession}>
                 <div className="security_sessions_list_item_info">
                     <div className="security_sessions_list_item_title">
-                        <h3><Icons.Tag /> {session.session_uuid}</h3>
+                        <h3><Icons.FiTag /> {session.session_uuid}</h3>
                     </div>
 
                     <div className="security_sessions_list_item_info_details">
                         <div className="security_sessions_list_item_info_details_item">
-                            <Icons.Clock />
+                            <Icons.FiClock />
 
                             <span>
                                 {moment(session.date).format("DD/MM/YYYY HH:mm")}
@@ -130,7 +130,7 @@ const SessionItem = (props) => {
 
             {
                 ua.device.vendor && <div className="security_sessions_list_item_info_details_item">
-                    <Icons.Cpu />
+                    <Icons.FiCpu />
 
                     <span>
                         {ua.device.vendor} | {ua.device.model}

packages/app/src/settings/components/urlInput/index.jsx

@@ -28,7 +28,7 @@ export default (props) => {
             />
 
             <Button
-                icon={<Icons.Save />}
+                icon={<Icons.FiSave />}
                 onClick={() => props.ctx.dispatchUpdate(value)}
             />
         </Input.Group>

packages/app/src/settings/components/widgetsManager/index.jsx

@@ -49,7 +49,7 @@ export default class WidgetsManager extends React.Component {
                 >
                     <antd.Button
                         type="primary"
-                        icon={<Icons.Plus />}
+                        icon={<Icons.FiPlus />}
                         onClick={openWidgetsBrowserModal}
                     >
                         Install more

packages/app/src/settings/general/index.jsx

@@ -2,7 +2,7 @@ import config from "@config"
 
 export default {
     id: "general",
-    icon: "Command",
+    icon: "FiCommand",
     label: "General",
     group: "app",
     order: 0,

packages/app/src/settings/notifications/index.jsx

@@ -2,7 +2,7 @@ import React from "react"
 
 export default {
     id: "notifications",
-    icon: "Bell",
+    icon: "FiBell",
     label: "Notifications",
     group: "basic",
     settings: [

packages/app/src/settings/player/index.jsx

@@ -73,7 +73,7 @@ export default {
         {
             id: "player.compressor.values",
             title: "Compression",
-            icon: "Sliders",
+            icon: "FiSliders",
             group: "general",
             description: "Adjust compression values (Warning: may cause distortion when changing values)",
             experimental: true,

packages/app/src/settings/privacy/index.jsx

@@ -22,7 +22,7 @@ export default {
     ],
     footer: () => {
         return <div className="reminder">
-            <Icons.Info /> Take a look to our <a href="/privacy" target="_blank">privacy policy</a>.
+            <Icons.FiInfo /> Take a look to our <a href="/privacy" target="_blank">privacy policy</a>.
         </div>
     }
 }

packages/app/src/settings/profile/index.jsx

@@ -4,7 +4,7 @@ import UploadButton from "@components/UploadButton"
 
 export default {
     id: "profile",
-    icon: "User",
+    icon: "FiUser",
     label: "Profile",
     group: "basic",
     ctxData: async () => {
@@ -19,7 +19,7 @@ export default {
             id: "username",
             group: "account.basicInfo",
             component: "Button",
-            icon: "AtSign",
+            icon: "FiAtSign",
             title: "Username",
             description: "Your username is the name you use to log in to your account.",
             props: {
@@ -31,7 +31,7 @@ export default {
             id: "public_name",
             group: "account.basicInfo",
             component: "Input",
-            icon: "Edit3",
+            icon: "FiEdit3",
             title: "Name",
             description: "Change your public name",
             props: {
@@ -70,7 +70,7 @@ export default {
             id: "email",
             group: "account.basicInfo",
             component: "Input",
-            icon: "Mail",
+            icon: "FiMail",
             title: "Email",
             description: "Change your email address",
             props: {
@@ -96,7 +96,7 @@ export default {
         {
             id: "avatar",
             group: "account.profile",
-            icon: "Image",
+            icon: "FiImage",
             title: "Avatar",
             description: "Change your avatar (Upload an image or use an URL)",
             component: loadable(() => import("../components/urlInput")),
@@ -120,7 +120,7 @@ export default {
         {
             id: "cover",
             group: "account.profile",
-            icon: "Image",
+            icon: "FiImage",
             title: "Cover",
             description: "Change your profile cover (Upload an image or use an URL)",
             component: loadable(() => import("../components/urlInput")),
@@ -145,7 +145,7 @@ export default {
             id: "description",
             group: "account.profile",
             component: "TextArea",
-            icon: "Edit3",
+            icon: "FiEdit3",
             title: "Description",
             description: "Change your description for your profile",
             props: {

packages/app/src/settings/security/index.jsx

@@ -2,7 +2,7 @@ import loadable from "@loadable/component"
 
 export default {
     id: "security",
-    icon: "Shield",
+    icon: "FiShield",
     label: "Security",
     group: "basic",
     settings: [
@@ -11,7 +11,7 @@ export default {
             group: "security.account",
             title: "Change Password",
             description: "Change your password",
-            icon: "Lock",
+            icon: "FiLock",
             component: loadable(() => import("../components/changePassword")),
         },
         {
@@ -30,7 +30,7 @@ export default {
             group: "security.account",
             title: "Sessions",
             description: "Manage your active sessions",
-            icon: "Monitor",
+            icon: "FiMonitor",
             component: loadable(() => import("../components/sessions")),
         }
     ]

packages/app/src/settings/tap_share/index.jsx

@@ -164,6 +164,7 @@ class OwnTags extends React.Component {
         loading: true,
         error: null,
         data: null,
+        editorOpen: false,
     }
 
     loadData = async () => {
@@ -193,6 +194,23 @@ class OwnTags extends React.Component {
         })
     }
 
+    handleOpenEditor = (props) => {
+        this.setState({
+            editorOpen: true
+        })
+
+        OpenTagEditor({
+            ...props,
+            onFinish: () => {
+                this.setState({
+                    editorOpen: false
+                })
+
+                this.loadData()
+            }
+        })
+    }
+
     handleTagDelete = (tag) => {
         antd.Modal.confirm({
             title: "Are you sure you want to delete this tag?",
@@ -213,6 +231,10 @@ class OwnTags extends React.Component {
     }
 
     handleTagRead = async (error, tag) => {
+        if (this.state.editorOpen) {
+            return false
+        }
+
         if (error) {
             console.error(error)
             return false
@@ -222,12 +244,12 @@ class OwnTags extends React.Component {
             return ownedTag.serial === tag.serialNumber
         })
 
-        if (!ownedTag && app.layout.drawer.drawersLength() === 0) {
+        if (!ownedTag) {
             app.message.error("This tag is not registered or you don't have permission to edit it.")
             return false
         }
 
-        return OpenTagEditor({
+        return this.handleOpenEditor({
             tag: ownedTag
         })
     }
@@ -243,6 +265,7 @@ class OwnTags extends React.Component {
     }
 
     render() {
+        console.log(this.state)
         if (this.state.loading) {
             return <div className="tap-share-own_tags">
                 <antd.Skeleton />
@@ -268,8 +291,8 @@ class OwnTags extends React.Component {
                         key={tag.serialNumber}
                         tag={tag}
                         onEdit={() => {
-                            OpenTagEditor({
+                            this.handleOpenEditor({
-                                tag
+                                tag: tag
                             })
                         }}
                         onDelete={() => {
@@ -278,15 +301,35 @@ class OwnTags extends React.Component {
                     />
                 })
             }
+
+            {
+                app.isMobile && <antd.Button
+                    type="primary"
+                    icon={<Icons.FiPlus />}
+                    onClick={() => this.handleOpenEditor({})}
+                    className="tap-share-own_tags-add"
+                >
+                    Add new
+                </antd.Button>
+            }
         </div>
     }
 }
 
 const OpenTagEditor = ({ tag, onFinish = () => app.navigation.softReload() } = {}) => {
-    app.layout.drawer.open("tag_register", RegisterNewTag, {
+    if (!app.layout.draggable) {
+        return app.layout.drawer.open("tag_register", RegisterNewTag, {
+            props: {
+                onFinish: onFinish,
+                tagData: tag,
+            }
+        })
+    }
+
+    return app.layout.draggable.open("tag_register", RegisterNewTag, {
         componentProps: {
-            tagData: tag,
             onFinish: onFinish,
+            tagData: tag,
         }
     })
 }
@@ -329,16 +372,6 @@ const TapShareRender = () => {
                 editMode
             />
         </div>
-
-        {
-            app.isMobile && <antd.Button
-                type="primary"
-                icon={<Icons.Plus />}
-                onClick={() => OpenTagEditor()}
-            >
-                Add new
-            </antd.Button>
-        }
     </div>
 }
 

packages/app/src/settings/tap_share/index.less

@@ -42,9 +42,13 @@
     flex-direction: column;
 
     align-items: center;
-
+    
     gap: 10px;
 
+    .tap-share-own_tags-add {
+        width: 100%;
+    }
+
     .tap-share-own_tags-item {
         display: flex;
         flex-direction: row;
@@ -151,13 +155,14 @@
         }
 
         .tap-share-register-header-back {
-            font-size: 5rem;
+            font-size: 2rem;
             color: var(--colorPrimary);
 
             &.hidden {
                 width: 0;
                 height: 0;
                 padding: 0;
+                display: none;
             }
         }
 
@@ -175,18 +180,12 @@
         display: flex;
         flex-direction: column;
 
-        align-items: center;
-        justify-content: center;
-
         height: 100%;
 
         .tap-share-register_step {
             display: flex;
             flex-direction: column;
 
-            justify-content: center;
-            align-items: flex-start;
-
             height: 100%;
             width: 100%;
 
@@ -194,8 +193,13 @@
 
             transition: all 150ms ease-in-out;
 
+            .adm-input-element {
+                color: var(--text-color);
+            }
+
             h1 {
                 transition: all 150ms ease-in-out;
+                color: var(--text-color);
             }
 
             &.centered {
@@ -236,13 +240,16 @@
                             height: fit-content;
                             padding: 0;
                             margin: 0;
-                        }
 
+                            color: var(--text-color);
+                        }
                     }
 
                     .description {
                         font-size: 0.8rem;
                         opacity: 0.8;
+
+                        color: var(--text-color);
                     }
                 }
             }
@@ -256,6 +263,8 @@
                 gap: 20px;
 
                 padding: 10px;
+
+                color: var(--text-color);
             }
         }
     }

packages/app/src/settings/tap_share/steps/data_editor/index.jsx

@@ -80,10 +80,11 @@ export default (props) => {
                     disabled
                 />
             </antd.Form.Item>
+
             <antd.Form.Item
                 name="alias"
                 label={<>
-                    <Icons.Tag />
+                    <Icons.FiTag />
                     Alias
                 </>}
                 rules={[

packages/app/src/settings/widgets/index.jsx

@@ -4,7 +4,7 @@ import WidgetsManager from "../components/widgetsManager"
 
 export default {
     id: "widgets",
-    icon: "List",
+    icon: "FiList",
     label: "Widgets",
     group: "app",
     render: () => {

packages/app/vite.config.js

@@ -41,6 +41,15 @@ export default defineConfig({
     },
     build: {
         target: "esnext",
+        rollupOptions: {
+            output:{
+                manualChunks(id) {
+                    if (id.includes('node_modules')) {
+                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
+                    }
+                }
+            }
+        }
     },
     esbuild: {
         supported: {