Sidebar tab API for extensions (#215)

* Add extensionManager to manage tabs

* Fix null bug

* nit

src/scripts/app.ts

@@ -35,6 +35,7 @@ import { StorageLocation } from "@/types/settingTypes";
 // CSS imports. style.css must be imported later as it overwrites some litegraph styles.
 import "@comfyorg/litegraph/css/litegraph.css";
 import "../assets/css/style.css";
+import { ExtensionManager } from "@/types/extensionTypes";
 
 export const ANIM_PREVIEW_WIDGET = "$$comfy_animation_preview";
 
@@ -90,6 +91,7 @@ export class ComfyApp {
   ui: ComfyUI;
   logging: ComfyLogging;
   extensions: ComfyExtension[];
+  extensionManager: ExtensionManager;
   _nodeOutputs: Record<string, any>;
   nodePreviewImages: Record<string, typeof Image>;
   shiftDown: boolean;

src/scripts/extensionManager.ts

@@ -0,0 +1,43 @@
+import { useWorkspaceStore } from "@/stores/workspaceStateStore";
+import { ExtensionManager, SidebarTabExtension } from "@/types/extensionTypes";
+
+export class ExtensionManagerImpl implements ExtensionManager {
+  private sidebarTabs: SidebarTabExtension[] = [];
+  private workspaceStore = useWorkspaceStore();
+
+  registerSidebarTab(tab: SidebarTabExtension) {
+    this.sidebarTabs.push(tab);
+    this.updateSidebarOrder();
+  }
+
+  unregisterSidebarTab(id: string) {
+    const index = this.sidebarTabs.findIndex((tab) => tab.id === id);
+    if (index !== -1) {
+      const tab = this.sidebarTabs[index];
+      if (tab.type === "custom" && tab.destroy) {
+        tab.destroy();
+      }
+      this.sidebarTabs.splice(index, 1);
+      this.updateSidebarOrder();
+    }
+  }
+
+  getSidebarTabs() {
+    return this.sidebarTabs.sort((a, b) => {
+      const orderA = this.workspaceStore.sidebarTabsOrder.indexOf(a.id);
+      const orderB = this.workspaceStore.sidebarTabsOrder.indexOf(b.id);
+      return orderA - orderB;
+    });
+  }
+
+  private updateSidebarOrder() {
+    const currentOrder = this.workspaceStore.sidebarTabsOrder;
+    const newTabs = this.sidebarTabs.filter(
+      (tab) => !currentOrder.includes(tab.id)
+    );
+    this.workspaceStore.updateSidebarOrder([
+      ...currentOrder,
+      ...newTabs.map((tab) => tab.id),
+    ]);
+  }
+}