update the addons list routes to use the new list components

renderer/src/builtins/dashboard/pages/docs/components/Icons.jsx

@@ -135,7 +135,6 @@ export default memo(() => {
    * @returns
    */
   const handleSelectedIcon = icon => {
-    console.log(icon);
     return setSelectedIcon(icon);
   };
 

renderer/src/builtins/dashboard/routes/Routes.jsx

@@ -1,5 +1,5 @@
 import { FormNotice, Anchor, Markdown as _Markdown } from '@vizality/components';
-import { AddonsList, AddonListing } from '@vizality/components/addon';
+import { InstalledList, BrowseList, AddonListing } from '@vizality/components/addon';
 import { Content, Layout } from '@vizality/components/dashboard';
 import { Route, Switch, Redirect } from 'react-router';
 import React, { memo } from 'react';
@@ -31,7 +31,7 @@ export default memo(() => {
             </Content>
           </Layout>
         </Route>
-        <Route path='/vizality/plugins/:section' exact>
+        <Route path='/vizality/plugins/installed' exact>
           <Layout>
             <Content
               header='Plugins'
@@ -39,11 +39,35 @@ export default memo(() => {
               icon='plugin'
               className='vz-addons-list-page-content'
             >
-              <AddonsList />
+              <InstalledList />
             </Content>
           </Layout>
         </Route>
-        <Route path='/vizality/themes/:section' exact>
+        <Route path='/vizality/plugins/browse' exact>
+          <Layout>
+            <Content
+              header='Plugins'
+              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
+              icon='plugin'
+              className='vz-addons-list-page-content'
+            >
+              <BrowseList />
+            </Content>
+          </Layout>
+        </Route>
+        <Route path='/vizality/themes/installed' exact>
+          <Layout>
+            <Content
+              header='Themes'
+              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
+              icon='theme'
+              className='vz-addons-listing-content'
+            >
+              <InstalledList />
+            </Content>
+          </Layout>
+        </Route>
+        <Route path='/vizality/themes/browse' exact>
           <Layout>
             <Content
               header='Themes'
@@ -51,7 +75,7 @@ export default memo(() => {
               icon='theme'
               className='vz-addons-listing-content'
             >
-              <AddonsList />
+              <BrowseList />
             </Content>
           </Layout>
         </Route>

renderer/src/modules/components/addon/index.js

@@ -1,6 +1,10 @@
 export { default as AddonUninstallModal } from './AddonUninstallModal';
 export { default as AddonContextMenu } from './AddonContextMenu';
 export { default as AddonInfoMessage } from './AddonInfoMessage';
-export { default as AddonsList } from './AddonsList/List';
 export { default as AddonListing } from './AddonListing';
 export { default as AddonCard } from './AddonCard';
+
+export { default as InstalledList } from './AddonsList/InstalledList';
+export { default as DiscoverList } from './AddonsList/DiscoverList';
+export { default as BrowseList } from './AddonsList/BrowseList';
+export { default as AddonsList } from './AddonsList/AddonsList';

renderer/src/styles/components/_sticky-element.scss

@@ -17,6 +17,10 @@
     &[vz-stuck] {
       background: var(--background-primary);
       border-radius: 0;
+      .vz-sticky-element {
+        padding-top: 20px;
+        padding-bottom: 20px;
+      }
     }
   }
   .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG {

renderer/src/styles/main.css

@@ -1664,6 +1664,10 @@
   background: var(--background-primary);
   border-radius: 0;
 }
+.vz-sticky-element-wrapper[vz-stuck] .vz-sticky-element {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
 .vz-sticky-element .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG {
   background: var(--brand-experiment);
 }