Add dual button applet.

assets/applet.js

@@ -24,6 +24,36 @@ class applet_animations {
             target.style.right = -target.offsetWidth + "px";
         }
     }
+
+    static hide_opacity_generator(time) {
+        return (state, target) => {
+            if (state) {
+                target.style.display = "";
+
+                setTimeout(() => {
+                    target.style.opacity = "1";
+                }, time);
+            } else {
+                target.style.opacity = "0";
+
+                setTimeout(() => {
+                    target.style.display = "none";
+                }, time);
+            }
+        };
+    }
+
+    static hide_opacity(state, target) {
+        if (state) {
+            target.style.display = "";
+
+            setTimeout(() => { target.style.opacity = "1"; }, 1);
+        } else {
+            target.style.opacity = "0";
+
+            setTimeout(() => { target.style.display = "none"; }, 500);
+        }
+    }
 }
 
 class applet_builder {
@@ -103,6 +133,15 @@ class applet_builder {
         );
     }
 
+    #build_dualbutton() {
+        return new dualbutton_applet(
+            this.#target,
+            this.#maximalise,
+            this.#minimalise,
+            this.#animation
+        );
+    }
+
     build() {
         if (!this.is_valid) {
             throw "Builder is not valid yes.";
@@ -111,6 +150,8 @@ class applet_builder {
         if (this.#is_swapable) {
             return this.#build_swapable();
         }
+
+        return this.#build_dualbutton();
     }
 }
 
@@ -178,4 +219,47 @@ class swapable_applet extends applet {
     }
 }
 
+class dualbutton_applet extends applet {
+    #open;
+    #close;
+
+    constructor(target, open, close, animation) {
+        super();
+
+        if (!dom_manager.is_element(target)) {
+            throw "Target must be an HTML element.";
+        }
+
+        if (!dom_manager.is_element(close)) {
+            throw "Closer must be an HTML element.";
+        }
+
+        if (!dom_manager.is_element(open)) {
+            throw "Opener must be an HTML element.";
+        }
+
+        if (!type_manager.is_function(animation)) {
+            throw "Animation must be an function.";
+        }
+
+        this.#open = open;
+        this.#close = close;
+        this._animation = animation;
+        this._target = target;
+        this._state = false;
+        this.hide();
+        this.#listen();
+    }
+
+    #listen() {
+        this.#open.addEventListener("click", () => {
+            this.show();
+        });
+
+        this.#close.addEventListener("click", () => {
+            this.hide();
+        });
+    }
+}
+
 export { applet_builder, applet_animations };

assets/core.js

@@ -22,4 +22,23 @@ document.addEventListener("DOMContentLoaded", () => {
     elements_panel_builder.animation = applet_animations.hide_right;
 
     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();
 });

theme/submission_container.css

@@ -23,6 +23,7 @@
     max-height: 400px;
     width: 90%;
     height: 90%;
+    transition: opacity 0.5s;
 }
 
 .submission-container .submission-description .control-button button {