Script UI panel (.jsx) for after effects, Code works perfect but its not dockable

I do video editing so I have very less knowledge of coding. but I recently got help from ChatGPT to get help for a script I can use in after effects (editing software). ChatGPT gave me a good code, but sadly its not dockable, i tried too much to fix it. but it doesn't work.

The code works perfectly for functions etc, but i cant dock it in my interface.

In attachment: I created all those layers with those buttons, and if you see to the left side there is a dockable ui panel "3 button test" Its the same script. but the panel is outside of it. can we dock it?

=============================================================

    // Function to create an adjustment layer
function createAdjustmentLayer() {
  var comp = app.project.activeItem; // Get the active composition
  if (comp && comp instanceof CompItem) {
    var adjustmentLayer = comp.layers.addSolid([1, 1, 1], "Adjustment Layer", comp.width, comp.height, 1);
    adjustmentLayer.adjustmentLayer = true;
  } else {
    alert("Please open or select a composition.");
  }
}

// Function to create a null layer
function createNullLayer() {
  var comp = app.project.activeItem; // Get the active composition
  if (comp && comp instanceof CompItem) {
    comp.layers.addNull();
  } else {
    alert("Please open or select a composition.");
  }
}

// Function to create a solid layer
function createSolidLayer() {
  var comp = app.project.activeItem; // Get the active composition
  if (comp && comp instanceof CompItem) {
    var solidLayer = comp.layers.addSolid([90, 31, 37], "Solid Layer", comp.width, comp.height, 1);
  } else {
    alert("Please open or select a composition.");
  }
}

// Create a dockable UI panel
var myPanel = new Window("palette", "LAYER CREATOR SIMPLE", undefined, { resizeable: true });
myPanel.orientation = "column";

var createAdjustmentButton = myPanel.add("button", undefined, "Adjustment Layer");
createAdjustmentButton.onClick = createAdjustmentLayer;

var createNullButton = myPanel.add("button", undefined, "Null Layer");
createNullButton.onClick = createNullLayer;

var createSolidButton = myPanel.add("button", undefined, "Solid Layer");
createSolidButton.onClick = createSolidLayer;

// Show the panel
myPanel.center();
myPanel.show();

============================================================= I really need help with this!

I tried fixing these codes but until now nothing worked, if i change anything. the content of the script go missing. thats why i need help with this solution!

You need to wrap everything in a function that accepts the panel as a parameter and inside it you need to create a function that will build the layout, in this case the function buildUI(thisObj){...} the code will look something like this:

(function MyLayerCreator(thisObj) {
    //...
    function buildUI(thisObj) {
        var myPanel = (thisObj instanceof Panel) ? thisObj : new Window('palette', "LAYER CREATOR SIMPLE");

        //Your ui layout (all the the other elements like buttons, etc...)

        myPanel.layout.layout(true);
        return myPanel
    }

    //Call The buildUI function
    var window = buildUI(thisObj);
    if (window.toString() == "[object Panel]") {
        window;
    } else {
        window.show();
    }
    
    //All your other functions
})(this);

This:

var myPanel = (thisObj instanceof Panel)? thisObj : new Window('palette', "LAYER CREATOR SIMPLE");

will check if the object is an instance of the uiPanel so when you run it from the After effects it will use the dockable UI panel it otherwise will create a new window.

Your code will be:

(function LayerCreator(thisObj) {
    // Create a dockable UI panel
    function buildUI(thisObj) {

        var myPanel = (thisObj instanceof Panel)? thisObj : new Window('palette', "LAYER CREATOR SIMPLE");
        
        myPanel.orientation = "column";

        var createAdjustmentButton = myPanel.add("button", undefined, "Adjustment Layer");
        createAdjustmentButton.onClick = createAdjustmentLayer;

        var createNullButton = myPanel.add("button", undefined, "Null Layer");
        createNullButton.onClick = createNullLayer;

        var createSolidButton = myPanel.add("button", undefined, "Solid Layer");
        createSolidButton.onClick = createSolidLayer;
        
        myPanel.layout.layout(true);
        return myPanel
    }

    var w = buildUI(thisObj);
    if (w.toString() == "[object Panel]") {
        w;
    } else {
        w.show();
    }
    // Function to create an adjustment layer
    function createAdjustmentLayer() {
        var comp = app.project.activeItem; // Get the active composition
        if (comp && comp instanceof CompItem) {
            var adjustmentLayer = comp.layers.addSolid([1, 1, 1], "Adjustment Layer", comp.width, comp.height, 1);
            adjustmentLayer.adjustmentLayer = true;
        } else {
            alert("Please open or select a composition.");
        }
    }

    // Function to create a null layer
    function createNullLayer() {
        var comp = app.project.activeItem; // Get the active composition
        if (comp && comp instanceof CompItem) {
            comp.layers.addNull();
        } else {
            alert("Please open or select a composition.");
        }
    }

    // Function to create a solid layer
    function createSolidLayer() {
        var comp = app.project.activeItem; // Get the active composition
        if (comp && comp instanceof CompItem) {
            var solidLayer = comp.layers.addSolid([90, 31, 37], "Solid Layer", comp.width, comp.height, 1);
        } else {
            alert("Please open or select a composition.");
        }
    }
})(this);