Replace CatalogEntityDetailRegistry with an injectable solution (#6605)

* Replace EntityDetailRegistry with an injectable solution

- Add some behavioural tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Update snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix import error

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Simplify loading extensions

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix lint

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Update snapshot

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove the last reminents of BaseRegistry

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix import errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix TypeError when loading extensions

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Update snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Cleanup LensExtensions

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove bad comment

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

__mocks__/react-beautiful-dnd.tsx

@@ -11,5 +11,5 @@ import type {
 } from "react-beautiful-dnd";
 
 export const DragDropContext = ({ children }: DragDropContextProps) => <>{ children }</>;
-export const Draggable = ({ children }: DraggableProps) => <>{ children }</>;
-export const Droppable = ({ children }: DroppableProps) => <>{ children }</>;
+export const Draggable = ({ children }: DraggableProps) => <>{ children({} as any, {} as any, {} as any) }</>;
+export const Droppable = ({ children }: DroppableProps) => <>{ children({} as any, {} as any) }</>;

src/common/catalog-entities/web-link.ts

@@ -3,11 +3,11 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { getLegacyGlobalDiForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
+import { Environments, getEnvironmentSpecificLegacyGlobalDiForExtensionApi } from "../../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
 import type { CatalogEntityContextMenuContext, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog";
 import { CatalogCategory, CatalogEntity, categoryVersion } from "../catalog/catalog-entity";
 import productNameInjectable from "../vars/product-name.injectable";
-import { WeblinkStore } from "../weblink-store";
+import weblinkStoreInjectable from "../weblink-store.injectable";
 
 export type WebLinkStatusPhase = "available" | "unavailable";
 
@@ -31,14 +31,15 @@ export class WebLink extends CatalogEntity<CatalogEntityMetadata, WebLinkStatus,
   }
 
   onContextMenuOpen(context: CatalogEntityContextMenuContext) {
-    const di = getLegacyGlobalDiForExtensionApi();
+    // NOTE: this is safe because `onContextMenuOpen` is only supposed to be called in the renderer
+    const di = getEnvironmentSpecificLegacyGlobalDiForExtensionApi(Environments.renderer);
     const productName = di.inject(productNameInjectable);
 
     if (this.metadata.source === "local") {
       context.menuItems.push({
         title: "Delete",
         icon: "delete",
-        onClick: async () => WeblinkStore.getInstance().removeById(this.getId()),
+        onClick: async () => di.inject(weblinkStoreInjectable).removeById(this.getId()),
         confirm: {
           message: `Remove Web Link "${this.getName()}" from ${productName}?`,
         },

src/common/protocol-handler/router.ts

@@ -13,7 +13,7 @@ import { RoutingError, RoutingErrorType } from "./error";
 import type { ExtensionsStore } from "../../extensions/extensions-store/extensions-store";
 import type { ExtensionLoader } from "../../extensions/extension-loader";
 import type { LensExtension } from "../../extensions/lens-extension";
-import type { RouteHandler, RouteParams } from "../../extensions/registries/protocol-handler";
+import type { RouteHandler, RouteParams } from "./registration";
 import { when } from "mobx";
 import { ipcRenderer } from "electron";
 import type { Logger } from "../logger";

src/extensions/common-api/registrations.ts

@@ -7,9 +7,9 @@ export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../..
 export type { AppPreferenceRegistration, AppPreferenceComponents } from "../../features/preferences/renderer/compliance-for-legacy-extension-api/app-preference-registration";
 export type { KubeObjectDetailRegistration, KubeObjectDetailComponents } from "../../renderer/components/kube-object-details/kube-object-detail-registration";
 export type { KubeObjectStatusRegistration } from "../../renderer/components/kube-object-status-icon/kube-object-status-registration";
-export type { PageRegistration, RegisteredPage, PageParams, PageComponentProps, PageComponents, PageTarget } from "../registries/page-registry";
-export type { ClusterPageMenuRegistration, ClusterPageMenuComponents } from "../registries/page-menu-registry";
-export type { ProtocolHandlerRegistration, RouteParams as ProtocolRouteParams, RouteHandler as ProtocolRouteHandler } from "../registries/protocol-handler";
+export type { PageRegistration, RegisteredPage, PageParams, PageComponentProps, PageComponents, PageTarget } from "../../renderer/routes/page-registration";
+export type { ClusterPageMenuRegistration, ClusterPageMenuComponents } from "../../renderer/components/layout/cluster-page-menu";
+export type { ProtocolHandlerRegistration, RouteParams as ProtocolRouteParams, RouteHandler as ProtocolRouteHandler } from "../../common/protocol-handler/registration";
 export type { CustomCategoryViewProps, CustomCategoryViewComponents, CustomCategoryViewRegistration } from "../../renderer/components/+catalog/custom-views";
 export type { ShellEnvModifier, ShellEnvContext } from "../../main/shell-session/shell-env-modifier/shell-env-modifier-registration";
 export type { KubeObjectContextMenuItem, KubeObjectOnContextMenuOpenContext, KubeObjectOnContextMenuOpen, KubeObjectHandlers, KubeObjectHandlerRegistration } from "../../renderer/kube-object/handler";

src/extensions/extension-loader/extension-loader.ts

@@ -8,12 +8,9 @@ import { isEqual } from "lodash";
 import type { ObservableMap } from "mobx";
 import { action, computed, makeObservable, observable, observe, reaction, when } from "mobx";
 import { broadcastMessage, ipcMainOn, ipcRendererOn, ipcMainHandle } from "../../common/ipc";
-import type { Disposer } from "../../common/utils";
 import { isDefined, toJS } from "../../common/utils";
 import type { InstalledExtension } from "../extension-discovery/extension-discovery";
 import type { LensExtension, LensExtensionConstructor, LensExtensionId } from "../lens-extension";
-import type { LensRendererExtension } from "../lens-renderer-extension";
-import * as registries from "../registries";
 import type { LensExtensionState } from "../extensions-store/extensions-store";
 import { extensionLoaderFromMainChannel, extensionLoaderFromRendererChannel } from "../../common/ipc/extension-handling";
 import { requestExtensionLoaderInitialState } from "../../renderer/ipc";
@@ -203,7 +200,7 @@ export class ExtensionLoader {
 
   protected async initMain() {
     this.isLoaded = true;
-    this.loadOnMain();
+    await this.autoInitExtensions();
 
     ipcMainHandle(extensionLoaderFromMainChannel, () => {
       return Array.from(this.toJSON());
@@ -251,38 +248,7 @@ export class ExtensionLoader {
     });
   }
 
-  loadOnMain() {
-    this.autoInitExtensions(() => Promise.resolve([]));
-  }
-
-  loadOnClusterManagerRenderer = () => {
-    this.dependencies.logger.debug(`${logModule}: load on main renderer (cluster manager)`);
-
-    return this.autoInitExtensions(async (ext) => {
-      const extension = ext as LensRendererExtension;
-      const removeItems = [
-        registries.CatalogEntityDetailRegistry.getInstance().add(extension.catalogEntityDetailItems),
-      ];
-
-      this.onRemoveExtensionId.addListener((removedExtensionId) => {
-        if (removedExtensionId === extension.id) {
-          removeItems.forEach(remove => {
-            remove();
-          });
-        }
-      });
-
-      return removeItems;
-    });
-  };
-
-  loadOnClusterRenderer = () => {
-    this.dependencies.logger.debug(`${logModule}: load on cluster renderer (dashboard)`);
-
-    this.autoInitExtensions(async () => []);
-  };
-
-  protected async loadExtensions(installedExtensions: Map<string, InstalledExtension>, register: (ext: LensExtension) => Promise<Disposer[]>) {
+  protected async loadExtensions(installedExtensions: Map<string, InstalledExtension>) {
     // Steps of the function:
     // 1. require and call .activate for each Extension
     // 2. Wait until every extension's onActivate has been resolved
@@ -346,7 +312,7 @@ export class ExtensionLoader {
 
     // Return ExtensionLoading[]
     return extensions.map(extension => {
-      const loaded = extension.instance.enable(register).catch((err) => {
+      const loaded = extension.instance.enable().catch((err) => {
         this.dependencies.logger.error(`${logModule}: failed to enable`, { ext: extension, err });
       });
 
@@ -357,12 +323,14 @@ export class ExtensionLoader {
     });
   }
 
-  protected autoInitExtensions(register: (ext: LensExtension) => Promise<Disposer[]>) {
+  autoInitExtensions() {
+    this.dependencies.logger.info(`${logModule}: auto initializing extensions`);
+
     // Setup reaction to load extensions on JSON changes
-    reaction(() => this.toJSON(), installedExtensions => this.loadExtensions(installedExtensions, register));
+    reaction(() => this.toJSON(), installedExtensions => this.loadExtensions(installedExtensions));
 
     // Load initial extensions
-    return this.loadExtensions(this.toJSON(), register);
+    return this.loadExtensions(this.toJSON());
   }
 
   protected requireExtension(extension: InstalledExtension): LensExtensionConstructor | null {

src/extensions/lens-extension-set-dependencies.ts

@@ -12,9 +12,11 @@ import type { CatalogEntityRegistry as RendererCatalogEntityRegistry } from "../
 import type { GetExtensionPageParameters } from "../renderer/routes/get-extension-page-parameters.injectable";
 import type { FileSystemProvisionerStore } from "./extension-loader/file-system-provisioner-store/file-system-provisioner-store";
 import type { NavigateForExtension } from "../main/start-main-application/lens-window/navigate-for-extension.injectable";
+import type { Logger } from "../common/logger";
 
 export interface LensExtensionDependencies {
   readonly fileSystemProvisionerStore: FileSystemProvisionerStore;
+  readonly logger: Logger;
 }
 
 export interface LensMainExtensionDependencies extends LensExtensionDependencies {

src/extensions/lens-extension.ts

@@ -5,12 +5,10 @@
 
 import type { InstalledExtension } from "./extension-discovery/extension-discovery";
 import { action, computed, makeObservable, observable } from "mobx";
-import logger from "../main/logger";
-import type { ProtocolHandlerRegistration } from "./registries";
 import type { PackageJson } from "type-fest";
-import type { Disposer } from "../common/utils";
 import { disposer } from "../common/utils";
 import type { LensExtensionDependencies } from "./lens-extension-set-dependencies";
+import type { ProtocolHandlerRegistration } from "./common-api/registrations";
 
 export type LensExtensionId = string; // path to manifest (package.json)
 export type LensExtensionConstructor = new (...args: ConstructorParameters<typeof LensExtension>) => LensExtension;
@@ -88,20 +86,13 @@ export class LensExtension<Dependencies extends LensExtensionDependencies = Lens
   }
 
   @action
-  async enable(register: (ext: this) => Promise<Disposer[]>) {
+  async enable() {
     if (this._isEnabled) {
       return;
     }
 
-    try {
     this._isEnabled = true;
-
-      this[Disposers].push(...await register(this));
-      logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`);
-
-    } catch (error) {
-      logger.error(`[EXTENSION]: failed to activate ${this.name}@${this.version}: ${error}`);
-    }
+    this[lensExtensionDependencies].logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`);
   }
 
   @action
@@ -115,9 +106,9 @@ export class LensExtension<Dependencies extends LensExtensionDependencies = Lens
     try {
       await this.onDeactivate();
       this[Disposers]();
-      logger.info(`[EXTENSION]: disabled ${this.name}@${this.version}`);
+      this[lensExtensionDependencies].logger.info(`[EXTENSION]: disabled ${this.name}@${this.version}`);
     } catch (error) {
-      logger.error(`[EXTENSION]: disabling ${this.name}@${this.version} threw an error: ${error}`);
+      this[lensExtensionDependencies].logger.error(`[EXTENSION]: disabling ${this.name}@${this.version} threw an error: ${error}`);
     }
   }
 

src/extensions/lens-renderer-extension.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type * as registries from "./registries";
 import { Disposers, LensExtension, lensExtensionDependencies } from "./lens-extension";
 import type { CatalogEntity } from "../common/catalog";
 import type { Disposer } from "../common/utils";
@@ -30,11 +29,13 @@ import type { AppPreferenceTabRegistration } from "../features/preferences/rende
 import type { KubeObjectDetailRegistration } from "../renderer/components/kube-object-details/kube-object-detail-registration";
 import type { ClusterFrameChildComponent } from "../renderer/frames/cluster-frame/cluster-frame-child-component-injection-token";
 import type { EntitySettingRegistration } from "../renderer/components/+entity-settings/extension-registrator.injectable";
+import type { CatalogEntityDetailRegistration } from "../renderer/components/+catalog/entity-details/token";
+import type { ClusterPageMenuRegistration, PageRegistration } from "./common-api/registrations";
 
 export class LensRendererExtension extends LensExtension<LensRendererExtensionDependencies> {
-  globalPages: registries.PageRegistration[] = [];
-  clusterPages: registries.PageRegistration[] = [];
-  clusterPageMenus: registries.ClusterPageMenuRegistration[] = [];
+  globalPages: PageRegistration[] = [];
+  clusterPages: PageRegistration[] = [];
+  clusterPageMenus: ClusterPageMenuRegistration[] = [];
   clusterFrameComponents: ClusterFrameChildComponent[] = [];
   kubeObjectStatusTexts: KubeObjectStatusRegistration[] = [];
   appPreferences: AppPreferenceRegistration[] = [];
@@ -47,7 +48,7 @@ export class LensRendererExtension extends LensExtension<LensRendererExtensionDe
   commands: CommandRegistration[] = [];
   welcomeMenus: WelcomeMenuRegistration[] = [];
   welcomeBanners: WelcomeBannerRegistration[] = [];
-  catalogEntityDetailItems: registries.CatalogEntityDetailRegistration<CatalogEntity>[] = [];
+  catalogEntityDetailItems: CatalogEntityDetailRegistration<CatalogEntity>[] = [];
   topBarItems: TopBarRegistration[] = [];
   additionalCategoryColumns: AdditionalCategoryColumnRegistration[] = [];
   customCategoryViews: CustomCategoryViewRegistration[] = [];

src/extensions/registries/base-registry.ts

@@ -1,46 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-// Base class for extensions-api registries
-import { action, observable, makeObservable } from "mobx";
-import type { Disposer } from "../../common/utils";
-import { Singleton } from "../../common/utils";
-import type { LensExtension } from "../lens-extension";
-
-export class BaseRegistry<T, I = T> extends Singleton {
-  private items = observable.map<T, I>([], { deep: false });
-
-  constructor() {
-    super();
-    makeObservable(this);
-  }
-
-  getItems(): I[] {
-    return Array.from(this.items.values());
-  }
-
-  @action
-  add(items: T | T[], extension?: LensExtension): Disposer {
-    const itemArray = [items].flat() as T[];
-
-    itemArray.forEach(item => {
-      this.items.set(item, this.getRegisteredItem(item, extension));
-    });
-
-    return () => this.remove(...itemArray);
-  }
-
-  // eslint-disable-next-line unused-imports/no-unused-vars-ts
-  protected getRegisteredItem(item: T, extension?: LensExtension): I {
-    return item as never;
-  }
-
-  @action
-  remove(...items: T[]) {
-    items.forEach(item => {
-      this.items.delete(item);
-    });
-  }
-}

src/extensions/registries/catalog-entity-detail-registry.ts

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type React from "react";
-import type { Disposer } from "../../common/utils";
-import type { CatalogEntity } from "../common-api/catalog";
-import { BaseRegistry } from "./base-registry";
-
-export interface CatalogEntityDetailsProps<T extends CatalogEntity> {
-  entity: T;
-}
-
-export interface CatalogEntityDetailComponents<T extends CatalogEntity> {
-  Details: React.ComponentType<CatalogEntityDetailsProps<T>>;
-}
-
-export interface CatalogEntityDetailRegistration<T extends CatalogEntity> {
-  kind: string;
-  apiVersions: string[];
-  components: CatalogEntityDetailComponents<T>;
-  priority?: number;
-}
-
-export class CatalogEntityDetailRegistry extends BaseRegistry<CatalogEntityDetailRegistration<CatalogEntity>> {
-  add<T extends CatalogEntity>(items: CatalogEntityDetailRegistration<T> | CatalogEntityDetailRegistration<T>[]): Disposer {
-    return super.add(items as never);
-  }
-
-  getItemsForKind(kind: string, apiVersion: string) {
-    const items = this.getItems().filter((item) => {
-      return item.kind === kind && item.apiVersions.includes(apiVersion);
-    });
-
-    return items.sort((a, b) => (b.priority ?? 50) - (a.priority ?? 50));
-  }
-}

src/extensions/registries/index.ts

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-// All registries managed by extensions api
-
-export * from "./page-registry";
-export * from "./page-menu-registry";
-export * from "./catalog-entity-detail-registry";
-export * from "./protocol-handler";

src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap

@@ -160,7 +160,56 @@ exports[`extension special characters in page registrations renders 1`] = `
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -299,7 +348,56 @@ exports[`extension special characters in page registrations when navigating to r
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap

@@ -160,7 +160,56 @@ exports[`navigate to extension page renders 1`] = `
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -299,7 +348,56 @@ exports[`navigate to extension page when extension navigates to child route rend
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -454,7 +552,56 @@ exports[`navigate to extension page when extension navigates to route with param
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -609,7 +756,56 @@ exports[`navigate to extension page when extension navigates to route without pa
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -764,7 +960,56 @@ exports[`navigate to extension page when extension navigates to route without pa
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/__snapshots__/navigating-between-routes.test.tsx.snap

@@ -84,7 +84,56 @@ exports[`navigating between routes given route with optional path parameters whe
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -223,7 +272,56 @@ exports[`navigating between routes given route without path parameters when navi
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap

@@ -160,7 +160,56 @@ exports[`add-cluster - navigation using application menu renders 1`] = `
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -383,7 +432,56 @@ exports[`add-cluster - navigation using application menu when navigating to add
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/application-update/__snapshots__/installing-update.test.ts.snap

@@ -161,7 +161,56 @@ exports[`installing update when started renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -381,7 +430,56 @@ exports[`installing update when started when user checks for updates renders 1`]
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -601,7 +699,56 @@ exports[`installing update when started when user checks for updates when new up
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -846,7 +993,56 @@ exports[`installing update when started when user checks for updates when new up
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1091,7 +1287,56 @@ exports[`installing update when started when user checks for updates when new up
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1311,7 +1556,56 @@ exports[`installing update when started when user checks for updates when no new
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap

@@ -186,7 +186,56 @@ exports[`encourage user to update when sufficient time passed since update was d
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -406,7 +455,56 @@ exports[`encourage user to update when sufficient time passed since update was d
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap

@@ -161,7 +161,56 @@ exports[`installing update using tray when started renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -381,7 +430,56 @@ exports[`installing update using tray when started when user checks for updates
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -601,7 +699,56 @@ exports[`installing update using tray when started when user checks for updates
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -846,7 +993,56 @@ exports[`installing update using tray when started when user checks for updates
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1091,7 +1287,56 @@ exports[`installing update using tray when started when user checks for updates
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1311,7 +1556,56 @@ exports[`installing update using tray when started when user checks for updates
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/__snapshots__/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts.snap

@@ -186,7 +186,56 @@ exports[`force user to update when too long since update was downloaded when app
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -431,7 +480,56 @@ exports[`force user to update when too long since update was downloaded when app
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -723,7 +821,56 @@ exports[`force user to update when too long since update was downloaded when app
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap

@@ -161,7 +161,56 @@ exports[`periodical checking of updates given updater is enabled and configurati
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap

@@ -161,7 +161,56 @@ exports[`selection of update stability when started renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/catalog/opening-entity-details.test.tsx

@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { DiContainer } from "@ogre-tools/injectable";
+import type { RenderResult } from "@testing-library/react";
+import { KubernetesCluster, WebLink } from "../../common/catalog-entities";
+import getClusterByIdInjectable from "../../common/cluster-store/get-by-id.injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+import navigateToCatalogInjectable from "../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
+import catalogEntityRegistryInjectable from "../../renderer/api/catalog/entity/registry.injectable";
+import { type ApplicationBuilder, getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import createClusterInjectable from "../../renderer/create-cluster/create-cluster.injectable";
+
+describe("opening catalog entity details panel", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let windowDi: DiContainer;
+  let clusterEntity: KubernetesCluster;
+  let localClusterEntity: KubernetesCluster;
+  let otherEntity: WebLink;
+  let cluster: Cluster;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    builder.afterWindowStart((windowDi) => {
+      const createCluster = windowDi.inject(createClusterInjectable);
+
+      clusterEntity = new KubernetesCluster({
+        metadata: {
+          labels: {},
+          name: "some-kubernetes-cluster",
+          uid: "some-entity-id",
+        },
+        spec: {
+          kubeconfigContext: "some-context",
+          kubeconfigPath: "/some/path/to/kubeconfig",
+        },
+        status: {
+          phase: "connecting",
+        },
+      });
+      localClusterEntity = new KubernetesCluster({
+        metadata: {
+          labels: {},
+          name: "some-local-kubernetes-cluster",
+          uid: "some-entity-id-2",
+          source: "local",
+        },
+        spec: {
+          kubeconfigContext: "some-context",
+          kubeconfigPath: "/some/path/to/local/kubeconfig",
+        },
+        status: {
+          phase: "connecting",
+        },
+      });
+      otherEntity = new WebLink({
+        metadata: {
+          labels: {},
+          name: "some-weblink",
+          uid: "some-weblink-id",
+        },
+        spec: {
+          url: "https://my-websome.com",
+        },
+        status: {
+          phase: "available",
+        },
+      });
+      cluster = createCluster({
+        contextName: clusterEntity.spec.kubeconfigContext,
+        id: clusterEntity.getId(),
+        kubeConfigPath: clusterEntity.spec.kubeconfigPath,
+      }, {
+        clusterServerUrl: "https://localhost:9999",
+      });
+
+      // TODO: remove once ClusterStore can be used without overriding it
+      windowDi.override(getClusterByIdInjectable, () => (clusterId) => {
+        if (clusterId === cluster.id) {
+          return cluster;
+        }
+
+        return undefined;
+      });
+
+      // TODO: replace with proper entity source once syncing entities between main and windows is injectable
+      const catalogEntityRegistry = windowDi.inject(catalogEntityRegistryInjectable);
+
+      catalogEntityRegistry.updateItems([clusterEntity, otherEntity, localClusterEntity]);
+    });
+
+    rendered = await builder.render();
+    windowDi = builder.applicationWindow.only.di;
+  });
+
+  it("renders", () => {
+    expect(rendered.baseElement).toMatchSnapshot();
+  });
+
+  it("shouldn't show the details yet", () => {
+    expect(rendered.queryByTestId("catalog-entity-details-drawer")).not.toBeInTheDocument();
+  });
+
+  describe("when navigated to the catalog", () => {
+    beforeEach(async () => {
+      const navigateToCatalog = windowDi.inject(navigateToCatalogInjectable);
+
+      navigateToCatalog();
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("should show the 'Browse All' view", () => {
+      expect(rendered.queryByTestId("catalog-list-for-browse-all")).toBeInTheDocument();
+    });
+
+    it("shouldn't show the details yet", () => {
+      expect(rendered.queryByTestId("catalog-entity-details-drawer")).not.toBeInTheDocument();
+    });
+
+    describe("when opening the menu 'some-kubernetes-cluster'", () => {
+      beforeEach(() => {
+        rendered.getByTestId("icon-for-menu-actions-for-catalog-for-some-entity-id").click();
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("opens the menu", () => {
+        expect(rendered.queryByTestId("menu-actions-for-catalog-for-some-entity-id")).toBeInTheDocument();
+      });
+
+      it("shouldn't show the details yet", () => {
+        expect(rendered.queryByTestId("catalog-entity-details-drawer")).not.toBeInTheDocument();
+      });
+
+      describe("when clicking the 'View Details' menu item", () => {
+        beforeEach(() => {
+          rendered.getByTestId("open-details-menu-item-for-some-entity-id").click();
+        });
+
+        it("renders", () => {
+          expect(rendered.baseElement).toMatchSnapshot();
+        });
+
+        describe("when the panel opens", () => {
+          beforeEach(async () => {
+            await rendered.findAllByTestId("catalog-entity-details-drawer");
+          });
+
+          it("renders", () => {
+            expect(rendered.baseElement).toMatchSnapshot();
+          });
+
+          it("opens the detail panel for the correct item", () => {
+            expect(rendered.queryByTestId("catalog-entity-details-content-for-some-entity-id")).toBeInTheDocument();
+          });
+
+          it("shows the registered items", () => {
+            expect(rendered.queryByTestId("kubernetes-distro-for-some-entity-id")).toBeInTheDocument();
+          });
+        });
+      });
+    });
+
+    describe("when opening the menu 'some-weblink'", () => {
+      beforeEach(() => {
+        rendered.getByTestId("icon-for-menu-actions-for-catalog-for-some-weblink-id").click();
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("opens the menu", () => {
+        expect(rendered.queryByTestId("menu-actions-for-catalog-for-some-weblink-id")).toBeInTheDocument();
+      });
+
+      it("shouldn't show the details yet", () => {
+        expect(rendered.queryByTestId("catalog-entity-details-drawer")).not.toBeInTheDocument();
+      });
+
+      describe("when clicking the 'View Details' menu item", () => {
+        beforeEach(() => {
+          rendered.getByTestId("open-details-menu-item-for-some-weblink-id").click();
+        });
+
+        it("renders", () => {
+          expect(rendered.baseElement).toMatchSnapshot();
+        });
+
+        describe("when the panel opens", () => {
+          beforeEach(async () => {
+            await rendered.findAllByTestId("catalog-entity-details-drawer");
+          });
+
+          it("renders", () => {
+            expect(rendered.baseElement).toMatchSnapshot();
+          });
+
+          it("opens the detail panel for the correct item", () => {
+            expect(rendered.queryByTestId("catalog-entity-details-content-for-some-weblink-id")).toBeInTheDocument();
+          });
+
+          it("shows the registered items", () => {
+            expect(rendered.queryByTestId("weblink-url-for-some-weblink-id")).toBeInTheDocument();
+          });
+
+          it("should not show registered items for different kinds", () => {
+            expect(rendered.queryByTestId("kubernetes-distro-for-some-weblink-id")).not.toBeInTheDocument();
+          });
+        });
+      });
+    });
+  });
+});

src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap

@@ -252,7 +252,56 @@ exports[`Command Pallet: keyboard shortcut tests when on linux renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -563,7 +612,56 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing ESC
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -874,7 +972,56 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1197,7 +1344,56 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1417,7 +1613,56 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1637,7 +1882,56 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing ESC
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1857,7 +2151,56 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -2089,7 +2432,56 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/entity-settings/__snapshots__/showing-settings-for-correct-entity.test.tsx.snap

@@ -161,7 +161,56 @@ exports[`Showing correct entity settings renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -458,7 +507,56 @@ exports[`Showing correct entity settings when navigating to local cluster entity
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -776,7 +874,56 @@ exports[`Showing correct entity settings when navigating to non-local cluster en
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -996,7 +1143,56 @@ exports[`Showing correct entity settings when navigating to weblink entity setti
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -160,7 +160,56 @@ exports[`extensions - navigation using application menu renders 1`] = `
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -405,7 +454,56 @@ exports[`extensions - navigation using application menu when navigating to exten
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap

@@ -583,7 +583,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1236,7 +1285,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1889,7 +1987,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -2653,7 +2800,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -3314,7 +3510,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -4078,7 +4323,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -5024,7 +5318,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -5788,7 +6131,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -6734,7 +7126,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -7499,7 +7940,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -8149,7 +8639,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -8799,7 +9338,56 @@ exports[`add custom helm repository in preferences when navigating to preference
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap

@@ -583,7 +583,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1236,7 +1285,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1891,7 +1989,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -2595,7 +2742,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -3248,7 +3444,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -3890,7 +4135,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -4577,7 +4871,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -5266,7 +5609,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -6014,7 +6406,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -6656,7 +7097,56 @@ exports[`add helm repository from list in preferences when navigating to prefere
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap

@@ -583,7 +583,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1225,7 +1274,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1759,7 +1857,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -2401,7 +2548,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -2935,7 +3131,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -3577,7 +3822,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -4264,7 +4558,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -4798,7 +5141,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -5332,7 +5724,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -5866,7 +6307,56 @@ exports[`listing active helm repositories in preferences when navigating to pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap

@@ -583,7 +583,56 @@ exports[`remove helm repository from list of active repositories in preferences
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1236,7 +1285,56 @@ exports[`remove helm repository from list of active repositories in preferences
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1889,7 +1987,56 @@ exports[`remove helm repository from list of active repositories in preferences
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -2531,7 +2678,56 @@ exports[`remove helm repository from list of active repositories in preferences
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap

@@ -643,7 +643,56 @@ exports[`preferences - closing-preferences given accessing preferences directly
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -926,7 +975,56 @@ exports[`preferences - closing-preferences given accessing preferences directly
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1067,7 +1165,56 @@ exports[`preferences - closing-preferences given accessing preferences directly
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1208,7 +1355,56 @@ exports[`preferences - closing-preferences given accessing preferences directly
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1909,7 +2105,56 @@ exports[`preferences - closing-preferences given already in a page and then navi
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2192,7 +2437,56 @@ exports[`preferences - closing-preferences given already in a page and then navi
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2333,7 +2627,56 @@ exports[`preferences - closing-preferences given already in a page and then navi
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2474,7 +2817,56 @@ exports[`preferences - closing-preferences given already in a page and then navi
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap

@@ -656,7 +656,56 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap

@@ -631,7 +631,56 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1348,7 +1397,56 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2077,7 +2175,56 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-to-application-preferences.test.tsx.snap

@@ -631,7 +631,56 @@ exports[`preferences - navigation to application preferences given in preference
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1351,7 +1400,56 @@ exports[`preferences - navigation to application preferences given in preference
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1692,7 +1790,56 @@ exports[`preferences - navigation to application preferences given in some child
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2381,7 +2528,56 @@ exports[`preferences - navigation to application preferences given in some child
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -3071,7 +3267,56 @@ exports[`preferences - navigation to application preferences given in some child
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap

@@ -631,7 +631,56 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1208,7 +1257,56 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap

@@ -644,7 +644,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -959,7 +1008,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1285,7 +1383,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1611,7 +1758,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1963,7 +2159,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2652,7 +2897,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -3379,7 +3673,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -3719,7 +4062,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -3990,7 +4382,56 @@ exports[`preferences - navigation to extension specific preferences given in pre
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap

@@ -631,7 +631,56 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1247,7 +1296,56 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap

@@ -631,7 +631,56 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -972,7 +1021,56 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap

@@ -266,7 +266,56 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -955,7 +1004,56 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1656,7 +1754,56 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1970,7 +2117,56 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -2244,7 +2440,56 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap

@@ -631,7 +631,56 @@ exports[`preferences - navigation to terminal preferences given in preferences,
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -1179,7 +1228,56 @@ exports[`preferences - navigation to terminal preferences given in preferences,
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -160,7 +160,56 @@ exports[`preferences - navigation using application menu renders 1`] = `
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -849,7 +898,56 @@ exports[`preferences - navigation using application menu when navigating to pref
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap

@@ -161,7 +161,56 @@ exports[`show-about-using-tray renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -852,7 +901,56 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/preferences/__snapshots__/urls-of-legacy-extensions.test.tsx.snap

@@ -305,7 +305,56 @@ exports[`preferences: URLs of legacy extensions given extension with both custom
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -669,7 +718,56 @@ exports[`preferences: URLs of legacy extensions given extension with both custom
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -995,7 +1093,56 @@ exports[`preferences: URLs of legacy extensions given extension with custom pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1295,7 +1442,56 @@ exports[`preferences: URLs of legacy extensions given extension with custom pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1635,7 +1831,56 @@ exports[`preferences: URLs of legacy extensions given extension with custom pref
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/status-bar/__snapshots__/status-bar-items-originating-from-extensions.test.tsx.snap

@@ -161,7 +161,56 @@ exports[`status-bar-items-originating-from-extensions when application starts wh
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap

@@ -161,7 +161,56 @@ exports[`extendability-using-extension-api given an extension with a weakly type
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -390,7 +439,56 @@ exports[`extendability-using-extension-api given an extension with top-bar items
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -610,7 +708,56 @@ exports[`extendability-using-extension-api given an extension with top-bar items
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -830,7 +977,56 @@ exports[`extendability-using-extension-api renders 1`] = `
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >

src/features/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -160,7 +160,56 @@ exports[`welcome - navigation using application menu renders 1`] = `
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >
@@ -850,7 +899,56 @@ exports[`welcome - navigation using application menu when navigated somewhere el
       >
         <div
           class="HotbarItems flex column gaps"
+        >
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="0"
           />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="1"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="2"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="3"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="4"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="5"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="6"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="7"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="8"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="9"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="10"
+          />
+          <div
+            class="HotbarCell isDraggingOwner animateDown"
+            index="11"
+          />
+        </div>
         <div
           class="HotbarSelector"
         >
@@ -1069,7 +1167,56 @@ exports[`welcome - navigation using application menu when navigated somewhere el
     >
       <div
         class="HotbarItems flex column gaps"
+      >
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="0"
         />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="1"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="2"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="3"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="4"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="5"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="6"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="7"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="8"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="9"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="10"
+        />
+        <div
+          class="HotbarCell isDraggingOwner animateDown"
+          index="11"
+        />
+      </div>
       <div
         class="HotbarSelector"
       >

src/main/extension-loader/create-extension-instance.injectable.ts

@@ -3,6 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { Writable } from "type-fest";
+import loggerInjectable from "../../common/logger.injectable";
 import { createExtensionInstanceInjectionToken } from "../../extensions/extension-loader/create-extension-instance.token";
 import fileSystemProvisionerStoreInjectable from "../../extensions/extension-loader/file-system-provisioner-store/file-system-provisioner-store.injectable";
 import { lensExtensionDependencies } from "../../extensions/lens-extension";
@@ -18,12 +20,13 @@ const createExtensionInstanceInjectable = getInjectable({
       fileSystemProvisionerStore: di.inject(fileSystemProvisionerStoreInjectable),
       entityRegistry: di.inject(catalogEntityRegistryInjectable),
       navigate: di.inject(navigateForExtensionInjectable),
+      logger: di.inject(loggerInjectable),
     };
 
     return (ExtensionClass, extension) => {
       const instance = new ExtensionClass(extension) as LensMainExtension;
 
-      (instance as { [lensExtensionDependencies]: LensMainExtensionDependencies })[lensExtensionDependencies] = deps;
+      (instance as Writable<LensMainExtension>)[lensExtensionDependencies] = deps;
 
       return instance;
     };

src/renderer/bootstrap.tsx

@@ -94,12 +94,6 @@ export async function bootstrap(di: DiContainer) {
   await attachChromeDebugger();
   rootElem.classList.toggle("is-mac", isMac);
 
-  logger.info(`${logPrefix} initializing Registries`);
-  initializers.initRegistries();
-
-  logger.info(`${logPrefix} initializing CatalogEntityDetailRegistry`);
-  initializers.initCatalogEntityDetailRegistry();
-
   logger.info(`${logPrefix} initializing CatalogCategoryRegistryEntries`);
   initializers.initCatalogCategoryRegistryEntries({
     navigateToAddCluster: di.inject(navigateToAddClusterInjectable),

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -1,124 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import styles from "./catalog-entity-details.module.scss";
-import React, { Component } from "react";
-import { observer } from "mobx-react";
-import { Drawer, DrawerItem } from "../drawer";
-import type { CatalogCategory, CatalogEntity } from "../../../common/catalog";
-import { Icon } from "../icon";
-import { CatalogEntityDrawerMenu } from "./catalog-entity-drawer-menu";
-import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
-import { isDevelopment } from "../../../common/vars";
-import { cssNames } from "../../utils";
-import { Avatar } from "../avatar";
-import type { GetLabelBadges } from "./get-label-badges.injectable";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import getLabelBadgesInjectable from "./get-label-badges.injectable";
-
-export interface CatalogEntityDetailsProps<Entity extends CatalogEntity> {
-  entity: Entity;
-  hideDetails(): void;
-  onRun: () => void;
-}
-
-interface Dependencies {
-  getLabelBadges: GetLabelBadges;
-}
-
-@observer
-class NonInjectedCatalogEntityDetails<Entity extends CatalogEntity> extends Component<CatalogEntityDetailsProps<Entity> & Dependencies> {
-  categoryIcon(category: CatalogCategory) {
-    if (Icon.isSvg(category.metadata.icon)) {
-      return <Icon svg={category.metadata.icon} smallest />;
-    } else {
-      return <Icon material={category.metadata.icon} smallest />;
-    }
-  }
-
-  renderContent(entity: Entity) {
-    const { onRun, hideDetails, getLabelBadges } = this.props;
-    const detailItems = CatalogEntityDetailRegistry.getInstance().getItemsForKind(entity.kind, entity.apiVersion);
-    const details = detailItems.map(({ components }, index) => <components.Details entity={entity} key={index} />);
-    const showDefaultDetails = detailItems.find((item) => item.priority ?? 50 > 999) === undefined;
-
-    return (
-      <>
-        {showDefaultDetails && (
-          <div className="flex">
-            <div className={styles.entityIcon}>
-              <Avatar
-                title={entity.getName()}
-                colorHash={`${entity.getName()}-${entity.getSource()}`}
-                size={128}
-                src={entity.spec.icon?.src}
-                data-testid="detail-panel-hot-bar-icon"
-                background={entity.spec.icon?.background}
-                onClick={onRun}
-                className={styles.avatar}
-              >
-                {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material}/>}
-              </Avatar>
-              {entity.isEnabled() && (
-                <div className={styles.hint}>
-                  Click to open
-                </div>
-              )}
-            </div>
-            <div className={cssNames("box grow", styles.metadata)}>
-              <DrawerItem name="Name">
-                {entity.getName()}
-              </DrawerItem>
-              <DrawerItem name="Kind">
-                {entity.kind}
-              </DrawerItem>
-              <DrawerItem name="Source">
-                {entity.getSource()}
-              </DrawerItem>
-              <DrawerItem name="Status">
-                {entity.status.phase}
-              </DrawerItem>
-              <DrawerItem name="Labels">
-                {getLabelBadges(entity, hideDetails)}
-              </DrawerItem>
-              {isDevelopment && (
-                <DrawerItem name="Id">
-                  {entity.getId()}
-                </DrawerItem>
-              )}
-            </div>
-          </div>
-        )}
-        <div className="box grow">
-          {details}
-        </div>
-      </>
-    );
-  }
-
-  render() {
-    const { entity, hideDetails } = this.props;
-
-    return (
-      <Drawer
-        className={styles.entityDetails}
-        usePortal={true}
-        open={true}
-        title={`${entity.kind}: ${entity.getName()}`}
-        toolbar={<CatalogEntityDrawerMenu entity={entity} key={entity.getId()} />}
-        onClose={hideDetails}
-      >
-        {this.renderContent(entity)}
-      </Drawer>
-    );
-  }
-}
-
-export const CatalogEntityDetails = withInjectables<Dependencies, CatalogEntityDetailsProps<CatalogEntity>>(NonInjectedCatalogEntityDetails, {
-  getProps: (di, props) => ({
-    ...props,
-    getLabelBadges: di.inject(getLabelBadgesInjectable),
-  }),
-}) as <Entity extends CatalogEntity>(props: CatalogEntityDetailsProps<Entity>) => React.ReactElement;

src/renderer/components/+catalog/catalog.test.tsx

@@ -10,7 +10,6 @@ import { Catalog } from "./catalog";
 import type { CatalogEntityActionContext, CatalogEntityData } from "../../../common/catalog";
 import { CatalogEntity } from "../../../common/catalog";
 import type { CatalogEntityOnBeforeRun, CatalogEntityRegistry } from "../../api/catalog/entity/registry";
-import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
 import type { CatalogEntityStore } from "./catalog-entity-store/catalog-entity.store";
 import { getDiForUnitTesting } from "../../getDiForUnitTesting";
 import type { DiContainer } from "@ogre-tools/injectable";
@@ -71,8 +70,6 @@ describe("<Catalog />", () => {
 
     di.permitSideEffects(getConfigurationFileModelInjectable);
 
-    CatalogEntityDetailRegistry.createInstance();
-
     render = renderFor(di);
     onRun = jest.fn();
     catalogEntityItem = createMockCatalogEntity(onRun);
@@ -87,10 +84,6 @@ describe("<Catalog />", () => {
     });
   });
 
-  afterEach(() => {
-    CatalogEntityDetailRegistry.resetInstance();
-  });
-
   describe("can use catalogEntityRegistry.addOnBeforeRun to add hooks for catalog entities", () => {
     let onBeforeRunMock: AsyncFnMock<CatalogEntityOnBeforeRun>;
 

src/renderer/components/+catalog/catalog.tsx

@@ -15,11 +15,11 @@ import { MenuItem, MenuActions } from "../menu";
 import type { CatalogEntityContextMenu } from "../../api/catalog-entity";
 import type { CatalogCategory, CatalogCategoryRegistry, CatalogEntity } from "../../../common/catalog";
 import { CatalogAddButton } from "./catalog-add-button";
-import { Notifications } from "../notifications";
+import type { ShowNotification } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
 import type { StorageLayer } from "../../utils";
 import { prevDefault } from "../../utils";
-import { CatalogEntityDetails } from "./catalog-entity-details";
+import { CatalogEntityDetails } from "./entity-details/view";
 import { CatalogMenu } from "./catalog-menu";
 import { RenderDelay } from "../render-delay/render-delay";
 import { Icon } from "../icon";
@@ -48,6 +48,9 @@ import type { NormalizeCatalogEntityContextMenu } from "../../catalog/normalize-
 import normalizeCatalogEntityContextMenuInjectable from "../../catalog/normalize-menu-item.injectable";
 import type { EmitAppEvent } from "../../../common/app-event-bus/emit-event.injectable";
 import emitAppEventInjectable from "../../../common/app-event-bus/emit-event.injectable";
+import type { Logger } from "../../../common/logger";
+import loggerInjectable from "../../../common/logger.injectable";
+import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
 
 interface Dependencies {
   catalogPreviousActiveTabStorage: StorageLayer<string | null>;
@@ -65,12 +68,14 @@ interface Dependencies {
   visitEntityContextMenu: VisitEntityContextMenu;
   navigate: Navigate;
   normalizeMenuItem: NormalizeCatalogEntityContextMenu;
+  showErrorNotification: ShowNotification;
+  logger: Logger;
 }
 
 @observer
 class NonInjectedCatalog extends React.Component<Dependencies> {
   private readonly menuItems = observable.array<CatalogEntityContextMenu>();
-  @observable activeTab?: string;
+  @observable activeTab: string | undefined = undefined;
 
   constructor(props: Dependencies) {
     super(props);
@@ -79,7 +84,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
 
   @computed
   get routeActiveTab(): string {
-    const { group, kind } = this.props.routeParameters;
+    const { routeParameters: { group, kind }, catalogPreviousActiveTabStorage } = this.props;
 
     const dereferencedGroup = group.get();
     const dereferencedKind = kind.get();
@@ -88,13 +93,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
       return `${dereferencedGroup}/${dereferencedKind}`;
     }
 
-    const previousTab = this.props.catalogPreviousActiveTabStorage.get();
-
-    if (previousTab) {
-      return previousTab;
-    }
-
-    return browseCatalogTab;
+    return catalogPreviousActiveTabStorage.get() || browseCatalogTab;
   }
 
   async componentDidMount() {
@@ -102,6 +101,8 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
       catalogEntityStore,
       catalogPreviousActiveTabStorage,
       catalogCategoryRegistry,
+      logger,
+      showErrorNotification,
     } = this.props;
 
     disposeOnUnmount(this, [
@@ -110,7 +111,11 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
         catalogPreviousActiveTabStorage.set(this.routeActiveTab);
 
         try {
-          await when(() => (routeTab === browseCatalogTab || !!catalogCategoryRegistry.filteredItems.find(i => i.getId() === routeTab)), { timeout: 5_000 }); // we need to wait because extensions might take a while to load
+          if (routeTab !== browseCatalogTab) {
+            // we need to wait because extensions might take a while to load
+            await when(() => Boolean(catalogCategoryRegistry.filteredItems.find(i => i.getId() === routeTab)), { timeout: 5_000 });
+          }
+
           const item = catalogCategoryRegistry.filteredItems.find(i => i.getId() === routeTab);
 
           runInAction(() => {
@@ -118,8 +123,8 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
             catalogEntityStore.activeCategory.set(item);
           });
         } catch (error) {
-          console.error(error);
-          Notifications.error((
+          logger.warn("Failed to find route tab", error);
+          showErrorNotification((
             <p>
               {"Unknown category: "}
               {routeTab}
@@ -198,9 +203,14 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
     };
 
     return (
-      <MenuActions id={`menu-actions-for-catalog-for-${entity.getId()}`} onOpen={onOpen}>
+      <MenuActions
+        id={`menu-actions-for-catalog-for-${entity.getId()}`}
+        data-testid={`menu-actions-for-catalog-for-${entity.getId()}`}
+        onOpen={onOpen}
+      >
         <MenuItem
           key="open-details"
+          data-testid={`open-details-menu-item-for-${entity.getId()}`}
           onClick={() => this.props.catalogEntityStore.selectedItemId.set(entity.getId())}
         >
           View Details
@@ -253,7 +263,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
 
   renderViews = (activeCategory: CatalogCategory | undefined) => {
     if (!activeCategory) {
-      return this.renderList(activeCategory);
+      return this.renderList(undefined);
     }
 
     const customViews = this.props.customCategoryViews.get()
@@ -301,15 +311,12 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
         {...getCategoryColumns({ activeCategory })}
         onDetails={this.onDetails}
         renderItemMenu={this.renderItemMenu}
+        data-testid={`catalog-list-for-${activeCategory?.metadata.name ?? "browse-all"}`}
       />
     );
   }
 
   render() {
-    if (!this.props.catalogEntityStore) {
-      return null;
-    }
-
     const activeCategory = this.props.catalogEntityStore.activeCategory.get();
     const selectedItem = this.props.catalogEntityStore.selectedItem.get();
 
@@ -362,5 +369,7 @@ export const Catalog = withInjectables<Dependencies>(NonInjectedCatalog, {
     visitEntityContextMenu: di.inject(visitEntityContextMenuInjectable),
     navigate: di.inject(navigateInjectable),
     normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
+    logger: di.inject(loggerInjectable),
+    showErrorNotification: di.inject(showErrorNotificationInjectable),
   }),
 });

src/renderer/components/+catalog/entity-details/detail-items.injectable.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import { computed } from "mobx";
+import { byOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { CatalogEntity } from "../../../api/catalog-entity";
+import { catalogEntityDetailItemInjectionToken } from "./token";
+
+const catalogEntityDetailItemsInjectable = getInjectable({
+  id: "catalog-entity-detail-items",
+  instantiate: (di, entity) => {
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+    const detailItems = computedInjectMany(catalogEntityDetailItemInjectionToken);
+
+    return computed(() => (
+      detailItems.get()
+        .filter(item => (
+          item.apiVersions.has(entity.apiVersion)
+          && item.kind === entity.kind
+        ))
+        .sort(byOrderNumber)
+        .map(item => item.components.Details)
+    ));
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, entity: CatalogEntity) => `${entity.apiVersion}/${entity.kind}`,
+  }),
+});
+
+export default catalogEntityDetailItemsInjectable;

src/renderer/components/+catalog/entity-details/internal/kubernetes-cluster-details.injectable.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import React from "react";
+import { KubernetesCluster } from "../../../../../common/catalog-entities";
+import { DrawerTitle, DrawerItem } from "../../../drawer";
+import { catalogEntityDetailItemInjectionToken } from "../token";
+
+const kubernetesClusterDetailsItemInjectable = getInjectable({
+  id: "kubernetes-cluster-details-item",
+  instantiate: () => ({
+    apiVersions: new Set([KubernetesCluster.apiVersion]),
+    kind: KubernetesCluster.kind,
+    orderNumber: 40,
+    components: {
+      Details: ({ entity }) => (
+        <>
+          <DrawerTitle>Kubernetes Information</DrawerTitle>
+          <div className="box grow EntityMetadata">
+            <DrawerItem
+              name="Distribution"
+              data-testid={`kubernetes-distro-for-${entity.getId()}`}
+            >
+              {entity.metadata.distro || "unknown"}
+            </DrawerItem>
+            <DrawerItem name="Kubelet Version">
+              {entity.metadata.kubeVersion || "unknown"}
+            </DrawerItem>
+          </div>
+        </>
+      ),
+    },
+  }),
+  injectionToken: catalogEntityDetailItemInjectionToken,
+});
+
+export default kubernetesClusterDetailsItemInjectable;

src/renderer/components/+catalog/entity-details/internal/weblink-details.injectable.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import React from "react";
+import { WebLink } from "../../../../../common/catalog-entities";
+import { DrawerTitle, DrawerItem } from "../../../drawer";
+import { catalogEntityDetailItemInjectionToken } from "../token";
+
+const weblinkDetailsItemInjectable = getInjectable({
+  id: "weblink-details-item",
+  instantiate: () => ({
+    apiVersions: new Set([WebLink.apiVersion]),
+    kind: WebLink.kind,
+    components: {
+      Details: ({ entity }) => (
+        <>
+          <DrawerTitle>More Information</DrawerTitle>
+          <DrawerItem
+            name="URL"
+            data-testid={`weblink-url-for-${entity.getId()}`}
+          >
+            {entity.spec.url}
+          </DrawerItem>
+        </>
+      ),
+    },
+    orderNumber: 40,
+  }),
+  injectionToken: catalogEntityDetailItemInjectionToken,
+});
+
+export default weblinkDetailsItemInjectable;

src/renderer/components/+catalog/entity-details/registrator.injectable.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
+import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
+import type { CatalogEntity } from "../../../api/catalog-entity";
+import { getRandId } from "../../../utils";
+import type { CatalogEntityDetailRegistration } from "./token";
+import { catalogEntityDetailItemInjectionToken } from "./token";
+
+const catalogEntityDetailItemsRegistratorInjectable = getInjectable({
+  id: "catalog-entity-detail-items-registrator",
+  instantiate: () => (ext) => {
+    const extension = ext as LensRendererExtension;
+
+    return extension.catalogEntityDetailItems.map(getRegistratorFor(extension));
+  },
+  injectionToken: extensionRegistratorInjectionToken,
+});
+
+export default catalogEntityDetailItemsRegistratorInjectable;
+
+const getRegistratorFor = (extension: LensRendererExtension) => ({
+  apiVersions,
+  components,
+  kind,
+  priority,
+}: CatalogEntityDetailRegistration<CatalogEntity>) => getInjectable({
+  id: `catalog-entity-detail-item-for-${extension.sanitizedExtensionId}-${getRandId({ sep: "-" })}`,
+  instantiate: () => ({
+    apiVersions: new Set(apiVersions),
+    components,
+    kind,
+    orderNumber: priority ?? 50,
+  }),
+  injectionToken: catalogEntityDetailItemInjectionToken,
+});

src/renderer/components/+catalog/entity-details/token.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { CatalogEntity } from "../../../api/catalog-entity";
+
+export interface CatalogEntityDetailsProps<T extends CatalogEntity> {
+  entity: T;
+}
+
+export type CatalogEntityDetailsComponent<T  extends CatalogEntity> = React.ComponentType<CatalogEntityDetailsProps<T>>;
+
+export interface CatalogEntityDetailComponents<T extends CatalogEntity> {
+  Details: CatalogEntityDetailsComponent<T>;
+}
+
+export interface CatalogEntityDetailRegistration<T extends CatalogEntity> {
+  kind: string;
+  apiVersions: string[];
+  components: CatalogEntityDetailComponents<T>;
+  priority?: number;
+}
+
+export interface CatalogEntityDetailItem {
+  kind: string;
+  apiVersions: Set<string>;
+  components: CatalogEntityDetailComponents<CatalogEntity>;
+  orderNumber: number;
+}
+
+export const catalogEntityDetailItemInjectionToken = getInjectionToken<CatalogEntityDetailItem>({
+  id: "catalog-entity-detail-item-token",
+});

src/renderer/components/+catalog/entity-details/view.tsx

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./view.module.scss";
+import React, { Component } from "react";
+import { observer } from "mobx-react";
+import { Drawer, DrawerItem } from "../../drawer";
+import type { CatalogCategory, CatalogEntity } from "../../../../common/catalog";
+import { Icon } from "../../icon";
+import { CatalogEntityDrawerMenu } from "../catalog-entity-drawer-menu";
+import { cssNames } from "../../../utils";
+import { Avatar } from "../../avatar";
+import type { GetLabelBadges } from "../get-label-badges.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import getLabelBadgesInjectable from "../get-label-badges.injectable";
+import isDevelopmentInjectable from "../../../../common/vars/is-development.injectable";
+import type { IComputedValue } from "mobx";
+import type { CatalogEntityDetailsComponent } from "./token";
+import catalogEntityDetailItemsInjectable from "./detail-items.injectable";
+
+export interface CatalogEntityDetailsProps<Entity extends CatalogEntity> {
+  entity: Entity;
+  hideDetails(): void;
+  onRun: () => void;
+}
+
+interface Dependencies {
+  getLabelBadges: GetLabelBadges;
+  isDevelopment: boolean;
+  detailItems: IComputedValue<CatalogEntityDetailsComponent<CatalogEntity>[]>;
+}
+
+@observer
+class NonInjectedCatalogEntityDetails<Entity extends CatalogEntity> extends Component<CatalogEntityDetailsProps<Entity> & Dependencies> {
+  categoryIcon(category: CatalogCategory) {
+    if (Icon.isSvg(category.metadata.icon)) {
+      return <Icon svg={category.metadata.icon} smallest />;
+    } else {
+      return <Icon material={category.metadata.icon} smallest />;
+    }
+  }
+
+  renderContent(entity: Entity) {
+    const { onRun, hideDetails, getLabelBadges, isDevelopment, detailItems } = this.props;
+    const details = detailItems.get().map((Details, index) => <Details entity={entity} key={index} />);
+
+    return (
+      <>
+        <div className="flex" data-testid={`catalog-entity-details-content-for-${entity.getId()}`}>
+          <div className={styles.entityIcon}>
+            <Avatar
+              title={entity.getName()}
+              colorHash={`${entity.getName()}-${entity.getSource()}`}
+              size={128}
+              src={entity.spec.icon?.src}
+              data-testid="detail-panel-hot-bar-icon"
+              background={entity.spec.icon?.background}
+              onClick={onRun}
+              className={styles.avatar}
+            >
+              {entity.spec.icon?.material && <Icon material={entity.spec.icon?.material}/>}
+            </Avatar>
+            {entity.isEnabled() && (
+              <div className={styles.hint}>
+                Click to open
+              </div>
+            )}
+          </div>
+          <div className={cssNames("box grow", styles.metadata)}>
+            <DrawerItem name="Name">
+              {entity.getName()}
+            </DrawerItem>
+            <DrawerItem name="Kind">
+              {entity.kind}
+            </DrawerItem>
+            <DrawerItem name="Source">
+              {entity.getSource()}
+            </DrawerItem>
+            <DrawerItem name="Status">
+              {entity.status.phase}
+            </DrawerItem>
+            <DrawerItem name="Labels">
+              {getLabelBadges(entity, hideDetails)}
+            </DrawerItem>
+            {isDevelopment && (
+              <DrawerItem name="Id">
+                {entity.getId()}
+              </DrawerItem>
+            )}
+          </div>
+        </div>
+        <div className="box grow">
+          {details}
+        </div>
+      </>
+    );
+  }
+
+  render() {
+    const { entity, hideDetails } = this.props;
+
+    return (
+      <Drawer
+        className={styles.entityDetails}
+        usePortal={true}
+        open={true}
+        title={`${entity.kind}: ${entity.getName()}`}
+        toolbar={<CatalogEntityDrawerMenu entity={entity} key={entity.getId()} />}
+        onClose={hideDetails}
+        data-testid="catalog-entity-details-drawer"
+      >
+        {this.renderContent(entity)}
+      </Drawer>
+    );
+  }
+}
+
+export const CatalogEntityDetails = withInjectables<Dependencies, CatalogEntityDetailsProps<CatalogEntity>>(NonInjectedCatalogEntityDetails, {
+  getProps: (di, props) => ({
+    ...props,
+    getLabelBadges: di.inject(getLabelBadgesInjectable),
+    isDevelopment: di.inject(isDevelopmentInjectable),
+    detailItems: di.inject(catalogEntityDetailItemsInjectable, props.entity),
+  }),
+}) as <Entity extends CatalogEntity>(props: CatalogEntityDetailsProps<Entity>) => React.ReactElement;

src/renderer/components/icon/icon.tsx

@@ -153,6 +153,7 @@ export interface BaseIconProps {
   focusable?: boolean;
   sticker?: boolean;
   disabled?: boolean;
+  "data-testid"?: string;
 }
 
 export interface IconProps extends React.HTMLAttributes<any>, BaseIconProps {}

src/renderer/components/item-object-list/list-layout.tsx

@@ -131,6 +131,7 @@ export type ItemListLayoutProps<Item extends ItemObject, PreLoadStores extends b
   failedToLoadMessage?: React.ReactNode;
 
   filterCallbacks?: ItemsFilters<Item>;
+  "data-testid"?: string;
 } & (
   PreLoadStores extends true
     ? {
@@ -271,11 +272,12 @@ class NonInjectedItemListLayout<I extends ItemObject, PreLoadStores extends bool
   }
 
   render() {
-    const { renderHeaderTitle } = this.props;
+    const { renderHeaderTitle, "data-testid": dataTestId } = this.props;
 
     return untracked(() => (
       <div
         className={cssNames("ItemListLayout flex column", this.props.className)}
+        data-testid={dataTestId}
       >
         <ItemListLayoutHeader
           getItems={() => this.items}

src/renderer/components/layout/cluster-page-menu.ts

@@ -3,10 +3,9 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-// Extensions-api -> Register page menu items
-import type { IconProps } from "../../renderer/components/icon";
+import type { IconProps } from "../icon";
 import type React from "react";
-import type { PageTarget } from "./page-registry";
+import type { PageTarget } from "../../routes/page-registration";
 import type { IComputedValue } from "mobx";
 
 export interface ClusterPageMenuRegistration {

src/renderer/components/menu/menu-actions.tsx

@@ -91,15 +91,22 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
   }
 
   renderTriggerIcon() {
-    if (this.props.toolbar) return null;
-    const { triggerIcon = "more_vert" } = this.props;
-    let className: string;
+    const {
+      triggerIcon = "more_vert",
+      toolbar,
+      "data-testid": dataTestId,
+    } = this.props;
+
+    if (toolbar) {
+      return null;
+    }
 
     if (isValidElement<HTMLElement>(triggerIcon)) {
-      className = cssNames(triggerIcon.props.className, { active: this.isOpen });
+      const className = cssNames(triggerIcon.props.className, { active: this.isOpen });
 
       return React.cloneElement(triggerIcon, { id: this.props.id, className });
     }
+
     const iconProps: IconProps & TooltipDecoratorProps = {
       id: this.props.id,
       interactive: true,
@@ -108,6 +115,10 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
       ...(typeof triggerIcon === "object" ? triggerIcon : {}),
     };
 
+    if (dataTestId) {
+      iconProps["data-testid"] = `icon-for-${dataTestId}`;
+    }
+
     if (iconProps.tooltip && this.isOpen) {
       delete iconProps.tooltip; // don't show tooltip for icon when menu is open
     }

src/renderer/components/menu/menu.tsx

@@ -50,6 +50,7 @@ export interface MenuProps {
   children?: ReactNode;
   animated?: boolean;
   toggleEvent?: "click" | "contextmenu";
+  "data-testid"?: string;
 }
 
 interface State {
@@ -325,10 +326,8 @@ class NonInjectedMenu extends React.Component<MenuProps & Dependencies, State> {
   }
 
   render() {
-    const { position, id, animated } = this.props;
-    let { className, usePortal } = this.props;
-
-    className = cssNames("Menu", className, this.state.position || position, {
+    const { position, id, animated, "data-testid": dataTestId, usePortal, className } = this.props;
+    const classNames = cssNames("Menu", className, this.state.position || position, {
       portal: usePortal,
     });
 
@@ -351,12 +350,13 @@ class NonInjectedMenu extends React.Component<MenuProps & Dependencies, State> {
       <ul
         id={id}
         ref={this.bindRef}
-        className={className}
+        className={classNames}
         style={{
           left: this.state?.menuStyle?.left,
           top: this.state?.menuStyle?.top,
         }}
         onKeyDown={this.onKeyDown}
+        data-testid={dataTestId}
       >
         {menuItems}
       </ul>
@@ -376,11 +376,13 @@ class NonInjectedMenu extends React.Component<MenuProps & Dependencies, State> {
       </MenuContext.Provider>
     );
 
-    if (usePortal === true) usePortal = document.body;
+    if (!usePortal) {
+      return menu;
+    }
 
-    return usePortal instanceof HTMLElement
-      ? createPortal(menu, usePortal)
-      : menu;
+    const portal = usePortal === true ? document.body : usePortal;
+
+    return createPortal(menu, portal);
   }
 }
 

src/renderer/components/test-utils/get-extension-fake.ts

@@ -2,7 +2,7 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import type { Mutable } from "type-fest";
+import type { Writable } from "type-fest";
 import fileSystemProvisionerStoreInjectable from "../../../extensions/extension-loader/file-system-provisioner-store/file-system-provisioner-store.injectable";
 import { lensExtensionDependencies } from "../../../extensions/lens-extension";
 import { LensMainExtension } from "../../../extensions/lens-main-extension";
@@ -15,6 +15,7 @@ import routesInjectable from "../../routes/routes.injectable";
 import catalogEntityRegistryForMainInjectable from "../../../main/catalog/entity-registry.injectable";
 import catalogEntityRegistryForRendererInjectable from "../../api/catalog/entity/registry.injectable";
 import type { DiContainer } from "@ogre-tools/injectable";
+import loggerInjectable from "../../../common/logger.injectable";
 
 export class TestExtensionMain extends LensMainExtension {}
 export class TestExtensionRenderer extends LensRendererExtension {}
@@ -45,12 +46,11 @@ export const getExtensionFakeForMain = (di: DiContainer, id: string, name: strin
 
   Object.assign(instance, options);
 
-  (instance as Mutable<LensMainExtension>)[lensExtensionDependencies] = {
-    fileSystemProvisionerStore: di.inject(
-      fileSystemProvisionerStoreInjectable,
-    ),
+  (instance as Writable<LensMainExtension>)[lensExtensionDependencies] = {
+    fileSystemProvisionerStore: di.inject(fileSystemProvisionerStoreInjectable),
     entityRegistry: di.inject(catalogEntityRegistryForMainInjectable),
     navigate: di.inject(navigateForExtensionInjectable),
+    logger: di.inject(loggerInjectable),
   };
 
   return instance;
@@ -75,13 +75,14 @@ export const getExtensionFakeForRenderer = (di: DiContainer, id: string, name: s
 
   Object.assign(instance, options);
 
-  (instance as Mutable<LensRendererExtension>)[lensExtensionDependencies] = {
+  (instance as Writable<LensRendererExtension>)[lensExtensionDependencies] = {
     categoryRegistry: di.inject(catalogCategoryRegistryInjectable),
     entityRegistry: di.inject(catalogEntityRegistryForRendererInjectable),
     fileSystemProvisionerStore: di.inject(fileSystemProvisionerStoreInjectable),
     getExtensionPageParameters: di.inject(getExtensionPageParametersInjectable),
     navigateToRoute: di.inject(navigateToRouteInjectable),
     routes: di.inject(routesInjectable),
+    logger: di.inject(loggerInjectable),
   };
 
   return instance;

src/renderer/extension-loader/create-extension-instance.injectable.ts

@@ -3,8 +3,9 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import type { Mutable } from "type-fest";
+import type { Writable } from "type-fest";
 import catalogCategoryRegistryInjectable from "../../common/catalog/category-registry.injectable";
+import loggerInjectable from "../../common/logger.injectable";
 import { createExtensionInstanceInjectionToken } from "../../extensions/extension-loader/create-extension-instance.token";
 import fileSystemProvisionerStoreInjectable from "../../extensions/extension-loader/file-system-provisioner-store/file-system-provisioner-store.injectable";
 import { lensExtensionDependencies } from "../../extensions/lens-extension";
@@ -25,12 +26,13 @@ const createExtensionInstanceInjectable = getInjectable({
       getExtensionPageParameters: di.inject(getExtensionPageParametersInjectable),
       navigateToRoute: di.inject(navigateToRouteInjectable),
       routes: di.inject(routesInjectable),
+      logger: di.inject(loggerInjectable),
     };
 
     return (ExtensionClass, extension) => {
       const instance = new ExtensionClass(extension) as LensRendererExtension;
 
-      (instance as Mutable<LensRendererExtension, typeof lensExtensionDependencies>)[lensExtensionDependencies] = deps;
+      (instance as Writable<LensRendererExtension>)[lensExtensionDependencies] = deps;
 
       return instance;
     };

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.injectable.ts

@@ -4,13 +4,13 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { initClusterFrame } from "./init-cluster-frame";
-import extensionLoaderInjectable from "../../../../extensions/extension-loader/extension-loader.injectable";
 import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
 import frameRoutingIdInjectable from "./frame-routing-id/frame-routing-id.injectable";
 import hostedClusterInjectable from "../../../cluster-frame-context/hosted-cluster.injectable";
 import clusterFrameContextInjectable from "../../../cluster-frame-context/cluster-frame-context.injectable";
 import assert from "assert";
 import emitAppEventInjectable from "../../../../common/app-event-bus/emit-event.injectable";
+import loadExtensionsInjectable from "../../load-extensions.injectable";
 
 const initClusterFrameInjectable = getInjectable({
   id: "init-cluster-frame",
@@ -22,7 +22,7 @@ const initClusterFrameInjectable = getInjectable({
 
     return initClusterFrame({
       hostedCluster,
-      loadExtensions: di.inject(extensionLoaderInjectable).loadOnClusterRenderer,
+      loadExtensions: di.inject(loadExtensionsInjectable),
       catalogEntityRegistry: di.inject(catalogEntityRegistryInjectable),
       frameRoutingId: di.inject(frameRoutingIdInjectable),
       emitAppEvent: di.inject(emitAppEventInjectable),

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -5,9 +5,7 @@
 import type { Cluster } from "../../../../common/cluster/cluster";
 import type { CatalogEntityRegistry } from "../../../api/catalog/entity/registry";
 import logger from "../../../../main/logger";
-import type { KubernetesCluster } from "../../../../common/catalog-entities";
 import { Notifications } from "../../../components/notifications";
-import type { CatalogEntity } from "../../../../common/catalog";
 import { when } from "mobx";
 import type { ClusterFrameContext } from "../../../cluster-frame-context/cluster-frame-context";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
@@ -16,7 +14,7 @@ import type { EmitAppEvent } from "../../../../common/app-event-bus/emit-event.i
 
 interface Dependencies {
   hostedCluster: Cluster;
-  loadExtensions: (getCluster: () => CatalogEntity) => void;
+  loadExtensions: () => void;
   catalogEntityRegistry: CatalogEntityRegistry;
   frameRoutingId: number;
   emitAppEvent: EmitAppEvent;
@@ -53,7 +51,7 @@ export const initClusterFrame = ({
     when(
       () => catalogEntityRegistry.items.get().length > 0,
       () =>
-        loadExtensions(() => catalogEntityRegistry.activeEntity as KubernetesCluster),
+        loadExtensions(),
       {
         timeout: 15_000,
         onError: (error) => {

src/renderer/frames/load-extensions.injectable.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import extensionLoaderInjectable from "../../extensions/extension-loader/extension-loader.injectable";
+
+const loadExtensionsInjectable = getInjectable({
+  id: "load-extensions",
+  instantiate: (di) => {
+    const extensionLoader = di.inject(extensionLoaderInjectable);
+
+    return () => extensionLoader.autoInitExtensions();
+  },
+});
+
+export default loadExtensionsInjectable;

src/renderer/frames/root-frame/init-root-frame/init-root-frame.injectable.ts

@@ -4,17 +4,17 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { initRootFrame } from "./init-root-frame";
-import extensionLoaderInjectable from "../../../../extensions/extension-loader/extension-loader.injectable";
 import ipcRendererInjectable from "../../../utils/channel/ipc-renderer.injectable";
 import bindProtocolAddRouteHandlersInjectable from "../../../protocol-handler/bind-protocol-add-route-handlers/bind-protocol-add-route-handlers.injectable";
 import lensProtocolRouterRendererInjectable from "../../../protocol-handler/lens-protocol-router-renderer/lens-protocol-router-renderer.injectable";
 import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
 import registerIpcListenersInjectable from "../../../ipc/register-ipc-listeners.injectable";
+import loadExtensionsInjectable from "../../load-extensions.injectable";
 
 const initRootFrameInjectable = getInjectable({
   id: "init-root-frame",
   instantiate: (di) => initRootFrame({
-    loadExtensions: di.inject(extensionLoaderInjectable).loadOnClusterManagerRenderer,
+    loadExtensions: di.inject(loadExtensionsInjectable),
     registerIpcListeners: di.inject(registerIpcListenersInjectable),
     ipcRenderer: di.inject(ipcRendererInjectable),
     bindProtocolAddRouteHandlers: di.inject(bindProtocolAddRouteHandlersInjectable),

src/renderer/getDiForUnitTesting.tsx

@@ -145,13 +145,19 @@ export const getDiForUnitTesting = (
       callForPublicHelmRepositoriesInjectable,
     ]);
 
-    // eslint-disable-next-line unused-imports/no-unused-vars-ts
-    di.override(extensionsStoreInjectable, () => ({ isEnabled: ({ id, isBundled }) => false }) as ExtensionsStore);
+    di.override(extensionsStoreInjectable, () => ({
+      isEnabled: () => false,
+    }) as Partial<ExtensionsStore> as ExtensionsStore);
 
     di.override(hotbarStoreInjectable, () => ({
-      getActive: () => ({ name: "some-hotbar", items: [] }),
+      getActive: () => ({
+        name: "some-hotbar",
+        items: [null, null, null, null, null, null, null, null, null, null, null, null],
+        id: "some-hotbar",
+      }),
       getDisplayIndex: () => "0",
-    }) as unknown as HotbarStore);
+      isAddedToActive: () => false,
+    }) as Partial<HotbarStore> as HotbarStore);
 
     di.override(fileSystemProvisionerStoreInjectable, () => ({}) as FileSystemProvisionerStore);
 

src/renderer/initializers/catalog-entity-detail-registry.tsx

@@ -1,52 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import React from "react";
-import { KubernetesCluster, WebLink } from "../../common/catalog-entities";
-import type { CatalogEntityDetailsProps } from "../../extensions/registries";
-import { CatalogEntityDetailRegistry } from "../../extensions/registries";
-import { DrawerItem, DrawerTitle } from "../components/drawer";
-
-export function initCatalogEntityDetailRegistry() {
-  CatalogEntityDetailRegistry.getInstance()
-    .add([
-      {
-        apiVersions: [KubernetesCluster.apiVersion],
-        kind: KubernetesCluster.kind,
-        components: {
-          Details: ({ entity }: CatalogEntityDetailsProps<KubernetesCluster>) => (
-            <>
-              <DrawerTitle>Kubernetes Information</DrawerTitle>
-              <div className="box grow EntityMetadata">
-                <DrawerItem name="Distribution">
-                  {entity.metadata.distro || "unknown"}
-                </DrawerItem>
-                <DrawerItem name="Kubelet Version">
-                  {entity.metadata.kubeVersion || "unknown"}
-                </DrawerItem>
-              </div>
-            </>
-          ),
-        },
-      },
-    ]);
-  CatalogEntityDetailRegistry.getInstance()
-    .add([
-      {
-        apiVersions: [WebLink.apiVersion],
-        kind: WebLink.kind,
-        components: {
-          Details: ({ entity }: CatalogEntityDetailsProps<WebLink>) => (
-            <>
-              <DrawerTitle>More Information</DrawerTitle>
-              <DrawerItem name="URL">
-                {entity.spec.url}
-              </DrawerItem>
-            </>
-          ),
-        },
-      },
-    ]);
-}

src/renderer/initializers/index.ts

@@ -3,8 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export * from "./catalog-entity-detail-registry";
 export * from "./catalog";
 export * from "./ipc";
-export * from "./registries";
 export * from "./catalog-category-registry";

src/renderer/initializers/registries.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import * as registries from "../../extensions/registries";
-
-export function initRegistries() {
-  registries.CatalogEntityDetailRegistry.createInstance();
-}

src/renderer/routes/extension-page-parameters.injectable.ts

@@ -6,10 +6,10 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { pipeline } from "@ogre-tools/fp";
 import type { PageParamInit } from "../navigation";
 import type { LensRendererExtension } from "../../extensions/lens-renderer-extension";
-import type { PageRegistration } from "../../extensions/registries";
 import { map } from "lodash/fp";
 import createPageParamInjectable from "../navigation/create-page-param.injectable";
 import { object } from "../utils";
+import type { PageRegistration } from "./page-registration";
 
 export interface ExtensionPageParametersInstantiationParam {
   extension: LensRendererExtension;

src/renderer/routes/extension-route-registrator.injectable.tsx

@@ -9,7 +9,6 @@ import type { LensRendererExtension } from "../../extensions/lens-renderer-exten
 import { observer } from "mobx-react";
 import React from "react";
 import { isEmpty, matches } from "lodash/fp";
-import type { PageRegistration } from "../../extensions/registries";
 import { extensionRegistratorInjectionToken } from "../../extensions/extension-loader/extension-registrator-injection-token";
 import { SiblingsInTabLayout } from "../components/layout/siblings-in-tab-layout";
 import extensionPageParametersInjectable from "./extension-page-parameters.injectable";
@@ -19,6 +18,7 @@ import { computed } from "mobx";
 import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token";
 import { getExtensionRoutePath } from "./for-extension";
 import extensionShouldBeEnabledForClusterFrameInjectable from "../extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
+import type { PageRegistration } from "./page-registration";
 
 const extensionRouteRegistratorInjectable = getInjectable({
   id: "extension-route-registrator",

src/renderer/routes/page-registration.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import type { IComputedValue } from "mobx";
-import type { PageParamInit, PageParam } from "../../renderer/navigation";
+import type { PageParamInit, PageParam } from "../navigation";
 
 // Extensions-api -> Custom page registration