feat: add maximize/minimize button to the header

Author: theboxer

_build/js/src/ui/dom/button.ts

@@ -7,7 +7,7 @@ export type Button = HTMLButtonElement & {
 
 export const button = (
   content: string | HTMLElement | Element | (HTMLElement | Element | string)[],
-  onClick: () => Promise<void> | void,
+  onClick: (e: MouseEvent) => Promise<void> | void,
   styleObj?: string,
   btnProps?: Partial<HTMLButtonElement>,
 ) => {

_build/js/src/ui/icons/index.ts

@@ -35,3 +35,7 @@ export const bot = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="2
 export const sparkles = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>`;
 
 export const textSelect = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-select"><path d="M14 21h1"></path><path d="M14 3h1"></path><path d="M19 3a2 2 0 0 1 2 2"></path><path d="M21 14v1"></path><path d="M21 19a2 2 0 0 1-2 2"></path><path d="M21 9v1"></path><path d="M3 14v1"></path><path d="M3 9v1"></path><path d="M5 21a2 2 0 0 1-2-2"></path><path d="M5 3a2 2 0 0 0-2 2"></path><path d="M7 12h10"></path><path d="M7 16h6"></path><path d="M7 8h8"></path><path d="M9 21h1"></path><path d="M9 3h1"></path></svg>`;
+
+export const expand = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg>`;
+
+export const minimize = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize-2"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" x2="21" y1="10" y2="3"></line><line x1="3" x2="10" y1="21" y2="14"></line></svg>`;

_build/js/src/ui/localChat/modalHeader.ts

@@ -5,21 +5,73 @@ import { drag, endDrag, initDrag } from './dragHandlers';
 import { globalState } from '../../globalState';
 import { lng } from '../../lng';
 import { icon } from '../dom/icon';
-import { x } from '../icons';
+import { expand, minimize, x } from '../icons';
+
+const centerModal = (element: HTMLElement) => {
+  const modalWidth = element.offsetWidth;
+  const modalHeight = element.offsetHeight;
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  const newLeft = viewportWidth / 2 - modalWidth / 2;
+  const newTop = viewportHeight / 2 - modalHeight / 2;
+
+  element.style.left = `${newLeft}px`;
+  element.style.top = `${newTop}px`;
+};
 
 export const buildModalHeader = () => {
   const closeModalBtn = button(
     icon(24, x),
     () => {
       closeModal();
     },
-    'closeBtn',
+    '',
     { ariaLabel: lng('modai.ui.close_dialog') },
   );
 
+  const buttonsWrapper = createElement('div', 'buttonsWrapper', [
+    button(
+      icon(24, expand),
+      (e) => {
+        const self = e.currentTarget as HTMLButtonElement;
+
+        if (globalState.modal.modal.style.width === '90%') {
+          globalState.modal.modal.style.width = '';
+          globalState.modal.modal.style.height = '';
+
+          self.ariaLabel = lng('modai.ui.maximize_dialog');
+          self.innerHTML = '';
+          self.appendChild(icon(24, expand));
+
+          centerModal(globalState.modal.modal);
+          return;
+        }
+
+        globalState.modal.modal.style.width = '90%';
+        globalState.modal.modal.style.height = '90%';
+
+        self.ariaLabel = lng('modai.ui.minimize_dialog');
+        self.innerHTML = '';
+        self.appendChild(icon(24, minimize));
+
+        centerModal(globalState.modal.modal);
+      },
+      '',
+      {
+        ariaLabel:
+          globalState.modal.modal.style.width === '90%'
+            ? lng('modai.ui.minimize_dialog')
+            : lng('modai.ui.maximize_dialog'),
+      },
+    ),
+    closeModalBtn,
+  ]);
+
   const header = createElement('header', 'header', [
     createElement('h1', '', lng('modai.ui.modai_assistant')),
-    closeModalBtn,
+    buttonsWrapper,
   ]);
 
   header.addEventListener('mousedown', (e) => {

assets/components/modai/css/modai.css

@@ -119,25 +119,31 @@
             padding-left: var(--spacing-sm);
         }
 
-        .closeBtn {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: var(--spacing-sm);
+        .buttonsWrapper {
             display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            transition: background-color var(--transition-speed);
+            justify-items: center;
 
-            &:hover, &:focus {
-                background-color: var(--border-light);
-            }
+            button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: var(--spacing-sm);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                transition: background-color var(--transition-speed);
 
-            &:focus {
-                outline: 2px solid var(--primary);
-                outline-offset: 2px;
+                &:hover, &:focus {
+                    background-color: var(--border-light);
+                }
+
+                &:focus {
+                    outline: 2px solid var(--primary);
+                    outline-offset: 2px;
+                }
             }
+
         }
     }