Fixing extension name sorting

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+extensions/installed-extensions.tsx

@@ -8,6 +8,7 @@ import { Spinner } from "../spinner";
 import { ExtensionInstallationStateStore } from "./extension-install.store";
 import { cssNames } from "../../utils";
 import { observer } from "mobx-react";
+import type { Column, Row } from "react-table";
 import type { LensExtensionId } from "../../../extensions/lens-extension";
 
 interface Props {
@@ -44,12 +45,21 @@ export const InstalledExtensions = observer(({ extensions, uninstall, enable, di
     (extension: InstalledExtension) => extension.manifest.version,
   ];
 
-  const columns = useMemo(
+  const columns: Column<any>[] = useMemo(
     () => [
       {
         Header: "Name",
         accessor: "extension",
-        width: 200
+        width: 200,
+        sortType: (rowA: Row, rowB: Row) => { // Custom sorting for extension name
+          const nameA = extensions[rowA.index].manifest.name;
+          const nameB = extensions[rowB.index].manifest.name;
+
+          if (nameA > nameB) return -1;
+          if (nameB > nameA) return 1;
+
+          return 0;
+        },
       },
       {
         Header: "Version",

src/renderer/components/+extensions/notice.module.css

@@ -21,7 +21,7 @@
 
 .notice {
   @apply p-8 flex flex-col gap-2 mb-14 mt-3 rounded-lg;
-  background-color: var(--noticeBackground);
+  background-color: var(--inputControlBackground);
   border: 1px solid var(--boxShadow);
   color: var(--textColorTertiary);
 }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -32,6 +32,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
+import { observer } from "mobx-react";
 
 interface Props extends DOMAttributes<HTMLElement> {
   uid: string;
@@ -84,8 +85,8 @@ function getNameParts(name: string): string[] {
   return name.split(/@+/);
 }
 
-export function HotbarIcon(props: Props) {
+export const HotbarIcon = observer(({ menuItems = [], ...props }: Props) => {
-  const { uid, title, className, source, active, remove, disabled, menuItems, onMenuOpen, children, ...rest } = props;
+  const { uid, title, className, source, active, remove, disabled, onMenuOpen, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -150,8 +151,4 @@ export function HotbarIcon(props: Props) {
       </Menu>
     </div>
   );
-}
+});
-
-HotbarIcon.defaultProps = {
-  menuItems: []
-};

src/renderer/themes/lens-dark.json

@@ -129,7 +129,6 @@
     "navSelectedBackground": "#262b2e",
     "navHoverColor": "#dcddde",
     "hrColor": "#ffffff0f",
-    "tooltipBackground": "#18191c",
+    "tooltipBackground": "#18191c"
-    "noticeBackground": "#00000045"
   }
 }

src/renderer/themes/lens-light.json

@@ -131,7 +131,6 @@
     "navSelectedBackground": "#ffffff",
     "navHoverColor": "#2e3135",
     "hrColor": "#06060714",
-    "tooltipBackground": "#ffffff",
+    "tooltipBackground": "#ffffff"
-    "noticeBackground": "#e3e5e8"
   }
 }