Merge pull request #99 from Flow-Works/98-add-window-resizing

[💄] Added window resizing

src/assets/style.less

@@ -104,6 +104,11 @@ window-area {
   margin: 10px;
 
   window {
+    resize: both;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 35px;
+    min-width: calc(35px * 6);
     background: var(--base);
     display: flex;
     flex-direction: column;
@@ -112,7 +117,7 @@ window-area {
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: var(--crust);
-    transition: 0.2s opacity, 0.2s width, 0.2s height;
+    transition: 0.2s opacity, 0.2s transform;
 
     window-header {
       height: 35px;
@@ -120,6 +125,7 @@ window-area {
       display: flex;
       align-items: center;
       gap: 7.5px;
+      user-select: none;
 
       img {
         aspect-ratio: 1 / 1;

src/structures/FlowWindow.ts

@@ -106,6 +106,8 @@ class FlowWindow {
 
     if (config.canResize === undefined || config.canResize === null) config.canResize = true
 
+    if (!config.canResize) this.element.style.resize = 'none'
+
     this.element.style.width = `${config.width ?? 300}px`
     this.element.style.height = `${config.height ?? 200}px`
 
@@ -174,9 +176,11 @@ class FlowWindow {
     if (this.isMinimized) {
       this.element.style.pointerEvents = 'all'
       this.element.style.opacity = '1'
+      this.element.style.transform = 'translateY(0)'
     } else {
       this.element.style.pointerEvents = 'none'
       this.element.style.opacity = '0'
+      this.element.style.transform = 'translateY(10px)'
     }
 
     this.isMinimized = !this.isMinimized
@@ -228,9 +232,14 @@ class FlowWindow {
    * Closes the window.
    */
   close (): void {
-    this.element.remove()
+    this.element.style.pointerEvents = 'none'
+    this.element.style.opacity = '0'
+    this.element.style.transform = 'translateY(10px)'
     const event = new CustomEvent('app_closed', { detail: { win: this } })
     window.dispatchEvent(event)
+    setTimeout(() => {
+      this.element.remove()
+    }, 200)
   }
 
   /**