refactor & clean icons

.vscode/functions_schemas.code-snippets

@@ -6,7 +6,7 @@
 		"body": [
 			"import verbosity from 'core/libs/verbosity'",
 			"import handle from 'core/libs/errorhandler'",
-			"import { notify } from 'core/libs/appInterface'",
+			"import { notify } from 'core/libs/ui'",
 			"import settings from 'core/libs/settings'",
 			"import endpoints from 'config/endpoints'",
 			"import { v3_model } from 'core/libs'",

config/handlers/flagToBehavior.js

@@ -1,34 +1,34 @@
 import { notification, message } from 'antd'
-import * as Icons from 'components/Icons'
+import { FieldTimeOutlined } from 'components/Icons'
 import errStrings from 'config/handlers/errToStrings.js'
 import errNumbers from 'config/handlers/numToError.js'
-import errFlags from  'config/handlers/errToFlag.js'
+import errFlags from 'config/handlers/errToFlag.js'
 
 export default {
-    SESSION_INVALID: (payload) => {
+  SESSION_INVALID: (payload) => {
-        notification.error({
+    notification.error({
-          message: payload.msg ?? 'Hey',
+      message: payload.msg ?? 'Hey',
-          icon: <Icons.FieldTimeOutlined />,
+      icon: <FieldTimeOutlined />,
-          description: errStrings[payload.out] ?? "This session is not valid",
+      description: errStrings[payload.out] ?? "This session is not valid",
-          placement: 'bottomLeft',
+      placement: 'bottomLeft',
-        })
+    })
-    },
+  },
-    OVERLAY_BADPOSITION: () => {
+  OVERLAY_BADPOSITION: () => {
-        
-    },
-    INTERNAL_PROCESS_FAILED: () =>{
 
-    },
+  },
-    INVALID_DATA: () => {
+  INTERNAL_PROCESS_FAILED: () => {
 
-    },
+  },
-    INVALID_PROPS: () => {
+  INVALID_DATA: () => {
 
-    },
+  },
-    MISSING_REQUIRED_PAYLOAD: () => {
+  INVALID_PROPS: () => {
 
-    },
+  },
-    INVALID_INDEX: () => {
+  MISSING_REQUIRED_PAYLOAD: () => {
 
-    }
+  },
+  INVALID_INDEX: () => {
+
+  }
 }

globals/contextMenu.js

@@ -1,10 +1,9 @@
-import * as Icons from 'components/Icons'
+import { Command } from 'components/Icons'
-
 export default [
  {
    key: "inspect_element",
    title: "Inspect",
-   icon: <Icons.Command />,
+   icon: <Command />,
    require: "embedded",
    params: {
      onClick: (e) => {

globals/settings.js

@@ -1,37 +1,37 @@
-import * as Icons from 'components/Icons'
+import { Watch, CornerDownRight, Menu, AlignCenter, Terminal } from 'components/Icons'
 
 export default [
   {
     id: 'session_noexpire',
-    icon: <Icons.Watch />,
+    icon: <Watch />,
     type: 'switch',
     title: 'No expire session',
     description: 'Force the app to not expire any session... [Developer]',
   },
   {
     id: 'search_ontype',
-    icon: <Icons.CornerDownRight />,
+    icon: <CornerDownRight />,
     type: 'switch',
     title: 'Detect input on search bar',
     description: 'Force the app to automaticly search when a type input is detected... [Developer]',
   },
   {
     id: 'post_hidebar',
-    icon: <Icons.Menu />,
+    icon: <Menu />,
     type: 'switch',
     title: 'Auto hide postbar',
     description: 'Force the app to hide the post actions (likes, comments ...etc) automaticly... [Developer]',
   },
   {
     id: 'post_autoposition',
-    icon: <Icons.AlignCenter />,
+    icon: <AlignCenter />,
     type: 'switch',
     title: 'Auto center on click',
     description: '',
   },
   {
     id: 'verbosity',
-    icon: <Icons.Terminal />,
+    icon: <Terminal />,
     type: 'switch',
     title: 'Enable core verbosity',
     description: 'Show all console logs... [Developer]',

globals/sidebar_menu.js

@@ -1,4 +1,4 @@
-import * as Icons from 'components/Icons'
+import { Home, Compass, Bookmark, MessageSquare, Box, Package, Tv, Tool, Settings, LogIn, LogOut } from 'components/Icons'
 
 /**
  * Sidebar Menu scheme
@@ -16,7 +16,7 @@ import * as Icons from 'components/Icons'
 export default [
     {
         id: 'main',
-        icon: <Icons.Home />,
+        icon: "Home",
         title: 'Main',
         attributes: {
             require: 'login',
@@ -26,12 +26,12 @@ export default [
     {
         id: 'explore',
         title: 'Explore',
-        icon: <Icons.Compass />,
+        icon: "Compass",
     },
     {
         id: 'saves',
         title: 'Saves',
-        icon: <Icons.Bookmark />,
+        icon: "Bookmark",
         attributes: {
             require: 'login',
             mobile: false
@@ -40,7 +40,7 @@ export default [
     {
         id: 'messages',
         title: 'Messages',
-        icon: <Icons.MessageSquare />,
+        icon: "MessageSquare",
         attributes: {
             require: 'login'
         }
@@ -48,7 +48,7 @@ export default [
     {
         id: 'rooms',
         title: 'Rooms',       
-        icon: <Icons.Box />,
+        icon: "Box",
         attributes: {
             require: 'login'
         }
@@ -56,7 +56,7 @@ export default [
     {
         id: 'workshop',
         title: 'Workshop',       
-        icon: <Icons.Package />,
+        icon: "Package",
         attributes: {
             require: 'login'
         }
@@ -64,7 +64,7 @@ export default [
     {
         id: 'streams',
         title: 'Streams',       
-        icon: <Icons.Tv />,
+        icon: "Tv",
         attributes: {
             require: 'login'
         }
@@ -72,7 +72,7 @@ export default [
     {
         id: 'debug',
         title: 'Debug',
-        icon: <Icons.Tool />,
+        icon: "Tool",
         attributes: {
             position: "bottom",
             require: "dev"
@@ -81,7 +81,7 @@ export default [
     {
         id: 'settings',
         title: 'Settings',
-        icon: <Icons.Settings />,
+        icon: "Settings",
         attributes: {
             position: "bottom"
         }
@@ -89,7 +89,7 @@ export default [
     {
         id: 'logout',
         title: 'Logout',
-        icon: <Icons.LogOut style={{ color: '#ef233c', marginRight: '10px' }} />,
+        icon: "LogOut",
         attributes: {
             position: "bottom",
             require: 'login'
@@ -98,7 +98,7 @@ export default [
     {
         id: 'login',
         title: 'Signin',
-        icon: <Icons.LogIn style={{ color: '#3a86ff', marginRight: '10px' }} />,
+        icon: "LogIn",
         attributes: {
             position: "bottom",
             require: "guest"

globals/theme_settings.js

@@ -1,39 +1,39 @@
-import * as Icons from 'components/Icons'
+import { Image, Sidebar, Droplet, FontColorsOutlined, Volume2, Moon } from 'components/Icons'
 
 export default [
     {
       id: 'backgroundImage',
-      icon: <Icons.Image />,
+      icon: <Image />,
       title: 'Background',
       description: 'Change the background of the app',
     },
     {
       id: 'overlay',
-      icon: <Icons.Sidebar />,
+      icon: <Sidebar />,
       title: 'Overlay',
       description: 'Description blah blah',
     },
     {
       id: 'color',
-      icon: <Icons.Droplet />,
+      icon: <Droplet />,
       title: 'Colors',
       description: 'Texts, Buttons, Sliders ...etc',
     },
     {
       id: 'text',
-      icon: <Icons.FontColorsOutlined style={{ marginRight: '10px' }} />,
+      icon: <FontColorsOutlined style={{ marginRight: '10px' }} />,
       title: 'Text',
       description: 'Sizes, Fonts',
     },
     {
       id: 'sounds',
-      icon: <Icons.Volume2 />,
+      icon: <Volume2 />,
       title: 'Sounds',
       description: 'BlipBlopBLup',
     },
     {
       id: 'darkmode',
-      icon: <Icons.Moon />,
+      icon: <Moon />,
       title: 'Dark Mode',
       description: 'Yeaah, no more daying',
     }

package.json

@@ -51,7 +51,6 @@
     "cryptr": "^6.0.2",
     "dotenv": "^8.2.0",
     "dutier": "^1.1.4",
-    "dva-model-enhance": "^1.2.13",
     "electron-config": "^2.0.0",
     "electron-is": "^3.0.0",
     "electron-log": "^4.2.4",
@@ -59,7 +58,6 @@
     "electron-remote": "^1.3.0",
     "electron-updater": "^4.3.4",
     "enquire-js": "^0.2.1",
-    "fast-json-stringify": "^2.2.9",
     "feather-reactjs": "^2.0.13",
     "howler": "^2.2.0",
     "html2canvas": "^1.0.0-rc.7",
@@ -69,7 +67,6 @@
     "localforage": "^1.7.4",
     "lodash": "^4.17.19",
     "moment": "^2.28.0",
-    "npm": "^7.0.2",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.1.0",
     "platform": "^1.3.6",
@@ -94,10 +91,8 @@
     "redux-thunk": "^2.3.0",
     "request": "^2.88.2",
     "socket.io-client": "^2.3.0",
-    "socket.io-promise": "^1.1.2",
     "stack-trace": "0.0.10",
     "store": "^2.0.12",
-    "styled-components": "^5.2.0",
     "timeago.js": "^4.0.2",
     "ts-jest": "^26.4.1",
     "wait-on": "^5.2.0"
@@ -123,9 +118,6 @@
     "electron-reloader": "^1.0.1",
     "jest": "^26.5.3",
     "jsdoc": "^3.6.5",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.1",
-    "style-loader": "^1.2.1",
     "typescript": "^3.9.7",
     "umi": "^3.2.24"
   }

src/components/About/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './index.less'
 import { clientInfo, GUID, package_json } from 'core'
-import * as Icons from 'components/Icons'
+import { Monitor, Package, Radio, Layers } from 'components/Icons'
 import * as antd from 'antd'
 
 export default class App_About extends React.Component {
@@ -16,10 +16,10 @@ export default class App_About extends React.Component {
           <h1 className={styles.appName}> {clientInfo.siteName} </h1>
           {GUID}
           <br />
-          <antd.Tag color="green"><Icons.Monitor />{clientInfo.os.toString()}</antd.Tag>
+          <antd.Tag color="green"><Monitor />{clientInfo.os.toString()}</antd.Tag>
-          <antd.Tag color="geekblue"><Icons.Package />v{clientInfo.version}</antd.Tag>
+          <antd.Tag color="geekblue"><Package />v{clientInfo.version}</antd.Tag>
-          <antd.Tag color="red"><Icons.Radio />{clientInfo.packageStage}</antd.Tag>
+          <antd.Tag color="red"><Radio />{clientInfo.packageStage}</antd.Tag>
-          <antd.Tag color="magenta"><Icons.Layers />Render with {clientInfo.layout}</antd.Tag>
+          <antd.Tag color="magenta"><Layers />Render with {clientInfo.layout}</antd.Tag>
           {this.renderStableTag()}
 
         </antd.Card>

src/components/FloatComponent/index.tsx

@@ -1,5 +1,5 @@
 import verbosity from 'core/libs/verbosity'
-import * as Icons from 'components/Icons'
+import { XCircle } from 'components/Icons'
 import ReactDOM from 'react-dom'
 import * as antd from 'antd'
 import React from 'react'
@@ -31,7 +31,7 @@ class FloatComponent extends React.Component {
             >
                 <div style={{ top: 0, position: "sticky", borderRadius: "8px 8px 0 0", background: "rgba(0, 0, 0, 0.4)", width: "100%", height: "35px", display: "flex", alignItems: "center", color: "#fff" }}>
                     <div style={{ fontSize: "15px", color: "#fff", display: "flex", height: "100%", padding: "0 10px", alignItems: "center", marginRight: "5px" }}>
-                        <Icons.XCircle onClick={this.handleClose} style={{ cursor: "pointer" }} />
+                        <XCircle onClick={this.handleClose} style={{ cursor: "pointer" }} />
                     </div>
                     <div style={{ fontSize: "12px" }}>
                         {this.props.title ?? null}

src/components/Invalid/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import * as antd from 'antd'
 import styles from './index.less'
 import errNumbers from 'config/handlers/numToError.js'
-import { Icons } from 'components'
+import { Meh } from 'components/Icons'
 
 const InvalidSkeleton = (props) => {
     return(
@@ -70,7 +70,7 @@ export default class Invalid extends React.Component{
 
         }
         return <Custom
-            icon={<Icons.Meh style={{ fontSize: "100px" }} />} 
+            icon={<Meh style={{ fontSize: "100px" }} />} 
             title="A function called this component due to an error, but apparently it also caused an error when configuring these parameters."
             message="it seems that someone is not having a good day"
         />

src/components/Layout/ContextMenu/index.tsx

@@ -1,8 +1,6 @@
 import verbosity from 'core/libs/verbosity'
-import * as Icons from 'components/Icons'
 import styles from './index.less'
 import ReactDOM from 'react-dom'
-import * as antd from 'antd'
 import React from 'react'
 
 let onRend = false

src/components/Layout/Overlay/components/Card_Component.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as antd from 'antd'
-import * as Icons from 'components/Icons'
+import { LoadingOutlined } from 'components/Icons'
 import styles from '../index.less'
 
 export interface Card_Component_props {
@@ -12,7 +12,7 @@ export interface Card_Component_props {
 const Card_Component = (props: Card_Component_props) => {
     let frag;
     const rd_error = <antd.Result status="error" title="Failed Gathering, reload the page" />
-    const rd_loading = <Icons.LoadingOutlined spin />
+    const rd_loading = <LoadingOutlined spin />
   
     if (props.type == "error") frag = (rd_error)
     if (props.type == "skeleton") frag = (rd_loading)

src/components/Layout/Overlay/components/layout/Primary.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as antd from 'antd'
-import * as Icons from 'components/Icons'
+import { LeftOutlined  } from 'components/Icons'
 import styles from '../../index.less'
 import classnames from 'classnames'
 import { Swapper } from '../../index.js'
@@ -17,7 +17,7 @@ export interface overlay_primary_props {
 
 const renderExit = (
     <div className={styles.exit_button}>
-    <antd.Button type="ghost" icon={<Icons.LeftOutlined />} onClick={() => Swapper.closeAll()}> Back </antd.Button>
+    <antd.Button type="ghost" icon={<LeftOutlined />} onClick={() => Swapper.closeAll()}> Back </antd.Button>
     </div>
 )
 

src/components/Layout/Overlay/components/layout/Secondary.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import * as app from 'app'
 import * as antd from 'antd'
-import * as Icons from 'components/Icons'
+import { LeftOutlined } from 'components/Icons'
 import styles from '../../index.less'
 import classnames from 'classnames'
 
@@ -27,7 +26,7 @@ const renderExit = (props: __sec_props) => {
     const {functs} = props
     if (isOpen) {
         return <div className={styles.exit_button}>
-            <antd.Button type="ghost" icon={<Icons.LeftOutlined />} onClick={() => functs.Swapper.close()}> Back </antd.Button>
+            <antd.Button type="ghost" icon={<LeftOutlined />} onClick={() => functs.Swapper.close()}> Back </antd.Button>
             </div>
     }
     return null

src/components/Layout/Sider/default/index.js

@@ -30,7 +30,7 @@ export default class Sider_Default extends React.Component {
 
       return componentPosition == position
         ? (
-          <antd.Menu.Item icon={e.icon} key={e.id}>
+          <antd.Menu.Item icon={React.createElement(Icons[e.icon])} key={e.id}>
             <span>{e.title}</span>
           </antd.Menu.Item>
         )

src/components/Layout/WindowNavbar/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './index.less'
-import * as Icons from 'components/Icons'
+import { Minus, X } from 'components/Icons'
 import { connect } from 'umi';
 
 @connect(({ app }) => ({ app }))
@@ -26,8 +26,8 @@ export default class WindowNavbar extends React.Component{
         return(
             <div className={styles.navbar} >
                 <div className={styles.controls}>
-                    <div><Icons.Minus onClick={() => this.handleMinimize()} /></div>
+                    <div><Minus onClick={() => this.handleMinimize()} /></div>
-                    <div><Icons.X onClick={() => this.handleClose()}/></div>
+                    <div><X onClick={() => this.handleClose()}/></div>
                 </div>
             </div>
         )

src/components/ParamsList/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as antd from 'antd'
-import * as Icons from 'components/Icons'
+import { RefreshCw } from 'components/Icons'
 import { __legacy__objectToArray, getCircularReplacer, decycle } from 'core'
 
 const serializeFlags = {
@@ -41,7 +41,7 @@ const getDecoratorStr = (e, json) => {
                     return `Empty (null/undefined)`
                 }
                 if (isFlagId(e.value, 0)) {
-                    return <span><Icons.RefreshCw /> Cylic </span>
+                    return <span><RefreshCw /> Cylic </span>
                 }
                 if (typeof (e.value.length) !== "undefined") {
                     return `Lenght (${e.value.length})`
@@ -80,7 +80,7 @@ const getContent = (e) => {
                 }
                 if (isFlagId(e.value, 0)) {
                     return <div key={e.key} style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} >
-                        <Icons.RefreshCw /> This cannot be rendered because a cylic has been detected
+                        <RefreshCw /> This cannot be rendered because a cylic has been detected
                     </div>
                 }
                 if (Object.keys(e.value).length > 0) { // trying create nested

src/components/PostCard/index.js

@@ -2,7 +2,7 @@ import React, { useLayoutEffect } from 'react'
 import * as antd from 'antd'
 import styles from './index.less'
 import { MediaPlayer } from 'components'
-import * as Icons from 'components/Icons'
+import { Clipboard, Aperture, FlagOutlined, MessageSquare, MoreOutlined, PushpinFilled, EllipsisOutlined, verifiedBadge } from 'components/Icons'
 import * as core from 'core'
 import Icon from '@ant-design/icons'
 import classnames from 'classnames'
@@ -12,6 +12,7 @@ import settings from 'core/libs/settings'
 import { router } from 'core/libs'
 import LikeBtn from './components/like/index.js'
 import { connect } from 'umi'
+import { clipboard } from 'core/libs/browser'
 
 const { Meta } = antd.Card
 
@@ -36,17 +37,17 @@ const contextMenuList = [
   {
     key: "inspect_element",
     title: "Copy URL",
-    icon: <Icons.Clipboard />,
+    icon: <Clipboard />,
     params: {
       onClick: (e) => {
-        core.writeToClipboard(core.generatePostURI(e.id))
+        clipboard.copyText(core.generatePostURI(e.id))
       }
     }
   },
   {
     key: "screenshot",
     title: "Save screenshot",
-    icon: <Icons.Aperture />,
+    icon: <Aperture />,
     params: {
       itemProps: {
         style: { color: "#40a9ff" }
@@ -92,7 +93,7 @@ export default class PostCard extends React.PureComponent {
     if (this.state.ReportIgnore) return null
     return (
       <div className={styles.post_card_flaggedWarning}>
-        <Icons.FlagOutlined />
+        <FlagOutlined />
         <h3>It seems that this post has been reported</h3>
         <p>The content may be inappropriate or compromising</p>
         <antd.Button
@@ -174,7 +175,7 @@ export default class PostCard extends React.PureComponent {
     const actions = [
       <LikeBtn handleClick={(callback) => { this.handleLikeClick(id, (response) => { callback(response) }) }} count={post_likes} liked={core.booleanFix(is_liked)} />,
       <antd.Badge dot={this.state.payload.post_comments > 0 ? true : false}>
-        <Icons.MessageSquare key="comments" />
+        <MessageSquare key="comments" />
       </antd.Badge>,
     ]
 
@@ -198,16 +199,16 @@ export default class PostCard extends React.PureComponent {
                 <div className={styles.post_card_title}>
                   <h4 onClick={() => router.goProfile(publisher.username)} className={styles.titleUser}>
                     @{publisher.username}
-                    {core.booleanFix(publisher.verified) ? (<Icon style={{ color: 'blue' }} component={Icons.verifiedBadge} />) : null}
+                    {core.booleanFix(publisher.verified) ? (<Icon style={{ color: 'blue' }} component={verifiedBadge} />) : null}
                     {core.booleanFix(publisher.nsfw_flag) ? (<antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" > NSFW </antd.Tag>) : null}
                   </h4>
                   <div className={styles.PostTags}>
                     <div className={styles.MoreMenu}>
                       <antd.Dropdown onVisibleChange={this.handleVisibleChange} visible={this.state.visibleMoreMenu} trigger={['click']}>
-                        <Icons.MoreOutlined key="actionMenu" />
+                        <MoreOutlined key="actionMenu" />
                       </antd.Dropdown>
                     </div>
-                    {core.booleanFix(is_post_pinned) ? (<Icons.PushpinFilled />) : null}
+                    {core.booleanFix(is_post_pinned) ? (<PushpinFilled />) : null}
                   </div>
                 </div>
               }
@@ -216,7 +217,7 @@ export default class PostCard extends React.PureComponent {
             />
             {this.renderContent(this.state.payload)}
             <div className={styles.ellipsisIcon}>
-              <Icons.EllipsisOutlined />
+              <EllipsisOutlined />
             </div>
           </div>
         </antd.Card>

src/components/index.js

@@ -1,7 +1,6 @@
 // @alias from 'components'
 
 // Helpers & Misc
-import * as Icons from './Icons'
 import Loader from './Loader'
 import About from './About'
 import * as Feather from 'feather-reactjs'
@@ -32,7 +31,6 @@ export {
   AppLayout,
   PostCard,
   Invalid,
-  Icons,
   Feather,
   About,
   MediaPlayer,

src/core/index.js

@@ -145,7 +145,7 @@ export function generatePostURI(id) {
 export function writeToClipboard(text) {
   navigator.clipboard.writeText(text)
     .then(() => {
-      libs.appInterface.notify.info('Copy to clipboard')
+      libs.ui.notify.info('Copy to clipboard')
     }, () => {
       /* failure */
     })

src/core/libs/browser/index.ts

@@ -0,0 +1,68 @@
+const zeroStyles = (element: HTMLElement, ...properties: string[]): void => {
+  for (const property of properties) {
+    element.style.setProperty(property, '0')
+  }
+}
+
+const removeElement = (element: HTMLElement): void => {
+  element.parentNode!.removeChild(element)
+}
+
+const createTextArea = (): HTMLTextAreaElement => {
+  const textArea: HTMLTextAreaElement = document.createElement('textarea')
+  textArea.setAttribute('cols', '0')
+  textArea.setAttribute('rows', '0')
+  zeroStyles(textArea,
+    'border-width',
+    'bottom',
+    'margin-left', 'margin-top',
+    'outline-width',
+    'padding-bottom', 'padding-left', 'padding-right', 'padding-top',
+    'right',
+  )
+  textArea.style.setProperty('box-sizing', 'border-box')
+  textArea.style.setProperty('height', '1px')
+  textArea.style.setProperty('margin-bottom', '-1px')
+  textArea.style.setProperty('margin-right', '-1px')
+  textArea.style.setProperty('max-height', '1px')
+  textArea.style.setProperty('max-width', '1px')
+  textArea.style.setProperty('min-height', '1px')
+  textArea.style.setProperty('min-width', '1px')
+  textArea.style.setProperty('outline-color', 'transparent')
+  textArea.style.setProperty('position', 'absolute')
+  textArea.style.setProperty('width', '1px')
+  document.body.appendChild(textArea)
+  return textArea;
+}
+
+export const clipboard = {
+  copyText: (data:String) => {
+    if (typeof (data) !== "string") {
+      return false
+    }
+    const textArea: HTMLTextAreaElement = createTextArea()
+    textArea.value = data
+    textArea.select()
+    const success: boolean = document.execCommand('copy')
+    removeElement(textArea)
+    if (!success) {
+      return false
+    }
+  },
+  readText: (data:String) => {
+    if (typeof (data) !== "string") {
+      return false
+    }
+    const textArea: HTMLTextAreaElement = createTextArea()
+    textArea.focus()
+    const success: boolean = document.execCommand('paste')
+
+    if (!success) {
+      removeElement(textArea)
+      return false
+    }
+    const value: string = textArea.value
+    removeElement(textArea)
+    return value
+  }
+}

src/core/libs/errorhandler/index.js

@@ -1,4 +1,4 @@
-import { appInterface } from 'core/libs'
+import { ui } from 'core/libs'
 import verbosity from 'core/libs/verbosity'
 import errStrings from 'config/handlers/errToStrings.js'
 import errNumbers from 'config/handlers/numToError.js'
@@ -15,7 +15,7 @@ export function notifyErrorHandler(params) {
     if (!params) {
         return false
     }
-    appInterface.notify.open({
+    ui.notify.open({
       message: flagToString[params.flag] ?? "Unexpected Error",
       description:
       <div style={{ display: 'flex', flexDirection: 'column', margin: 'auto', height: "auto" }}>

src/core/libs/index.js

@@ -1,8 +1,9 @@
 import verbosity from './verbosity'
 import * as v3_model from './v3_model'
-import * as appInterface from './appInterface'
+import * as ui from './ui'
 export * from './settings'
 export * from './router'
 export * from './dynamicsdcp'
+export * from './browser'
 
-export { v3_model, appInterface, verbosity }
+export { v3_model, ui, verbosity }

src/core/libs/socket/index.ts

@@ -1,7 +1,7 @@
 import io from 'socket.io-client'
 import verbosity from 'core/libs/verbosity'
 import settings from 'core/libs/settings'
-import { notify } from 'core/libs/appInterface'
+import { notify } from 'core/libs/ui'
 
 const stateCodes = {
     0: "closed",

src/core/libs/ui/export_data/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as antd from 'antd'
-import * as Icons from 'components/Icons'
+import { Code, Download, HardDrive } from 'components/Icons'
 import { downloadDecodedURI } from 'core'
 
 export interface exportData_props {
@@ -11,7 +11,7 @@ export interface exportData_props {
 const exportCodeRender = (data) => {
     if(data.length > 500){
         return <div style={{ textAlign: 'center', width: '100%', padding: '30px 0 30px 0' }}>
-            <Icons.HardDrive style={{ fontSize: '45px', margin: '0' }} />
+            <HardDrive style={{ fontSize: '45px', margin: '0' }} />
             <h4>Hey, this file is too much large!</h4>
             <h3>So it couldn't be displayed.</h3>
         </div>
@@ -23,10 +23,10 @@ const exportCodeRender = (data) => {
 
 const exportData_render = (props: exportData_props) => {
     antd.Modal.confirm({
-        title: <div><Icons.Code /> Your export <antd.Tag> {`${props.type.split("/")[1]}`} </antd.Tag></div>,
+        title: <div><Code /> Your export <antd.Tag> {`${props.type.split("/")[1]}`} </antd.Tag></div>,
         icon: null,
         onOk: () => downloadDecodedURI({data: props.data, type: props.type}),
-        okText: <><Icons.Download />Download as File</> ,
+        okText: <><Download />Download as File</> ,
         cancelText: "Done",
         content: exportCodeRender(props.data),
     });

src/core/libs/ui/notify/index.js

@@ -1,11 +1,11 @@
 import { notification, message } from 'antd'
-import * as Icons from 'components/Icons'
+import { Triangle, FieldTimeOutlined, LoadingOutlined } from 'components/Icons'
 
 export const notify = {
     fatal: (...res) => {
       notification.error({
         message: 'Fatal Error',
-        icon: <Icons.Triangle style={{ color: '#fa8c16' }} />,
+        icon: <Triangle style={{ color: '#fa8c16' }} />,
         description: res,
         placement: 'bottomLeft'
       })
@@ -13,7 +13,7 @@ export const notify = {
     expire: (...res) => {
       notification.error({
         message: 'Hey ',
-        icon: <Icons.FieldTimeOutlined />,
+        icon: <FieldTimeOutlined />,
         description: res,
         placement: 'bottomLeft',
       })
@@ -73,7 +73,7 @@ export const notify = {
     },
     proccess: (...res) => {
       notification.open({
-        icon: <Icons.LoadingOutlined style={{ color: '#108ee9' }} />,
+        icon: <LoadingOutlined style={{ color: '#108ee9' }} />,
         message: 'Please wait',
         description: <div>{res}</div>,
         placement: 'bottomLeft',
@@ -83,7 +83,7 @@ export const notify = {
       notification.open({
         placement: props.placement? props.placement : 'bottomLeft',
         duration: props.duration? props.placement : 15,
-        icon: props.icon? props.icon : <Icons.Triangle style={{ color: '#fa8c16' }} />,
+        icon: props.icon? props.icon : <Triangle style={{ color: '#fa8c16' }} />,
         message: props.message? props.message : '',
         description: props.description? props.description : ''
       })

src/debuggers/redux.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'umi';
 import * as antd from 'antd'
-import * as Icons from 'components/Icons'
+import { Database, Redux, AlertTriangle } from 'components/Icons'
 import { ParamsList } from 'components'
 import { __legacy__objectToArray } from 'core'
 import store from 'store'
@@ -82,7 +82,7 @@ class ReduxDebugger extends React.Component {
                         style={{ wordBreak: 'break-all' }}
                         header={
                             <div style={{ display: "flex", alignItems: "center", marginLeft: '10px' }} >
-                                <Icons.Database />
+                                <Database />
                                 <strong>{e.key}</strong>
                             </div>
                         }>
@@ -94,7 +94,7 @@ class ReduxDebugger extends React.Component {
         return (
             <div style={{ background: "#fff", borderRadius: "8px", padding: "25px 15px" }}>
                 <div style={{ marginBottom: "35px" }}>
-                    <h1 style={{ fontSize: '24px' }}><Icons.Redux /> Redux Store <span style={{ fontSize: '14px', float: "right" }}><Icons.AlertTriangle />Dangerously experimental debugger</span></h1>
+                    <h1 style={{ fontSize: '24px' }}><Redux /> Redux Store <span style={{ fontSize: '14px', float: "right" }}><AlertTriangle />Dangerously experimental debugger</span></h1>
                     <antd.Card>{this.renderCheckboxes()}</antd.Card>
                 </div>
                 <hr />

src/models/app.js

@@ -2,7 +2,7 @@ import store from 'store'
 import { app_config } from 'config'
 import keys from 'config/app_keys'
 import { user, session } from 'core/models'
-import { router, verbosity, appInterface } from 'core/libs'
+import { router, verbosity, ui } from 'core/libs'
 import settings from 'core/libs/settings'
 import { queryIndexer } from 'core'
 import Cryptr from 'cryptr'

src/models/extended.js

@@ -1,4 +1,4 @@
-import { router, verbosity, appInterface } from 'core/libs'
+import { router, verbosity, ui } from 'core/libs'
 import { DynamicSDCP } from 'core/libs/dynamicsdcp'
 import settings from 'core/libs/settings'
 import * as core from 'core'
@@ -31,14 +31,14 @@ export default {
         usePlugins([payload.array], (err, results) => {
           if (err) {
             verbosity(["Init error!", err])
-            appInterface.notify.error("Plugin initialize error!", err)
+            ui.notify.error("Plugin initialize error!", err)
             return false
           }
           const rootInit = results[0]
 
           if (!rootInit.uuid) {
             verbosity("Cannot initialize a plugin without UUID.", "Please read SDK documentation for more info.")
-            appInterface.notify.error("Cannot initialize a plugin without UUID.")
+            ui.notify.error("Cannot initialize a plugin without UUID.")
             return false
           }
 
@@ -85,7 +85,7 @@ export default {
 
           window.PluginGlobals[plugin.uuid] = new extendedPlugin({ extended, extendedRequire })
 
-          appInterface.notify.open({
+          ui.notify.open({
             message: `${plugin.title} v${plugin.version}`,
             description: `New plugin is now installed !`
           })

src/models/socket.ts

@@ -2,7 +2,7 @@ import store from 'store'
 import { app_config } from 'config'
 import keys from 'config/app_keys'
 import { user, session } from 'core/models'
-import { router, verbosity, appInterface } from 'core/libs'
+import { router, verbosity, ui } from 'core/libs'
 import settings from 'core/libs/settings'
 import { __legacy__objectToArray } from 'core'
 import { Howl, Howler } from 'howler'

src/models/user.ts

@@ -3,7 +3,7 @@ import store from 'store'
 import { app_config } from 'config'
 import keys from 'config/app_keys'
 import { user, session } from 'core/models'
-import { router, verbosity, appInterface } from 'core/libs'
+import { router, verbosity, ui } from 'core/libs'
 import settings from 'core/libs/settings'
 import { DynamicSDCP } from 'core/libs/dynamicsdcp'
 import * as core from 'core'

src/pages/index.js

@@ -3,7 +3,7 @@ import ReduxDebugger from 'debuggers/redux'
 import * as antd from 'antd'
 import { FloatComponent } from 'components'
 import { connect } from 'umi'
-import * as Icons from 'components/Icons'
+import { ClusterOutlined } from 'components/Icons'
 import { __legacy__objectToArray } from 'core'
 
 @connect((store) => (store))
@@ -57,7 +57,7 @@ export default class Index extends React.Component {
                 <ReduxDebugger />
 
                 <antd.Card>
-                    <h1><Icons.ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1>
+                    <h1><ClusterOutlined style={{ marginRight: "7px" }} /> Socket </h1>
                     <antd.Card>
                         <h3> Header Node </h3>
                         <antd.Card>

src/pages/login/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { iatToString } from 'core'
-import { router, appInterface } from 'core/libs'
+import { router, ui } from 'core/libs'
 
 import styles from './index.less'
 import classnames from 'classnames'
@@ -63,7 +63,7 @@ class Login extends React.Component {
 
   componentDidMount() {
     if (this.props.app.session_valid) {
-      appInterface.notify.info('You have already logged into an account, you can change your account by logging in again')
+      ui.notify.info('You have already logged into an account, you can change your account by logging in again')
     }
   }
 

src/pages/logout.js

@@ -2,8 +2,7 @@ import React from 'react'
 import * as antd from 'antd'
 import { connect } from 'umi'
 import { router } from 'core/libs';
-import * as Icons from 'components/Icons'
+import { Home, Trash } from 'components/Icons'
-
 @connect(({ app }) => ({ app }))
 export default class Logout extends React.Component{
 
@@ -23,8 +22,8 @@ export default class Logout extends React.Component{
             onCancel() {
                 dispatchLogout()
             },
-            okText: <><Icons.Home/>Resume</>,
+            okText: <><Home/>Resume</>,
-            cancelText: <><Icons.Trash/>Logout</>
+            cancelText: <><Trash/>Logout</>
           });
     }
     

src/pages/settings/components/theme/configurator.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ErrorHandler from 'core/libs/errorhandler'
 import { theme } from 'core/libs/style'
-import exportDataAsFile from 'core/libs/appInterface/export_data'
+import exportDataAsFile from 'core/libs/ui/export_data'
 import verbosity from 'core/libs/verbosity'
 
 export default class ThemeConfigurator extends React.Component {