From cecbb24cc39ed9e2ef62a93f489b270f33ce2167 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:43:57 +0100
Subject: [PATCH] update components and setttings

---
 .../src/app/components/vertical-icons.js      | 204 ++-------
 libs/remix-ui/vertical-icons-panel/.babelrc   |  12 +-
 .../vertical-icons-panel/.eslintrc.json       |  35 +-
 .../remix-ui/vertical-icons-panel/.prettierrc |   5 +
 .../src/lib/components/BasicLogo.tsx          |  14 +
 .../src/lib/components/Home.tsx               |  26 ++
 .../src/lib/components/Icon.tsx               | 114 +++++
 .../src/lib/components/OtherIcons.tsx         |  15 +
 .../src/lib/components/Settings.tsx           |  15 +
 .../src/lib/remix-ui-vertical-icons-panel.css | 109 +++++
 .../remix-ui-vertical-icons-panel.module.css  |   0
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 422 +++++++++++++++++-
 .../src/lib/vertical-icons-context-menu.tsx   | 113 +++++
 .../vertical-icons-panel/tsconfig.json        |   3 +-
 .../vertical-icons-panel/tsconfig.lib.json    |   3 +-
 .../types/vertical-icons-panel.d.ts           | 112 +++++
 package-lock.json                             |  57 ++-
 17 files changed, 1041 insertions(+), 218 deletions(-)
 create mode 100644 libs/remix-ui/vertical-icons-panel/.prettierrc
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts

diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 54b77f9720..8ecd2a50ac 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -1,13 +1,18 @@
 import * as packageJson from '../../../../../package.json'
+// eslint-disable-next-line no-unused-vars
 import { basicLogo } from '../ui/svgLogo'
+import ReactDOM from 'react-dom'
+import React from 'react' // eslint-disable-line
+// eslint-disable-next-line no-unused-vars
+import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var helper = require('../../lib/helper')
 const globalRegistry = require('../../global/registry')
-const contextMenu = require('../ui/contextMenu')
+// const contextMenu = require('../ui/contextMenu')
 const { Plugin } = require('@remixproject/engine')
 const EventEmitter = require('events')
-let VERTICALMENU_HANDLE
+// let VERTICALMENU_HANDLE
 
 const profile = {
   name: 'menuicons',
@@ -23,23 +28,39 @@ export class VerticalIcons extends Plugin {
     super(profile)
     this.events = new EventEmitter()
     this.appManager = appManager
+    this.htmlElement = document.createElement('div')
+    this.htmlElement.setAttribute('id', 'icon-panel')
     this.icons = {}
     this.iconKind = {}
     this.iconStatus = {}
+    this.defaultProfile = profile
+    this.targetProfileForChange = {}
+    this.targetProfileForRemoval = {}
+    this.registry = globalRegistry
+  }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiVerticalIconsPanel
+        verticalIconsPlugin={this}
+      />,
+      this.htmlElement)
+  }
 
-    const themeModule = globalRegistry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme) => {
-      this.onThemeChanged(theme.quality)
-    })
+  onActivation () {
+    this.renderComponent()
   }
 
   linkContent (profile) {
     if (!profile.icon) return
-    this.addIcon(profile)
+    if (!profile.kind) profile.kind = 'none'
+    this.targetProfileForChange[profile.name] = profile
     this.listenOnStatus(profile)
+    this.renderComponent()
   }
 
   unlinkContent (profile) {
+    this.targetProfileForRemoval = profile
     this.removeIcon(profile)
   }
 
@@ -60,55 +81,6 @@ export class VerticalIcons extends Plugin {
     this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
   }
 
-  /**
-   * Add an icon to the map
-   * @param {ModuleProfile} profile The profile of the module
-   */
-  addIcon ({ kind, name, icon, displayName, tooltip, documentation }) {
-    let title = (tooltip || displayName || name)
-    title = title.replace(/^\w/, c => c.toUpperCase())
-    this.icons[name] = yo`
-      <div
-        class="${css.icon} m-2"
-        onclick="${() => { this.toggle(name) }}"
-        plugin="${name}"
-        title="${title}"
-        oncontextmenu="${(e) => this.itemContextMenu(e, name, documentation)}"
-        data-id="verticalIconsKind${name}"
-        id="verticalIconsKind${name}"
-      >
-        <img class="image" src="${icon}" alt="${name}" />
-      </div>`
-    this.iconKind[kind || 'none'].appendChild(this.icons[name])
-  }
-
-  /**
-   * resolve a classes list for @arg key
-   * @param {Object} key
-   * @param {Object} type
-   */
-  resolveClasses (key, type) {
-    let classes = css.status
-    switch (key) {
-      case 'succeed':
-        classes += ' fas fa-check-circle text-' + type + ' ' + css.statusCheck
-        break
-      case 'edited':
-        classes += ' fas fa-sync text-' + type + ' ' + css.statusCheck
-        break
-      case 'loading':
-        classes += ' fas fa-spinner text-' + type + ' ' + css.statusCheck
-        break
-      case 'failed':
-        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + css.statusCheck
-        break
-      default: {
-        classes += ' badge badge-pill badge-' + type
-      }
-    }
-    return classes
-  }
-
   /**
    * Set a new status for the @arg name
    * @param {String} name
@@ -137,7 +109,7 @@ export class VerticalIcons extends Plugin {
     const title = helper.checkSpecialChars(status.title) ? '' : status.title
 
     el.appendChild(yo`<i
-      title="${title}"
+    title="${title}"
       class="${this.resolveClasses(key, type)}"
       aria-hidden="true"
     >
@@ -152,41 +124,8 @@ export class VerticalIcons extends Plugin {
    * @param {ModuleProfile} profile The profile of the module
    */
   removeIcon ({ kind, name }) {
-    if (this.icons[name]) this.iconKind[kind || 'none'].removeChild(this.icons[name])
-  }
-
-  /**
-   *  Remove active for the current activated icons
-   */
-  removeActive () {
-    // reset filters
-    const images = this.view.querySelectorAll('.image')
-    images.forEach(function (im) {
-      im.style.setProperty('filter', 'invert(0.5)')
-    })
-
-    // remove active
-    const currentActive = this.view.querySelector('.active')
-    if (currentActive) {
-      currentActive.classList.remove('active')
-    }
-  }
-
-  /**
-   *  Add active for the new activated icon
-   * @param {string} name Name of profile of the module to activate
-   */
-  addActive (name) {
-    if (name === 'home') return
-    const themeType = globalRegistry.get('themeModule').api.currentTheme().quality
-    const invert = themeType === 'dark' ? 1 : 0
-    const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color
-    const nextActive = this.view.querySelector(`[plugin="${name}"]`)
-    if (nextActive) {
-      const image = nextActive.querySelector('.image')
-      nextActive.classList.add('active')
-      image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(${brightness}%)`)
-    }
+    if (this.targetProfileForChange[name]) delete this.targetProfileForChange[name]
+    this.renderComponent()
   }
 
   /**
@@ -194,7 +133,6 @@ export class VerticalIcons extends Plugin {
    * @param {string} name Name of profile of the module to activate
    */
   select (name) {
-    this.updateActivations(name)
     // TODO: Only keep `this.emit` (issue#2210)
     this.emit('showContent', name)
     this.events.emit('showContent', name)
@@ -205,89 +143,13 @@ export class VerticalIcons extends Plugin {
    * @param {string} name Name of profile of the module to activate
    */
   toggle (name) {
-    this.updateActivations(name)
-    // TODO: Only keep `this.emit` (issue#2210)
+    // // TODO: Only keep `this.emit` (issue#2210)
     this.emit('toggleContent', name)
     this.events.emit('toggleContent', name)
   }
 
-  updateActivations (name) {
-    this.removeActive()
-    this.addActive(name)
-  }
-
-  onThemeChanged (themeType) {
-    const invert = themeType === 'dark' ? 1 : 0
-    const active = this.view.querySelector('.active')
-    if (active) {
-      const image = active.querySelector('.image')
-      image.style.setProperty('filter', `invert(${invert})`)
-    }
-  }
-
-  async itemContextMenu (e, name, documentation) {
-    const actions = {}
-    if (await this.appManager.canDeactivatePlugin(profile, { name })) {
-      actions.Deactivate = () => {
-        // this.call('manager', 'deactivatePlugin', name)
-        this.appManager.deactivatePlugin(name)
-        if (e.target.parentElement.classList.contains('active')) {
-          this.select('filePanel')
-        }
-      }
-    }
-    const links = {}
-    if (documentation) {
-      links.Documentation = documentation
-    }
-    if (Object.keys(actions).length || Object.keys(links).length) {
-      VERTICALMENU_HANDLE && VERTICALMENU_HANDLE.hide(null, true)
-      VERTICALMENU_HANDLE = contextMenu(e, actions, links)
-    }
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
   render () {
-    const home = yo`
-      <div
-        class="m-1 mt-2 ${css.homeIcon}"
-        onclick="${async () => {
-          await this.appManager.activatePlugin('home')
-          this.call('tabs', 'focus', 'home')
-        }}"
-        plugin="home" title="Home"
-        data-id="verticalIconsHomeIcon"
-        id="verticalIconsHomeIcon"
-      >
-        ${basicLogo()}
-      </div>
-    `
-    this.iconKind.fileexplorer = yo`<div id='fileExplorerIcons' data-id="verticalIconsFileExplorerIcons"></div>`
-    this.iconKind.compiler = yo`<div id='compileIcons'></div>`
-    this.iconKind.udapp = yo`<div id='runIcons'></div>`
-    this.iconKind.testing = yo`<div id='testingIcons'></div>`
-    this.iconKind.analysis = yo`<div id='analysisIcons'></div>`
-    this.iconKind.debugging = yo`<div id='debuggingIcons' data-id="verticalIconsDebuggingIcons"></div>`
-    this.iconKind.none = yo`<div id='otherIcons'></div>`
-    this.iconKind.settings = yo`<div id='settingsIcons' data-id="verticalIconsSettingsIcons"></div>`
-
-    this.view = yo`
-      <div class="h-100">
-        <div class=${css.icons}>
-          ${home}
-          ${this.iconKind.fileexplorer}
-          ${this.iconKind.compiler}
-          ${this.iconKind.udapp}
-          ${this.iconKind.testing}
-          ${this.iconKind.analysis}
-          ${this.iconKind.debugging}
-          ${this.iconKind.none}
-          ${this.iconKind.settings}
-        </div>
-      </div>
-    `
-    return this.view
+    return this.htmlElement
   }
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index ccae900be4..64a3748691 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
+  "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
index 50e59482cf..b545a2cd9e 100644
--- a/libs/remix-ui/vertical-icons-panel/.eslintrc.json
+++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
@@ -1,18 +1,19 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["../../../.eslintrc"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
+  }
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/.prettierrc b/libs/remix-ui/vertical-icons-panel/.prettierrc
new file mode 100644
index 0000000000..591b168cb7
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "tabWidth": 2,
+    "singleQuote": true,
+    "semi": false
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
new file mode 100644
index 0000000000..ab4ee414cd
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+function BasicLogo () {
+  return (<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
+    <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
+    <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
+    <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
+  </svg>
+  )
+}
+
+export default BasicLogo
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
new file mode 100644
index 0000000000..7490819deb
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import React, { ReactNode } from 'react'
+import BasicLogo from './BasicLogo'
+interface HomeProps {
+  verticalIconPlugin: VerticalIcons
+}
+
+function Home ({ verticalIconPlugin }: HomeProps) {
+  return (
+    <div
+      className="m-1 mt-2 remixui_homeIcon"
+      onClick={async () => verticalIconPlugin.activateHome()}
+      // @ts-ignore
+      plugin="home"
+      title="Home"
+      data-id="verticalIconsHomeIcon"
+      id="verticalIconsHomeIcon"
+    >
+      <BasicLogo />
+    </div>
+  )
+}
+
+export default Home
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
new file mode 100644
index 0000000000..5369b60acc
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import VerticalIconsContextMenu from '../vertical-icons-context-menu'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import helper from 'apps/remix-ide/src/lib/helper'
+
+  interface IconProps {
+    verticalIconPlugin: VerticalIcons
+    kind: string
+    name: string
+    icon: string
+    displayName: string
+    tooltip: string
+    documentation: string
+    contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+    addActive: (profileName: string) => void
+    removeActive: () => void
+  }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Icon ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  kind,
+  name,
+  icon,
+  displayName,
+  tooltip,
+  documentation,
+  verticalIconPlugin,
+  contextMenuAction,
+  addActive,
+  removeActive
+}: IconProps) {
+  const [title] = useState(() => {
+    const temp = tooltip || displayName || name
+    return temp.replace(/^\w/, word => word.toUpperCase())
+  })
+  const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
+      {} as { Documentation: string, CanDeactivate: boolean }
+  )
+  // @ts-ignore
+  const [pageX, setPageX] = useState<number>(null)
+  // @ts-ignore
+  const [pageY, setPageY] = useState<number>(null)
+  const [showContext, setShowContext] = useState(false)
+  const [canDeactivate] = useState(false)
+  const iconRef = useRef(null)
+
+  const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
+    const deactivationState = verticalIconPlugin.appManager
+      .canDeactivatePlugin(verticalIconPlugin.defaultProfile, { name })
+    if (documentation && documentation.length > 0 && deactivationState) {
+      setLinks({ Documentation: documentation, CanDeactivate: deactivationState })
+    } else {
+      setLinks({ Documentation: documentation, CanDeactivate: deactivationState })
+    }
+    setShowContext(false)
+    setPageX(e.pageX)
+    setPageY(e.pageY)
+    setShowContext(true)
+  }
+  function closeContextMenu () {
+    setShowContext(false)
+  }
+
+  return (
+    <Fragment>
+      <div
+        className="remixui_icon m-2"
+        onLoad={() => {
+          if (name === 'filePanel') {
+            addActive(name)
+          }
+        }}
+        onClick={() => {
+          removeActive()
+          addActive(name)
+          verticalIconPlugin.toggle(name)
+        }}
+        // @ts-ignore
+        plugin={name}
+        title={title}
+        onContextMenu={(e: any) => {
+          e.preventDefault()
+          e.stopPropagation()
+          handleContextMenu(e)
+        }}
+        onBlur={closeContextMenu}
+        data-id={`verticalIconsKind${name}`}
+        id={`verticalIconsKind${name}`}
+        ref={iconRef}
+      >
+        <img className="remixui_image" src={icon} alt={name} />
+      </div>
+      {showContext ? (
+        <VerticalIconsContextMenu
+          pageX={pageX}
+          pageY={pageY}
+          links={links}
+          profileName={name}
+          hideContextMenu={closeContextMenu}
+          canBeDeactivated={canDeactivate}
+          verticalIconPlugin={verticalIconPlugin}
+          contextMenuAction={contextMenuAction}
+        />
+      ) : null}
+    </Fragment>
+  )
+}
+
+export default Icon
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
new file mode 100644
index 0000000000..50483a330a
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { ReactNode } from 'react'
+
+interface OtherIconsProps {
+  children: ReactNode
+}
+
+function OtherIcons ({ children }: OtherIconsProps) {
+  return (
+    <div id="otherIcons">{ children }</div>
+  )
+}
+
+export default OtherIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
new file mode 100644
index 0000000000..c2543b01bc
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { ReactNode } from 'react'
+
+interface SettingsProps {
+  children: ReactNode
+}
+
+function Settings ({ children }: SettingsProps) {
+  return (
+    <div id="settingsIcons" data-id="vertialIconsSettingsIcons">{ children }</div>
+  )
+}
+
+export default Settings
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
new file mode 100644
index 0000000000..d8c7e37f15
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -0,0 +1,109 @@
+.remixui_homeIcon {
+    display: block;
+    width: 42px;
+    height: 42px;
+    margin-bottom: 20px;
+    cursor: pointer;
+  }
+  .remixui_homeIcon svg path {
+    fill: var(--primary);
+  }
+  .remixui_homeIcon svg polygon {
+    fill: var(--primary);
+  }
+  .remixui_icons {
+  }
+  .remixui_icon {
+    cursor: pointer;
+    margin-bottom: 3px;
+    position: 12px;
+    width: 36px;
+    height: 36px;
+    padding: relative;
+    border-radius: 8px;
+  }
+  .remixui_icon img {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+    filter: invert(0.5);
+  }
+  .remixui_image {
+  }
+  .remixui_icon svg {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+  }
+  .remixui_icon[title='Settings'] {
+    position: absolute;
+    bottom: 0;
+  }
+  .remixui_status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  .remixui_statusCheck {
+    font-size: 1.2em;
+  }
+  .remixui_statusWithBG {
+    border-radius: 8px;
+    background-color: var(--danger);
+    color: var(--light);
+    font-size: 12px;
+    height: 15px;
+    text-align: center;
+    font-weight: bold;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  
+  .remixui_verticalIconContextcontainer {
+    display: block;
+    position: fixed;
+    border-radius: 2px;
+    z-index: 1000;
+    box-shadow: 0 0 4px var(--dark);
+  }
+  .remixui_liitem {
+    padding: 2px;
+    padding-left: 6px;
+    cursor: pointer;
+    color: var(--text-dark);
+    background-color: var(--light);
+  }
+  .remixui_liitem:hover {
+    background-color: var(--secondary);
+  }
+  
+  .remixui_scrollbar {
+    overflow-y: scroll;
+    scrollbar-width: none; /* Firefox hide scrollbar */
+    -ms-overflow-style: none;
+  }
+  .remixui_scrollable-container {
+    max-height: 500px;
+  }
+  .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
+    display: none;
+  }
+  .remixui_hide-scroll {
+    overflow-x: 'hidden';
+  }
+  .remixui_default-icons-container {
+    border-bottom: 1px solid #3f4455;
+  }
+  .remixui_icon-chevron {
+    z-index: 1000;
+  }
+  .remixui_icon-chevron {
+    z-index: 1000;
+  }
+  .remixui_icon-chevron {
+    z-index: 1000;
+  }
+  #menuitems {
+    list-style: none;
+    margin: 0px;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index e7980c0939..fc62cdd5c6 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,16 +1,416 @@
-import './remix-ui-vertical-icons-panel.module.css';
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, {
+  Fragment,
+  useEffect,
+  useRef
+} from 'react'
 
-/* eslint-disable-next-line */
-export interface RemixUiVerticalIconsPanelProps {}
+import './remix-ui-vertical-icons-panel.css'
+import OtherIcons from './components/OtherIcons'
+import { VerticalIcons } from '../../types/vertical-icons-panel'
+import Home from './components/Home'
+import Icon from './components/Icon'
+import Settings from './components/Settings'
+export interface RemixUiVerticalIconsPanelProps {
+  verticalIconsPlugin: VerticalIcons
+}
+
+let scrollHeight: any
+let clientHeight: any
+
+export function RemixUiVerticalIconsPanel ({
+  verticalIconsPlugin
+}: RemixUiVerticalIconsPanelProps) {
+  const scrollableRef = useRef<any>()
+  const iconPanelRef = useRef<any>()
+  // @ts-ignore
+  // scrollHeight = scrollableRef.current!.scrollHeight
+  // // @ts-ignore
+  // clientHeight = scrollableRef.current!.clientHeight
+
+  function onThemeChanged (themeType: any) {
+    const invert = themeType === 'dark' ? 1 : 0
+    // @ts-ignore
+    const active = iconPanelRef.current.querySelector('.active')
+    if (active) {
+      // @ts-ignore
+      const image = iconPanelRef.current.querySelector('.remixui_image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
+  function removeActive () {
+    // @ts-ignore
+    const images = iconPanelRef.current.querySelectorAll('.remixui_image')
+    images.forEach(function (im: any) {
+      im.style.setProperty('filter', 'invert(0.5)')
+    })
+
+    // remove active
+    // @ts-ignore
+    const currentActive = iconPanelRef.current.querySelector('.active')
+    if (currentActive) {
+      currentActive.classList.remove('active')
+    }
+  }
+
+  function addActive (name: string) {
+    if (name === 'home') return
+    const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
+    const invert = themeType === 'dark' ? 1 : 0
+    const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color
+    // @ts-ignore
+    const nextActive = iconPanelRef.current.querySelector(`[plugin="${name}"]`)
+    if (nextActive) {
+      const image = nextActive.querySelector('.remixui_image')
+      nextActive.classList.add('active')
+      image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(${brightness}%)`)
+    }
+  }
+
+  async function itemContextAction (e: any, name: string, documentation: string) {
+    verticalIconsPlugin.appManager.deactivatePlugin(name)
+    if (e.target.parentElement.classList.contains('active')) {
+      verticalIconsPlugin.select('filePanel')
+    }
+    verticalIconsPlugin.renderComponent()
+  }
+
+  useEffect(() => {
+    console.log('usefRef for scrolling', scrollableRef)
+  })
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
+
+  useEffect(() => {
+    // @ts-ignore
+    scrollHeight = scrollableRef.current.scrollHeight
+    // @ts-ignore
+    clientHeight = scrollableRef.current.clientHeight
+    console.log('scrollHeight ', scrollHeight)
+  }, [])
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
 
-export function RemixUiVerticalIconsPanel(
-  props: RemixUiVerticalIconsPanelProps
-) {
   return (
-    <div>
-      <h1>Welcome to remix-ui-vertical-icons-panel!</h1>
+    <div id="iconsP" className="h-100">
+      <div className="remixui_icons" ref={iconPanelRef}>
+        <div className="remixui_default-icons-container">
+          <Home verticalIconPlugin={verticalIconsPlugin} />
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'filePanel')
+              .map(p => (
+                <div id="fileExplorerIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                } data-id="verticalIconsFileExplorerIcons">
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'solidity')
+              .map(p => (
+                <div id="compileIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'udapp')
+              .map(p => (
+                <div id="compileIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'solidityStaticAnalysis')
+              .map(p => (
+                <div id="analysisIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'debugger')
+              .map(p => (
+                <div id="debuggingIcons" data-id="verticalIconsDebuggingIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+        </div>
+        <div
+          id="remixuiScrollable"
+          className="remixui_scrollable-container remixui_scrollbar remixui_hide-scroll"
+          ref={scrollableRef}
+        >
+          <OtherIcons>
+            {Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p !== 'filePanel')
+              .filter(p => p !== 'debugger')
+              .filter(p => p !== 'compiler')
+              .filter(p => p !== 'solidity')
+              .filter(p => p !== 'udapp')
+              .filter(p => p !== 'testing')
+              .filter(p => p !== 'solidityStaticAnalysis')
+              .map(p => (
+                <Icon
+                  kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                  displayName={
+                    verticalIconsPlugin.targetProfileForChange[p].displayName
+                  }
+                  documentation={
+                    verticalIconsPlugin.targetProfileForChange[p].documentation
+                  }
+                  icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                  name={verticalIconsPlugin.targetProfileForChange[p].name}
+                  tooltip={
+                    verticalIconsPlugin.targetProfileForChange[p].tooltip
+                  }
+                  verticalIconPlugin={verticalIconsPlugin}
+                  contextMenuAction={itemContextAction}
+                  addActive={addActive}
+                  removeActive={removeActive}
+                  key={
+                    verticalIconsPlugin.targetProfileForChange[p].displayName
+                  }
+                />
+              ))}
+          </OtherIcons>
+        </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > clientHeight
+          ? <i className="fa fa-chevron-double-down remixui_icon-chevron m-3"></i>
+          : null
+        }
+        {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
+            <Fragment>
+              <Settings>
+                <>
+                  {Object.keys(verticalIconsPlugin.targetProfileForChange)
+                    .filter(p => p === 'pluginManager')
+                    .map(p => (
+                      <Icon
+                        kind={
+                          verticalIconsPlugin.targetProfileForChange[p].kind
+                        }
+                        displayName={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                        documentation={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .documentation
+                        }
+                        icon={
+                          verticalIconsPlugin.targetProfileForChange[p].icon
+                        }
+                        name={
+                          verticalIconsPlugin.targetProfileForChange[p].name
+                        }
+                        tooltip={
+                          verticalIconsPlugin.targetProfileForChange[p].tooltip
+                        }
+                        verticalIconPlugin={verticalIconsPlugin}
+                        contextMenuAction={itemContextAction}
+                        addActive={addActive}
+                        removeActive={removeActive}
+                        key={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                      />
+                    ))}
+                  {Object.keys(verticalIconsPlugin.targetProfileForChange)
+                    .filter(p => p === 'settings')
+                    .map(p => (
+                      <Icon
+                        kind={
+                          verticalIconsPlugin.targetProfileForChange[p].kind
+                        }
+                        displayName={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                        documentation={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .documentation
+                        }
+                        icon={
+                          verticalIconsPlugin.targetProfileForChange[p].icon
+                        }
+                        name={
+                          verticalIconsPlugin.targetProfileForChange[p].name
+                        }
+                        tooltip={
+                          verticalIconsPlugin.targetProfileForChange[p].tooltip
+                        }
+                        verticalIconPlugin={verticalIconsPlugin}
+                        contextMenuAction={itemContextAction}
+                        addActive={addActive}
+                        removeActive={removeActive}
+                        key={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                      />
+                    ))}
+                </>
+              </Settings>
+            </Fragment>
+          ) : null}
+      </div>
     </div>
-  );
+  )
 }
-
-export default RemixUiVerticalIconsPanel;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
new file mode 100644
index 0000000000..4a3ddb075d
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
@@ -0,0 +1,113 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Fragment, useEffect, useRef } from 'react'
+import { VerticalIcons } from '../../types/vertical-icons-panel'
+
+export interface VerticalIconsContextMenuProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // actions: action[]
+  pageX: number
+  pageY: number
+  profileName: string
+  links: { Documentation: string, CanDeactivate: boolean }
+  canBeDeactivated: boolean
+  verticalIconPlugin: VerticalIcons
+  hideContextMenu: () => void
+  contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+}
+
+interface MenuLinksProps {
+  listItems: { Documentation: string, CanDeactivate: boolean }
+  hide: () => void
+  profileName: string
+  canBeDeactivated: boolean
+  verticalIconPlugin: VerticalIcons
+  ref?: React.MutableRefObject<any>
+  toggle: (name: string) => void
+  contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+}
+
+interface MenuProps {
+  verticalIconsPlugin: VerticalIcons
+  profileName: string
+  listItems: { Documentation: string, CanDeactivate: boolean }
+  hide: () => void
+}
+
+function VerticalIconsContextMenu (props: VerticalIconsContextMenuProps) {
+  const menuRef = useRef(null)
+  useEffect(() => {
+    document.addEventListener('click', props.hideContextMenu)
+    return () => document.removeEventListener('click', props.hideContextMenu)
+  }, [])
+  useEffect(() => {
+    // @ts-ignore
+    menuRef.current.focus()
+  }, [])
+  return (
+    <div
+      id="menuItemsContainer"
+      className="p-1 remixui_verticalIconContextcontainer bg-light shadow border"
+      onBlur={props.hideContextMenu}
+      style={{
+        left: props.pageX,
+        top: props.pageY,
+        display: 'block'
+
+      }}
+      ref={menuRef}
+    >
+      <ul id="menuitems">
+        <MenuForLinks
+          hide={props.hideContextMenu}
+          listItems={props.links}
+          profileName={props.profileName}
+          canBeDeactivated={props.canBeDeactivated}
+          verticalIconPlugin={props.verticalIconPlugin}
+          toggle={props.verticalIconPlugin.toggle}
+          contextMenuAction={props.contextMenuAction}
+        />
+      </ul>
+    </div>
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function MenuForLinks ({
+  listItems,
+  hide,
+  profileName,
+  contextMenuAction
+}: MenuLinksProps) {
+  return (
+    <Fragment>
+      {listItems.CanDeactivate &&
+        <li
+          id="menuitemdeactivate"
+          onClick={(evt) => {
+            contextMenuAction(evt, profileName, listItems.Documentation)
+            hide()
+          }}
+          className="remixui_liitem"
+        >
+        Deactivate
+        </li>}
+      {(listItems.Documentation && listItems.Documentation.length > 0) &&
+            <li
+              id="menuitemdocumentation"
+              className="remixui_liitem"
+            >
+              <a
+                onClick={hide}
+                href={listItems.Documentation}
+                target="_blank"
+              >
+                Documentation
+              </a>
+            </li>}
+    </Fragment>
+  )
+}
+
+export default VerticalIconsContextMenu
diff --git a/libs/remix-ui/vertical-icons-panel/tsconfig.json b/libs/remix-ui/vertical-icons-panel/tsconfig.json
index 8bd701c578..9b506c23c8 100644
--- a/libs/remix-ui/vertical-icons-panel/tsconfig.json
+++ b/libs/remix-ui/vertical-icons-panel/tsconfig.json
@@ -8,7 +8,8 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
   "files": [],
   "include": [],
diff --git a/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json b/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
index b560bc4dec..c2d3f619e2 100644
--- a/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
+++ b/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "types": ["node"]
+    "types": ["node"],
+    "resolveJsonModule": true
   },
   "files": [
     "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
new file mode 100644
index 0000000000..ad9924677f
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable no-use-before-define */
+import { Plugin } from '@remixproject/engine/lib/abstract'
+import * as packageJson from '../../../../package.json'
+import * as registry from 'apps/remix-ide/src/global/registry'
+import { RemixAppManager } from '@remix-ui/plugin-manager'
+
+export type Kind =
+  | 'fileexplorer'
+  | 'compiler'
+  | 'udapp'
+  | 'testing'
+  | 'analysis'
+  | 'debugging'
+  | 'settings'
+  | 'none'
+
+type IconKindType = {
+  kind: {}
+}
+
+interface defaultModuleProfile {
+  name: string
+  displayName: string
+  description: string
+  version: packageJson.version
+  methods: string[]
+}
+
+interface PassedProfile {
+  name: string
+  displayName: string
+  description: string
+  version: packageJson.version
+  methods: string[]
+  icon?: string
+  tooltip?: string
+  kind?: string
+  documentation?: string
+}
+
+interface targetProfileIcons {
+  profile: PassedProfile
+}
+export class VerticalIcons extends Plugin<any, any> {
+  // constructor(appManager: RemixAppManager)
+  events: EventEmitter
+  appManager: RemixAppManager
+  htmlElement: HTMLDivElement
+  icons: {
+    name: any
+  }
+
+  iconKind: {}
+  iconStatus: {}
+  defaultProfile: defaultModuleProfile
+  targetProfileForChange: any
+  targetProfileForRemoval: any
+  registry: registry
+  renderComponent(): void
+  linkContent(profile: any): void
+  unlinkContent(profile: any): void
+  listenOnStatus(profile: any): void
+  activateHome(): void
+  /**
+   * Add an icon to the map
+   * @param {ModuleProfile} profile The profile of the module
+   */
+  addIcon({ kind, name, icon, displayName, tooltip, documentation }: any): void
+  /**
+   * resolve a classes list for @arg key
+   * @param {Object} key
+   * @param {Object} type
+   */
+  resolveClasses(key: any, type: any): any
+  /**
+   * Set a new status for the @arg name
+   * @param {String} name
+   * @param {Object} status
+   */
+  setIconStatus(name: string, status: any): void
+  /**
+   * Remove an icon from the map
+   * @param {ModuleProfile} profile The profile of the module
+   */
+  removeIcon({ kind, name }: any): void
+  /**
+   *  Remove active for the current activated icons
+   */
+  removeActive(): void
+  /**
+   *  Add active for the new activated icon
+   * @param {string} name Name of profile of the module to activate
+   */
+  addActive(name: string): void
+  /**
+   * Set an icon as active
+   * @param {string} name Name of profile of the module to activate
+   */
+  select(name: string): void
+  /**
+   * Toggles the side panel for plugin
+   * @param {string} name Name of profile of the module to activate
+   */
+  toggle(name: string): void
+  updateActivations(name: any): void
+  onThemeChanged(themeType: any): void
+  itemContextMenu(e: any, name: any, documentation: any): Promise<void>
+  render(): any
+  view: any
+}
+import EventEmitter = require('events')
diff --git a/package-lock.json b/package-lock.json
index f5a3d35cf2..e8fdec24f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1517,6 +1517,14 @@
       "requires": {
         "core-js": "^2.6.5",
         "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        }
       }
     },
     "@babel/preset-env": {
@@ -12685,6 +12693,12 @@
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -15409,10 +15423,9 @@
       }
     },
     "core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "dev": true
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.2.tgz",
+      "integrity": "sha512-zNhPOUoSgoizoSQFdX1MeZO16ORRb9FFQLts8gSYbZU5FcgXhp24iMWMxnOQo5uIaIG7/6FA/IqJPwev1o9ZXQ=="
     },
     "core-js-compat": {
       "version": "3.19.1",
@@ -38943,9 +38956,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -41476,6 +41489,36 @@
         "internal-slot": "^1.0.3",
         "regexp.prototype.flags": "^1.3.1",
         "side-channel": "^1.0.4"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "get-symbol-description": "^1.0.0",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.4",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.4",
+            "is-shared-array-buffer": "^1.0.1",
+            "is-string": "^1.0.7",
+            "is-weakref": "^1.0.1",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
       }
     },
     "string.prototype.padend": {