misc code cleanup

src/core/api/index.js

@@ -7,7 +7,7 @@
  * ```
  */
 
-const { connections, settings, commands, keybinds, actions, notices, popups, routes, i18n, rpc } = vizality.api;
+const { connections, settings, commands, keybinds, actions, notifications, popups, routes, i18n, rpc } = vizality.api;
 
 export {
   connections as Connections,
@@ -15,11 +15,9 @@ export {
   commands as Commands,
   keybinds as Ketbinds,
   actions as Actions,
-  notices as Notices,
+  notifications as Notifications,
   popups as Popups,
   routes as Routes,
   i18n as I18n,
   rpc as RPC
 };
-
-export default this;

src/core/builtins/addon-manager/styles/addon/displays/_card.scss

@@ -1,6 +1,8 @@
 @use '@vizality' as vz;
 
-// Card (default) view
+/**
+ * Card (default) view
+ */
 .vz-addon-card {
   $base: &;
   box-sizing: border-box;
@@ -8,14 +10,22 @@
   flex-flow: column;
   min-width: 340px;
   margin: 10px;
-  // cursor: pointer;
+  cursor: pointer;
   transition: box-shadow .2s ease-out, background .2s ease-out;
   flex: 1;
   background: var(--background-secondary-alt);
   border-radius: 8px;
   overflow: hidden;
-  // Hack to fix trailing items in the flexbox not sizing correctly
-  // with the rest of the items
+  /**
+   * This is to ensure our click events are being handled properly and not getting eaten
+   * by svg children (paths).
+   */
+  svg * {
+    pointer-events: none;
+  }
+  /**
+   * Hack to fix trailing items in the flexbox not sizing correctly with the rest of the items.
+   */
   &.vz-addon-card-filler {
     border: none !important;
     height: 0;

src/core/builtins/dashboard/styles/main.scss

@@ -1,6 +1,11 @@
 @use 'pages';
 @use 'parts';
 
+:root {
+  --vz-dashboard-layout-padding-horizontal: 40px;
+  --vz-dashboard-layout-padding-vertical: 20px;
+}
+
 .vz-dashboard {
   color: var(--text-normal) !important;
   overflow: hidden;
@@ -14,7 +19,7 @@
   margin: 0 auto;
   display: flex;
   box-sizing: border-box;
-  padding: 20px 40px;
+  padding: var(--vz-dashboard-layout-padding-vertical) var(--vz-dashboard-layout-padding-horizontal);
   min-height: 100%;
   > div {
     display: flex;

src/core/builtins/dashboard/styles/pages/home/_features.scss

@@ -24,7 +24,7 @@
     margin-top: 50px;
   }
   &-card {
-    background-color: var(--deprecated-card-bg);
+    background-color: var(--background-secondary-alt);
     display: flex;
     flex: 1;
     padding: 20px 30px;

src/core/builtins/dashboard/styles/parts/_aside-nav.scss

@@ -1,79 +0,0 @@
-.vz-aside-nav {
-  $base: &;
-  padding: 0 0 0 40px;
-  top: 40px;
-  position: sticky;
-  height: calc(100vh - 104px); /* titlebar height (24px) + top padding (40px) + bottom padding (40px) */
-  flex: 0;
-  &-header {
-    font-weight: 600;
-    font-size: 20px;
-    margin-bottom: 10px;
-    width: 100%;
-    height: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: var(--header-primary);
-    &-icon-wrapper {
-      transform: translate3d(0, 0, 0);
-      transition: transform .3s;
-      cursor: pointer;
-      &:hover {
-        transform: translate3d(3px, 0, 0);
-      }
-    }
-  }
-  &-inner {
-    height: 100%;
-    transition: opacity .3s .3s, transform .3s .3s, width 0s .3s, min-width 0s .3s;
-    width: 25%;
-    min-width: 180px;
-    max-width: 300px;
-    opacity: 1;
-  }
-  &-items {
-    height: 100%;
-    overflow: hidden auto;
-  }
-  &-item {
-    margin: 15px;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  &-collapser {
-    background: var(--background-secondary);
-    height: 50px;
-    width: 50px;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: var(--elevation-medium);
-    border: 1px solid var(--background-tertiary);
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    position: absolute;
-    opacity: 0;
-    transform: translate3d(1000%, 0, 0);
-    transition: opacity .3s, background .3s, transform 1s 0s;
-    &:hover {
-      background: var(--background-secondary-alt);
-    }
-  }
-  &.collapsed {
-    #{$base}-inner {
-      width: 50px;
-      transform: translate3d(200%, 0, 0);
-      min-width: 0;
-      opacity: 0;
-      transition: opacity .3s, transform .6s, width 0s .3s, min-width 0s .3s;
-    }
-    #{$base}-collapser {
-      transform: translate3d(0, 0, 0);
-      transition: opacity .3s, background .3s, transform .3s .3s;
-      opacity: 1;
-    }
-  }
-}

src/core/builtins/dashboard/styles/parts/_content-sidebar.scss

@@ -0,0 +1,105 @@
+@use '@vizality' as vz;
+
+.vz-dashboard-content-sidebar {
+  $base: &;
+  margin: 0 0 0 60px;
+  top: 40px;
+  position: sticky;
+  height: calc(100vh - 104px); /* titlebar height (24px) + top padding (40px) + bottom padding (40px) */
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+  flex: 0;
+  &-header {
+    flex: 1 100%;
+    &-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 10px 10px;
+    }
+  }
+  &-inner {
+    @include vz.size(100%);
+    opacity: 1;
+    box-sizing: border-box;
+  }
+  &-item {
+    margin: 15px;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  &-item-wrapper {
+    margin: 0;
+  }
+  &-collapser,
+  &-expander {
+    @include vz.size(30px);
+    position: relative;
+    margin: 0 auto;
+    cursor: pointer;
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &::before {
+      transform: rotate(0deg);
+    }
+    &::before,
+    &::after {
+      @include vz.size(14px, 3px);
+      content: '';
+      position: absolute;
+      background-color: var(--channels-default);
+      transition: background-color 0.2s;
+    }
+    &:hover {
+      &::before,
+      &::after {
+        background-color: var(--header-primary);
+      }
+    }
+  }
+  &-expander {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    transform: scale(0);
+    transition: transform .15s;
+    &::before,
+    &::after {
+      @include vz.size(20px, 4px);
+    }
+    &::before {
+      transform: rotate(180deg);
+    }
+    &::after {
+      opacity: 1;
+      transform: rotate(-90deg);
+    }
+  }
+  .textBadge-1iylP6 {
+    display: inline;
+    margin-left: 7px;
+    font-size: 10px;
+    padding: 2px 6px;
+  }
+  &.test {
+    height: 50px !important;
+    width: 50px;
+    border-radius: 8px;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    #{$base}-expander {
+      @include vz.size(50px);
+      opacity: 1;
+      transform: scale(1);
+    }
+    #{$base}-inner {
+      display: none;
+    }
+  }
+}
+

src/core/builtins/dashboard/styles/parts/_index.scss

@@ -1,4 +1,4 @@
-@forward 'aside-nav';
+@forward 'content-sidebar';
 @forward 'layout';
 @forward 'sidebar';
 @forward 'content';

src/core/builtins/dashboard/styles/parts/_section.scss

@@ -1,14 +1,47 @@
+@use '@vizality' as vz;
+
 .vz-dashboard-section {
+  $base: &;
   display: flex;
   flex: 1;
   flex-direction: column;
   &-contents {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
     flex: 1;
   }
   & + & {
     margin-top: 40px;
   }
+  &-header {
+    line-height: 1.4;
+    &-description {
+      font-family: var(--font-primary);
+      font-weight: 500;
+      font-size: 18px;
+    }
+    &-icon-wrapper {
+      @include vz.size(24px);
+      margin-right: 10px;
+      color: var(--header-secondary);
+    }
+    p {
+      margin: 0;
+      line-height: 1.4;
+    }
+  }
+  &[vz-collapsible] {
+    background: var(--background-secondary);
+    border-radius: 8px;
+    #{$base}-header-wrapper {
+      background: var(--background-tertiary);
+      border-radius: 8px 8px 0 0;
+      display: flex;
+      align-items: center;
+      padding: 20px;
+    }                                                                                         
+    #{$base}-contents {
+      margin: 20px 40px;
+    }
+  }
 }

src/core/builtins/dashboard/styles/parts/_sidebar.scss

@@ -57,10 +57,24 @@
       color: var(--header-primary);
     }
   }
-  &.poop {
-    --vz-dashboard-sidebar-width: 60px;
+  &[vz-collapsed] {
+    --vz-dashboard-sidebar-width: 70px;
     #{$base}-collapser {
       transform: rotate3d(0, 0, 1, 270deg);
+      margin-left: 8px;
+    }
+    #{$base}-item-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    #{$base}-item-icon-wrapper {
+      margin: 0;
+    }
+    #{$base}-inner {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
     }
     .discoverHeader-Ijkm_M {
       width: 0;

src/core/builtins/router/index.js

@@ -11,6 +11,7 @@ import { isArray } from '@vizality/util/array';
 import { Events } from '@vizality/constants';
 import { Builtin } from '@vizality/entities';
 import React, { useEffect } from 'react';
+import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion';
 
 export default class Router extends Builtin {
   /**
@@ -145,26 +146,24 @@ export default class Router extends Builtin {
             const oType = child.type;
             child.type = props => {
               try {
-                const ret = Reflect.apply(oType, null, [ props ]);
+                let ret = Reflect.apply(oType, null, [ props ]);
                 ret.props.className = joinClassNames('vz-dashboard-sidebar', ret.props.className);
                 if (vizality.api.routes.getLocation()?.pathname?.startsWith('/vizality')) {
                 /**
                  * Add and remove collapsed and expanded attributes based on the setting.
                  */
-                  ret.props['vz-collapsed'] =
-                  vizality.settings.get('dashboardSidebarCollapse', false) && '';
-                  ret.props['vz-expanded'] =
-                    !vizality.settings.get('dashboardSidebarCollapse', false) && '';
+                  ret.props['vz-collapsed'] = vizality.settings.get('dashboardSidebarCollapse', false) && '';
+                  ret.props['vz-expanded'] = !vizality.settings.get('dashboardSidebarCollapse', false) && '';
                   const rawPath = vizality.api.routes.getLocation().pathname.substring('vizality'.length + 1);
                   const route = vizality.api.routes.getAllRoutes()?.find(rte => rawPath.startsWith(rte.path));
-                  /**
-                   * If the sidebar property is false, don't render it.
-                   */
                   if (route && route.sidebar) {
                     const Sidebar = route.sidebar;
                     ret.props.children[0] = <Sidebar />;
+                  /**
+                   * If the sidebar property is false, don't render one.
+                   */
                   } else {
-                    ret.props.children[0] = null;
+                    ret = null;
                   }
                 }
                 return ret;

src/core/builtins/updater/index.js

@@ -52,20 +52,7 @@ export default class Updater extends Builtin {
       render: Settings
     });
 
-    let minutes = Number(this.settings.get('interval', 15));
-    if (minutes < 1) {
-      this.settings.set('interval', 1);
-      minutes = 1;
-      /**
-       * This is an extra failsafe to make sure the value for the interval does not go over the
-       * max of 2,147,483,647, because if this happens, it will trigger the updates immediately
-       * and infinitely, using max computer resources and freezing the app.
-       */
-    } else if (minutes > 34000) {
-      this.settings.set('interval', 34000);
-      minutes = 34000;
-    }
-
+    const minutes = Number(this.settings.get('interval', 15));
     this._interval = setInterval(this.checkForUpdates.bind(this), minutes * 60 * 1000);
 
     if (this.settings.get('checkForUpdatesOnStartup', false)) {
@@ -194,7 +181,7 @@ export default class Updater extends Builtin {
         markdown: true,
         id: 'vz-updater-update-failed',
         header: 'Update Failed to Install',
-        content: 'Some update failed to install blah blah blah blah',
+        content: 'Some update failed to install!',
         icon: {
           name: 'CloseCircle',
           size: '32'
@@ -230,7 +217,7 @@ export default class Updater extends Builtin {
     }
 
     this.settings.set('updating', false);
-    if (!success) {
+    if (failed.length) {
       this.settings.set('failed', true);
       vizality.api.notifications.sendToast({
         id: 'vz-updater-update-failed',

src/core/entities/Updatable.js

@@ -7,8 +7,9 @@
  * @namespace Entities.Updatable
  */
 
+import { getConfig, statusMatrix } from 'isomorphic-git';
 import { getAddonByPath } from '@vizality/util/file';
-import { getConfig } from 'isomorphic-git';
+import http from 'isomorphic-git/http/node';
 import { promisify } from 'util';
 import { existsSync } from 'fs';
 import cp from 'child_process';
@@ -122,17 +123,17 @@ export default class Updatable extends Events {
    */
   async getGitRepo () {
     try {
-      if (!this._cwd.cwd) {
+      if (!this.path) {
         return;
       }
       const repoUrl = await getConfig({
         fs,
-        dir: this._cwd.cwd,
+        dir: this.path,
         path: 'remote.origin.url'
       });
       return repoUrl;
     } catch (err) {
-      if (this._cwd) {
+      if (this.path) {
         return this.warn('Failed to fetch git origin URL. Remote updates will be unavailable!');
       }
       return this.error(err);