Start working on app container and app parts store.

assets/app.js

@@ -0,0 +1,12 @@
+import { applet_animations, applet_builder } from "./applet.js";
+import { app_parts } from "./app_parts.js";
+
+class app {
+    #current_submission;
+    
+    constructor() {
+        
+    }
+}
+
+export { app };

assets/app_parts.js

@@ -0,0 +1,91 @@
+import { applet_animations, applet_builder } from "./applet.js";
+import { dom_manager } from "./functions.js";
+import { dictionary } from "./dictionary.js";
+
+class submission_part {
+    #header;
+    #image;
+    #description;
+    #applet;
+    #applet_close;
+    #target;
+
+    constructor(
+        header_selector,
+        image_selector,
+        description_selector,
+        close_selector
+    ) {
+        this.#header = document.querySelector(header_selector);
+        this.#image = document.querySelector(image_selector);
+        this.#description = document.querySelector(description_selector);
+        this.#applet_close = this.#description.querySelector(close_selector);
+
+        if (!dom_manager.is_element(this.#header)) {
+            throw "Could not found header by selector.";
+        }
+
+        if (!dom_manager.is_element(this.#image)) {
+            throw "Could not found image by selector.";
+        }
+
+        if (!dom_manager.is_element(this.#description)) {
+            throw "Could not found description by selector.";
+        }
+        
+
+        if (!dom_manager.is_element(this.#applet_close)) {
+            throw "Could not found close button by selector.";
+        }
+
+        this.#applet = this.#applet_builder(this.#applet_close);
+        this.current = null;
+    }
+
+    #applet_builder(close) {
+        const builder = new applet_builder();
+        
+        builder.minimalise = close;
+        builder.maximalise = this.#header;
+        builder.target = this.#description;
+        builder.animation = applet_animations.hide_opacity_generator(500);
+
+        return builder.build();
+    }
+
+    #welcome() {
+        this.#header.innerText = dictionary.welcome.title;
+
+        const title = document.createElement("h1");
+        title.innerText = dictionary.welcome.title;
+
+        const description = document.createElement("p");
+        description.innerText = dictionary.welcome.description;
+
+        this.#clean_description();
+        this.#description.appendChild(title);
+        this.#description.appendChild(description);
+    }
+
+    #clean_description() {
+        this.#description.childNodes.forEach(node => {
+            if (node !== this.#applet_close) {
+                node.remove();
+            }
+        });
+    }
+
+    set current(target) {
+        if (target === null) {
+            this.#welcome();
+        }
+
+        this.#target = target;
+    }
+
+    get current() {
+        return this.#target;
+    }
+}
+
+export { submission_part };

assets/core.js

@@ -1,4 +1,5 @@
 import { applet_builder, applet_animations } from "./applet.js";
+import { submission_part } from "./app_parts.js";
 
 document.addEventListener("DOMContentLoaded", () => {
     const submissions_panel = document.querySelector(".left-bar");  
@@ -23,22 +24,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const elements_applet = elements_panel_builder.build();
 
-    const submission_description 
-    = document.querySelector(".submission-description");
-
-    const submission_description_open 
-    = document.querySelector(".submission-name-bar");
-
-    const submission_description_close
-    = submission_description.querySelector(".close-it");
-
-    const submission_description_builder = new applet_builder();
-    submission_description_builder.minimalise = submission_description_close;
-    submission_description_builder.maximalise = submission_description_open;
-    submission_description_builder.target = submission_description;
-    submission_description_builder.animation 
-    = applet_animations.hide_opacity_generator(500);
-    
-    const submission_description_applet
-    = submission_description_builder.build();
+    const submission_in_app = new submission_part(
+        ".submission-name-bar",
+        ".submission-description",
+        ".submission-description",
+        ".close-it"
+    );
 });

assets/dictionary.js

@@ -0,0 +1,8 @@
+const dictionary = {
+    welcome: {
+        title: "Hello in cx-doxy.",
+        description: "This is sample cx-doxy description. You can change it in the assets/dictionary.js. This would be displayed, when user get into app, and does not select any submission yes. The best practise is insert there information about project which is documented by the app."
+    }
+};
+
+export { dictionary };

core.html

@@ -120,9 +120,8 @@
 
             <div class="submission-container">
                 <div class="submission-description">
-                    <p class="title">Sample submission description</p>
-                    <p class="description">This is simple project description, it only would tell You what it is, or what it could be.</p>
-                   
+                    <div class="content"></div>
+
                     <div class="control-button">
                         <button
                             name="close-it"