diff --git a/src/features/preferences/renderer/preference-items/extensions-preference-tab-group.injectable.ts b/src/features/preferences/renderer/preference-items/extensions-preference-tab-group.injectable.ts
index 4609fc0906..fe7da9d9f9 100644
--- a/src/features/preferences/renderer/preference-items/extensions-preference-tab-group.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/extensions-preference-tab-group.injectable.ts
@@ -15,6 +15,7 @@ const extensionsPreferenceTabGroupInjectable = getInjectable({
parentId: "preference-tabs" as const,
label: "Extensions",
orderNumber: 20,
+ iconName: "extension",
}),
injectionToken: preferenceItemInjectionToken,
diff --git a/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts b/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
index 6662a6e645..935b9052d3 100644
--- a/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
+++ b/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts
@@ -26,6 +26,7 @@ export interface PreferenceTabGroup {
label: string;
orderNumber: number;
isShown?: boolean;
+ iconName?: string;
}
export interface PreferencePage {
diff --git a/src/features/preferences/renderer/preference-items/preference-tab-root.tsx b/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
new file mode 100644
index 0000000000..7e2292b955
--- /dev/null
+++ b/src/features/preferences/renderer/preference-items/preference-tab-root.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+
+export interface PreferenceTabsRoot {
+ kind: "preference-tabs-root";
+ id: string;
+ parentId: undefined;
+ isShown: true;
+ childrenSeparator: () => React.ReactElement;
+}
+
+export const preferenceTabsRoot: PreferenceTabsRoot = {
+ kind: "preference-tabs-root" as const,
+ id: "preference-tabs",
+ parentId: undefined,
+ isShown: true,
+ childrenSeparator: () =>
,
+};
diff --git a/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts b/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts
index ba23c28f5c..6720e44bb7 100644
--- a/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts
+++ b/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts
@@ -10,20 +10,7 @@ import { preferenceItemInjectionToken } from "./preference-item-injection-token"
import getComposite from "../../../application-menu/main/menu-items/get-composite/get-composite";
import { filter } from "lodash/fp";
import { pipeline } from "@ogre-tools/fp";
-
-export interface PreferenceTabsRoot {
- kind: "preference-tabs-root";
- id: string;
- parentId: undefined;
- isShown: true;
-}
-
-const preferenceTabsRoot: PreferenceTabsRoot = {
- kind: "preference-tabs-root" as const,
- id: "preference-tabs",
- parentId: undefined,
- isShown: true,
-};
+import { preferenceTabsRoot } from "./preference-tab-root";
const preferencesCompositeInjectable = getInjectable({
id: "preferences-composite",
diff --git a/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx b/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
index e1bc94faf8..3a62b1568e 100644
--- a/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
+++ b/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
@@ -13,14 +13,16 @@ import preferencesCompositeInjectable from "../preference-items/preferences-comp
import { observer } from "mobx-react";
import { PreferencesNavigationTab } from "./preferences-navigation-tab";
import { compositeHasDescendant } from "../../../application-menu/main/menu-items/get-composite/composite-has-descendant/composite-has-descendant";
+import type { PreferenceTabsRoot } from "../preference-items/preference-tab-root";
+import { Icon } from "../../../../renderer/components/icon";
interface Dependencies {
- composite: IComputedValue>;
+ composite: IComputedValue>;
}
const NonInjectedPreferencesNavigation = observer(({ composite }: Dependencies) => (
-
+ {toNavigationHierarchy(composite.get())}
));
@@ -35,7 +37,7 @@ export const PreferencesNavigation = withInjectables(
);
-const toNavigationHierarchy = (composite: Composite) => {
+const toNavigationHierarchy = (composite: Composite) => {
// Note: This makes tab groups and tabs without content not render anything in navigation.
if (!hasContent(composite)) {
return emptyRender;
@@ -60,10 +62,18 @@ const toNavigationHierarchy = (composite: Composite) => {
}
case "tab-group": {
-
return (
<>
- {value.label}
+
+ {value.iconName && (
+
+ )}
+ {value.label}
+
>
@@ -71,8 +81,14 @@ const toNavigationHierarchy = (composite: Composite) => {
}
case "tab": {
+ return ;
+ }
+
+ case "preference-tabs-root": {
return (
-
+
);
}
@@ -91,7 +107,7 @@ const toNavigationHierarchy = (composite: Composite) => {
}
};
-const hasContent = compositeHasDescendant(
+const hasContent = compositeHasDescendant(
(composite) => composite.value.kind === "item",
);