lexgui 0.5.3 → 0.5.4

package/build/utilities.css

@@ -11,14 +11,33 @@
 .bg-error { background-color: var(--global-color-error) !important }
 .bg-none { background: none !important }
 
+.hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
+.hover\:bg-secondary:hover { background-color: var(--global-color-secondary) !important }
+.hover\:bg-tertiary:hover { background-color: var(--global-color-tertiary) !important }
+.hover\:bg-quaternary:hover { background-color: var(--global-color-quaternary) !important }
+.hover\:bg-accent:hover { background-color: var(--global-color-accent) !important }
+.hover\:bg-contrast:hover { background-color: var(--global-text-primary) !important }
+.hover\:bg-warning:hover { background-color: var(--global-color-warning) !important }
+.hover\:bg-error:hover { background-color: var(--global-color-error) !important }
+.hover\:bg-none:hover { background: none !important }
+
 .fg-primary { color: var(--global-text-primary) !important }
 .fg-secondary { color: var(--global-text-secondary) !important }
 .fg-tertiary { color: var(--global-text-tertiary) !important }
 .fg-quaternary { color: var(--global-text-quaternary) !important }
-.fg-accent { color: var(--global-text-accent) !important }
-.fg-contrast { color: var(--global-text-primary) !important }
-.fg-warning { color: var(--global-text-warning) !important }
-.fg-error { color: var(--global-text-error) !important }
+.fg-accent { color: var(--global-color-accent) !important }
+.fg-contrast { color: var(--global-color-primary) !important }
+.fg-warning { color: var(--global-color-warning) !important }
+.fg-error { color: var(--global-color-error) !important }
+
+.hover\:fg-primary:hover { color: var(--global-text-primary) !important }
+.hover\:fg-secondary:hover { color: var(--global-text-secondary) !important }
+.hover\:fg-tertiary:hover { color: var(--global-text-tertiary) !important }
+.hover\:fg-quaternary:hover { color: var(--global-text-quaternary) !important }
+.hover\:fg-accent:hover { color: var(--global-color-accent) !important }
+.hover\:fg-contrast:hover { color: var(--global-color-primary) !important }
+.hover\:fg-warning:hover { color: var(--global-color-warning) !important }
+.hover\:fg-error:hover { color: var(--global-color-error) !important }
 
 /* Layout */
 
@@ -29,13 +48,32 @@
 .inline-block { display: inline-block }
 .hidden { display: none !important }
 
+.overflow-auto { overflow: auto }
+.overflow-scroll { overflow: scroll }
+.overflow-hidden { overflow: hidden }
+.overflow-x-auto { overflow-x: auto }
+.overflow-y-auto { overflow-y: auto }
+.overflow-x-hidden { overflow-x: hidden }
+
+.truncate { overflow: hidden; text-overflow: ellipsis }
+.truncate, .whitespace-nowrap { white-space: nowrap }
+.whitespace-pre-wrap { white-space: pre-wrap }
+.whitespace-break-spaces { white-space: break-spaces }
+
+.text-balance { text-wrap: balance }
+.break-words { overflow-wrap: break-word }
+
+.line-clamp-1, .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
+.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1 }
+.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2 }
+
 .flex-col { flex-direction: column }
 .flex-row { flex-direction: row }
 .flex-wrap { flex-wrap: wrap }
 
-.items-center { align-items: center }
-.items-start { align-items: flex-start }
-.items-end { align-items: flex-end }
+.items-start { place-items: start }
+.items-center { place-items: center }
+.items-end { place-items: end }
 
 .justify-start { justify-content: start }
 .justify-center { justify-content: center }
@@ -43,8 +81,12 @@
 .justify-between { justify-content: space-between }
 .justify-around { justify-content: space-around }
 
-.self-center { align-self: center }
+.self-start { place-self: start }
+.self-center { place-self: center }
+.self-end { place-self: end }
 
+.gap-0 { gap: 0 }
+.gap-0\.5 { gap: 0.125rem }
 .gap-1 { gap: 0.25rem }
 .gap-2 { gap: 0.5rem }
 .gap-3 { gap: 0.75rem }
@@ -71,10 +113,45 @@
 .m-7 { margin: 1.75rem }
 .m-8 { margin: 2rem }
 
+.mt-0 { margin-top: 0 }
+.mt-1 { margin-top: 0.25rem }
 .mt-2 { margin-top: 0.5rem }
+.mt-3 { margin-top: 0.75rem }
+.mt-4 { margin-top: 1rem }
+.mt-5 { margin-top: 1.25rem }
+.mt-6 { margin-top: 1.5rem }
+.mt-7 { margin-top: 1.75rem }
+.mt-8 { margin-top: 2rem }
+
+.mb-0 { margin-bottom: 0 }
+.mb-1 { margin-bottom: 0.25rem }
 .mb-2 { margin-bottom: 0.5rem }
+.mb-3 { margin-bottom: 0.75rem }
+.mb-4 { margin-bottom: 1rem }
+.mb-5 { margin-bottom: 1.25rem }
+.mb-6 { margin-bottom: 1.5rem }
+.mb-7 { margin-bottom: 1.75rem }
+.mb-8 { margin-bottom: 2rem }
+
+.ml-0 { margin-left: 0 }
+.ml-1 { margin-left: 0.25rem }
 .ml-2 { margin-left: 0.5rem }
+.ml-3 { margin-left: 0.75rem }
+.ml-4 { margin-left: 1rem }
+.ml-5 { margin-left: 1.25rem }
+.ml-6 { margin-left: 1.5rem }
+.ml-7 { margin-left: 1.75rem }
+.ml-8 { margin-left: 2rem }
+
+.mr-0 { margin-right: 0 }
+.mr-1 { margin-right: 0.25rem }
 .mr-2 { margin-right: 0.5rem }
+.mr-3 { margin-right: 0.75rem }
+.mr-4 { margin-right: 1rem }
+.mr-5 { margin-right: 1.25rem }
+.mr-6 { margin-right: 1.5rem }
+.mr-7 { margin-right: 1.75rem }
+.mr-8 { margin-right: 2rem }
 
 .p-0 { padding: 0 }
 .p-1 { padding: 0.25rem }
@@ -135,6 +212,8 @@
 .px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
 .px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
 .px-8 { padding-left: 2rem; padding-right: 2rem }
+.px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
+.px-12 { padding-left: 3rem; padding-right: 3rem }
 
 .py-0 { padding-top: 0; padding-bottom: 0 }
 .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
@@ -145,9 +224,18 @@
 .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
 .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
 .py-8 { padding-top: 2rem; padding-bottom: 2rem }
+.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
+.py-12 { padding-top: 3rem; padding-bottom: 3rem }
 
 /* Typography */
 
+.text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+.text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+.text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+.text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+.text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.6rem }
+
 .font-light { font-weight: 300 }
 .font-normal { font-weight: 400 }
 .font-medium { font-weight: 500 }
@@ -188,8 +276,19 @@
 /* Borders / Radius / Shadow */
 
 .border { border: 1px solid var(--global-color-tertiary) }
+
+.border-top { border-top: 1px solid var(--global-color-tertiary) }
+.border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
+.border-left { border-left: 1px solid var(--global-color-tertiary) }
+.border-right { border-right: 1px solid var(--global-color-tertiary) }
+
 .border-2 { border-width: 2px }
 
+.border-t-0 { border-top-width: 0 }
+.border-b-0 { border-bottom-width: 0 }
+.border-l-0 { border-left-width: 0 }
+.border-r-0 { border-right-width: 0 }
+
 .rounded-none { border-radius: 0 }
 .rounded { border-radius: 0.25rem }
 .rounded-lg { border-radius: 0.5rem }

package/changelog.md

@@ -2,7 +2,22 @@
 
 ## dev
 
-## 0.5.3 (master)
+## 0.5.4 (master)
+
+Widgets:
+- Added support for disabling resize in TextArea Widget `options.resize: false`.
+- Added support for using LX.ICONS on Button Widgets.
+- Tooltips supported in Button Widget `options.tooltip`. Uses either `options.title` or `name` as content.
+
+`LX.makeContainer` now accepts `innerHTML` and `parent` params.
+Started work on tooltips `LX.asTooltip(trigger, content)`.
+Added support for adding a class to LexGUI root on init `options.rootClass`.
+Added support for adding a class to Sidebar/Menubar areas on `Area.addSidebar` and `Area.addMenubar`.
+Added `options.asElement` to return `LX.badge` as HTMLElement instead of html string.
+Support for using LX.ICONS on sidebar entry icons. Keep FA icons as legacy by now.
+Minor CSS improvements. Added more class utilities.
+
+## 0.5.3
 
 Widgets:
 - Fixed Select Widget filter issues.

package/demo.js

@@ -5,21 +5,21 @@ import 'lexgui/components/audio.js';
 
 window.LX = LX;
 
-let area = LX.init( { strictViewport: false } );
+const area = LX.init( { strictViewport: false, rootClass: "wrapper" } );
 
 // Menubar
 {
     area.addMenubar( m => {
-        
+
         m.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
-    
+
         m.add( "Docs", { icon: "fa-solid fa-magnifying-glass", short: "F1", callback: () => { window.open("./docs/") }});
-    
+
         const commandButton = new LX.Button(null, "Search command...", () => { LX.setCommandbarState( true ) }, {
             width: "256px", className: "right", buttonClass: "outline left fg-tertiary bg-secondary" }
         );
         m.root.appendChild( commandButton.root );
-    
+
         m.addButtons( [
             {
                 title: "Github",
@@ -40,40 +40,379 @@ let area = LX.init( { strictViewport: false } );
 
 // Header
 {
-    const header = LX.makeContainer( [ null, "auto" ], "col border gap-2 p-8" );
-    
-    header.innerHTML = `
+    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col border-top border-bottom gap-2 px-6 py-12", `
         <a>Get started with LexGUI.js</a>
         <h1>Build your application interface</h1>
-        <p style="max-width:32rem">A set of beautifully-designed, accessible widgets and components. 
+        <p class="font-light" style="max-width:32rem">A set of beautifully-designed, accessible widgets and components.
         No complex frameworks. Pure JavaScript and CSS. Open Source.</p>
-    `;
-    
-    area.attach( header );
+    `, area );
 }
 
 // Content
 {
-    const tabs = area.addTabs( { sizes: [ "auto", "auto" ], contentClass: "p-6 pt-0" } );
-    tabs.root.parentElement.classList.add( "p-4" );
+    const tabs = area.addTabs( { parentClass: "p-4", sizes: [ "auto", "auto" ], contentClass: "p-6 pt-0" } );
+
+    // Editor
+    {
+        const editorContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
+        tabs.add( "Editor", editorContainer, { selected: true } );
+
+        const editorArea = new LX.Area({ className: "rounded-lg" });
+        editorContainer.appendChild( editorArea.root );
+
+        editorArea.addMenubar( m => {
+            m.add( "Scene/New Scene", () => { console.log("New scene created!") });
+            m.add( "Scene/Open Scene", { icon: "fa-solid fa-folder-open", short: "S" } );
+            m.add( "Scene/Open Recent/hello.scene" );
+            m.add( "Scene/Open Recent/goodbye.scene" );
+            m.add( "Project/Project Settings", { disabled: true } );
+            m.add( "Project/" );
+            m.add( "Project/Export", { icon: "fa-solid fa-download" });
+            m.add( "Project/Export/DAE", { icon: "fa-solid fa-cube", short: "D" } );
+            m.add( "Project/Export/GLTF", { short:  "G" } );
+            m.add( "Account/Login", { icon: "fa-solid fa-user" } );
+            m.add( "Help/Search Help", { icon: "fa-solid fa-magnifying-glass", short:  "F1" } );
+            m.add( "Help/Support LexGUI/Please", { icon: "fa-solid fa-heart" } );
+            m.add( "Help/Support LexGUI/Do it" );
+            m.addButtons( [
+                {
+                    title: "Play",
+                    icon: "fa-solid fa-play",
+                    swap: "fa-solid fa-stop"
+                },
+                {
+                    title: "Pause",
+                    icon: "fa-solid fa-pause",
+                    disabled: true
+                }
+            ]);
+        }, { sticky: false });
+
+        // split main area
+        const [ left, right ] = editorArea.split({ sizes:["70%","30%"], minimizable: true });
+
+        // add canvas to left upper part
+        const canvas = document.createElement('canvas');
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        canvas.width = left.root.offsetWidth;
+        canvas.height = left.root.offsetHeight
+
+        const resizeCanvas = ( bounding ) => {
+            canvas.width = bounding.width;
+            canvas.height = bounding.height;
+        };
+
+        left.attach( canvas );
+        left.onresize = resizeCanvas;
+        left.addOverlayButtons( [
+            [
+                { name: "Select", icon: "fa fa-arrow-pointer", selectable: true },
+                { name: "Move", icon: "fa-solid fa-arrows-up-down-left-right", selectable: true },
+                { name: "Rotate", icon: "fa-solid fa-rotate-right", selectable: true }
+            ],
+            { name: "Lit", options: ["Lit", "Unlit", "Wireframe"] },
+            [
+                { name: "Enable Snap", icon: "fa fa-table-cells", selectable: true },
+                { name: 10, options: [10, 100, 1000] }
+            ]
+        ], { float: "htc" } );
+
+        // add panels
+        var sidePanel = right.addPanel();
+        fillPanel( sidePanel );
+
+        function loop(dt) {
+
+            var ctx = canvas.getContext("2d");
+            ctx.fillStyle = sidePanel.getValue('Background');
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.font = `${ sidePanel.getValue('Font Size') }px ${ sidePanel.getValue('Font Family') }`;
+            ctx.fillStyle = sidePanel.getValue('Font Color');
+            const pos2D = sidePanel.getValue('2D Position');
+            ctx.fillText( sidePanel.getValue('Text'), pos2D[0], pos2D[1]);
+            requestAnimationFrame(loop);
+        }
+
+        requestAnimationFrame(loop);
+
+        // **** **** **** **** **** **** **** **** **** **** **** ****
+
+        function fillPanel( panel ) {
+
+            // Add data tree
+
+            let sceneData = {
+                'id': 'root',
+                'children': [
+                    {
+                        'id': 'node_1',
+                        'children': [
+                            {
+                                'id': 'node_1_1',
+                                'icon': 'fa-solid fa-cube',
+                                'children': [],
+                                'actions': [
+                                    {
+                                        'name': 'Open script',
+                                        'icon': 'fa-solid fa-scroll'
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        'id': 'node_2',
+                        'icon': 'fa-solid fa-circle-play',
+                        'children': []
+                    }
+                ]
+            };
+
+            // This is optional!
+            const treeIcons = [
+                {
+                    'name':'Add node',
+                    'icon': 'fa-solid fa-plus'
+                },
+                {
+                    'name':'Instantiate scene',
+                    'icon': 'fa-solid fa-link'
+                }
+            ];
+
+            window.tree = panel.addTree("Scene Tree", sceneData, {
+                icons: treeIcons,
+                addDefault: true,
+                onevent: (event) => {
+                    switch(event.type) {
+                        case LX.TreeEvent.NODE_CONTEXTMENU:
+                            const m = event.panel;
+                            m.add( "Components/Transform");
+                            m.add( "Components/MeshRenderer");
+                            break;
+                    }
+                }
+            });
+
+            // add widgets to panel branch
+            panel.branch("Canvas", {icon: "fa-solid fa-palette", filter: true});
+            panel.addColor("Background", "#b7a9b1", null);
+            panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "fa fa-font"});
+            panel.addColor("Font Color", "#303b8d", null);
+            panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace"], "GeistSans");
+            panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
+            const opacityValues = [
+                [0.2, 0.3146875],
+                [0.417313915857606, 0.8946875000000003],
+                [0.5495145631067961, 0.6746875],
+                [1, 1]
+            ];
+            panel.addCurve("Opacity", opacityValues);
+            panel.addSize("Resolution", [1280, 720], null, { units: "p", precision: 0 });
+            panel.merge();
+
+            panel.branch("Node", { icon: "fa-solid fa-cube" });
+            panel.addText("Name", "node_1");
+            panel.addCheckbox("Visibility", true, null, { className: "accent" });
+            panel.addLayers("Layers", 10, null);
+
+            panel.addTitle( "Transform" );
+            panel.addVector3( "Position", [0.0, 0.0, 0.0] );
+            panel.addVector4( "Rotation", [0.0, 0.0, 0.0, 1.0] );
+            panel.addVector3( "Scale", [1.0, 1.0, 1.0] );
+            panel.addButton(null, "Export", null, { buttonClass: "contrast" });
+            panel.merge();
+        }
+    }
 
     // Mail
     {
-        const mailContainer = LX.makeContainer( [ null, "auto" ], "col bg-primary border rounded-lg p-6" );
-        tabs.add( "Mail", mailContainer, { selected: true } );
+        const mailContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
+        tabs.add( "Mail", mailContainer, { xselected: true } );
+
+        const mailArea = new LX.Area();
+        mailContainer.appendChild( mailArea.root );
+        const badgeClass = "ml-auto no-bg font-medium";
+
+        const sidebar = mailArea.addSidebar( m => {
+            m.add( "Inbox", { selected: true, icon: "inbox", content: LX.badge("128", badgeClass, { asElement: true }) } );
+            m.add( "Drafts", { icon: "file", content: LX.badge("9", badgeClass, { asElement: true }) } );
+            m.add( "Sent", { icon: "paper-plane" } );
+            m.add( "Junk", { icon: "box-archive-x", content: LX.badge("23", badgeClass, { asElement: true }) } );
+            m.add( "Trash", { icon: "trash-can" } );
+            m.add( "Archive", { icon: "box-archive" } );
+            m.separator();
+            m.add( "Social", { icon: "user", content: LX.badge("972", badgeClass, { asElement: true }) } );
+            m.add( "Updates", { icon: "circle-info", content: LX.badge("342", badgeClass, { asElement: true }) } );
+            m.add( "Forums", { icon: "comments", content: LX.badge("96", badgeClass, { asElement: true }) } );
+            m.add( "Shopping ", { icon: "shopping-cart" } );
+            m.add( "Promotions", { icon: "flag", content: LX.badge("21", badgeClass, { asElement: true }) } );
+        }, {
+            // collapseToIcons: false,
+            className: "border-right",
+            headerTitle: "jxarco",
+            headerSubtitle: "alexroco.30@gmail.com",
+            headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
+            skipFooter: true,
+            displaySelected: true,
+            onHeaderPressed: (e, element) => { }
+        });
+
+        const inboxArea = sidebar.siblingArea;
+
+        var [ left, right ] = inboxArea.split({ sizes:["40%","60%"] });
+        left.setLimitBox( 350, null, 650, null );
+
+        // Manage Inbox
+        {
+            const inboxTabs = left.addTabs({ parentClass: "flex p-3 items-end border-bottom", sizes: [ "auto", "auto" ], float: "end" });
+            const tabsRowContainer = inboxTabs.root.parentElement;
+
+            const mailSectionTitle = LX.makeContainer( [ "auto", "auto" ], "mr-auto ml-2 self-center text-xxl font-semibold", "Inbox" );
+            tabsRowContainer.prepend( mailSectionTitle );
+
+            window.__showMailList = ( container, unreadOnly = false ) => {
+
+                // Filter
+                {
+                    const allMailFilter = LX.makeContainer( [ "100%", "50px" ], "flex p-2", "", container );
+                    const filterInput = new LX.TextInput(null, "", null,
+                        { inputClass: "outline", width: "100%", icon: "fa fa-magnifying-glass", placeholder: "Search..." }
+                    );
+                    allMailFilter.appendChild( filterInput.root );
+                }
+
+                // Content
+                {
+                    const allMailContent = LX.makeContainer( [ "100%", "calc(100% - 50px)" ], "flex flex-col p-4 pt-0 gap-2 overflow-scroll", "", container );
+
+                    window.__addMail = ( mail, mailContainer ) => {
+
+                        const msgContent = LX.makeContainer( [ "100%", "auto" ],
+                            "flex flex-col border p-3 rounded-lg gap-2 select-none hover:bg-secondary cursor-pointer", "", mailContainer );
+
+                        // Name, subject, date
+                        {
+                            const msgInfo = LX.makeContainer( [ "100%", "auto" ], "flex flex-col gap-0.5", "", msgContent );
+                            const msgNameDate = LX.makeContainer( [ "100%", "auto" ], "flex flex-row", "", msgInfo );
+
+                            // Name + Date
+                            {
+                                const msgName = LX.makeContainer( [ "auto", "auto" ], "flex font-semibold text-md gap-2", "", msgNameDate );
+                                msgName.innerHTML = mail.name;
+                                msgName.innerHTML += ( mail.read ? "" : `<span class="rounded-full self-center bg-accent" style="width: 8px; height: 8px"></span>` );
+                                const msgDate = LX.makeContainer( [ "auto", "auto" ], "fg-tertiary text-sm ml-auto self-center", mail.date, msgNameDate );
+                            }
+
+                            const msgSubject = LX.makeContainer( [ "100%", "auto" ], "font-semibold text-sm", mail.subject, msgInfo );
+                        }
+
+                        const msgText = LX.makeContainer( [ "100%", "auto" ], "text-sm line-clamp-2 fg-tertiary", mail.content, msgContent );
+                        const msgTags = LX.makeContainer( [ "100%", "auto" ], "flex flex-row gap-0.5 font-semibold", "", msgContent );
+                        for( const tag of mail.tags )
+                        {
+                            msgTags.appendChild( LX.badge( tag, "sm", { asElement: true } ) );
+                        }
+
+                        msgContent.listen( "click", () => {
+                            window.__openMail( mail );
+                        } );
+                    };
+
+                    LX.requestJSON( "data/example_mail_data.json", data => {
+                        data.forEach( e => { if( !unreadOnly || ( unreadOnly && !e.read ) ) window.__addMail( e, allMailContent ) } );
+                        window.__openMail( data[ 0 ] );
+                    } )
+                }
+            }
+
+            const allMailContainer = LX.makeContainer( [ "100%", "100%" ], "flex flex-col" );
+            inboxTabs.add( "All mail", allMailContainer, { selected: true } );
+            window.__showMailList( allMailContainer );
+
+            const unreadMailContainer = LX.makeContainer( [ "100%", "100%" ], "flex flex-col" );
+            inboxTabs.add( "Unread", unreadMailContainer );
+            window.__showMailList( unreadMailContainer, true );
+        }
+
+        // Manage Message Preview
+        {
+            // Buttons
+            {
+                const mailPreviewHeader = LX.makeContainer( [ "100%", "59.59px" ], "flex flex-row border-bottom p-1", "", right );
+
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Archive", tooltip: true, buttonClass: "bg-none", icon: "box-archive" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to junk", tooltip: true, buttonClass: "bg-none", icon: "box-archive-x" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to trash", tooltip: true, buttonClass: "bg-none", icon: "trash-can" } ).root );
+                mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-right self-center ml-2 mr-2" ) );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Snooze", tooltip: true, buttonClass: "bg-none", icon: "clock" } ).root );
+
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply", tooltip: true, buttonClass: "bg-none", className: "ml-auto", icon: "reply" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply all", tooltip: true, buttonClass: "bg-none", icon: "reply-all" } ).root );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Forward", tooltip: true, buttonClass: "bg-none", icon: "forward" } ).root );
+                mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-right self-center ml-2 mr-2" ) );
+                mailPreviewHeader.appendChild( new LX.Button( null, "", (value, event) => {
+                    new LX.DropdownMenu( event.target, [
+                        { name: "Mark as unread" },
+                        { name: "Star thread" },
+                        { name: "Add label" },
+                        { name: "Mute thread" }
+                    ], { side: "bottom", align: "end" });
+                }, { buttonClass: "bg-none", icon: "more" } ).root );
+            }
+
+            // Prewiew Info
+            {
+                const previewDataContent = LX.makeContainer( [ "100%", "100%" ], "", "", right );
+
+                window.__openMail = ( mail ) => {
+
+                    previewDataContent.innerHTML = "";
+
+                    const mailPreviewInfo = LX.makeContainer( [ "100%", "auto" ], "flex flex-row border-bottom p-6", "", previewDataContent );
+
+                    const senderData = LX.makeContainer( [ "100%", "auto" ], "flex flex-col gap-0.5", `
+                    <div class="text-md font-semibold">${ mail.name }</div>
+                    <div class="text-sm">${ mail.subject }</div>
+                    <div class="text-sm">Reply-To: ${ mail.email }</div>
+                    `, mailPreviewInfo );
+
+                    const exactDate = LX.makeContainer( [ "100%", "auto" ], "flex flex-row text-sm fg-tertiary justify-end", mail.exactDate, mailPreviewInfo );
+                    const mailPreviewContent = LX.makeContainer( [ "100%", "505px" ], "flex flex-row border-bottom text-md whitespace-pre-wrap p-4", mail.content, previewDataContent );
+                    const previewFooter = LX.makeContainer( [ "100%", "auto" ], "flex flex-col p-2", "", previewDataContent );
+
+                    const msgReplyTextArea = new LX.TextArea(null, "", null,
+                        { className: "mt-1", inputClass: "outline", width: "100%", resize: false, placeholder: `Reply ${ mail.name }` }
+                    );
+                    previewFooter.appendChild( msgReplyTextArea.root );
+
+                    const previewButtons = LX.makeContainer( [ "100%", "auto" ], "flex flex-row p-1", "", previewFooter );
+
+                    const muteToggle = new LX.Toggle( null, false, null, { label: "Mute this thread", className: "contrast" } );
+                    previewButtons.appendChild( muteToggle.root );
+
+                    const sendButton = new LX.Button( null, "Send", () => {
+                        LX.toast( "Message sent!", "To:" + mail.email, { timeout: 5000, action: { name: "Undo", callback: ( toast, actionName, event ) => {
+                            toast.close();
+                        } } } );
+                    }, { className: "ml-auto", buttonClass: "contrast" } );
+                    previewButtons.appendChild( sendButton.root );
+                };
+            }
+        }
     }
 
     // Tasks
     {
-        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-primary border rounded-lg p-6" );
+        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-primary border rounded-lg p-6 overflow-hidden" );
         tabs.add( "Tasks", tasksContainer, { xselected: true } );
 
-        const header = LX.makeContainer( [ null, "auto" ], "col rounded-lg p-6" );
-        header.innerHTML = `
+        const header = LX.makeContainer( [ null, "auto" ], "col p-4", `
             <h2>Welcome back!</h2>
             <p class="fg-tertiary">Here's a list of your tasks for this month!</p>
-        `;
-        tasksContainer.appendChild( header );
+        `, tasksContainer );
 
         const tableWidget = new LX.Table(null, {
             head: ["Name", "Status", "Priority"],
@@ -114,31 +453,22 @@ let area = LX.init( { strictViewport: false } );
     }
 
     // Code
-    {
-        const codeContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-            backgroundColor: "red"
-        } );
+    // {
+    //     const codeContainer = LX.makeContainer( [ "auto", "850px" ], "", {
+    //         backgroundColor: "red"
+    //     } );
 
-        tabs.add( "Code", codeContainer );
-    }
+    //     tabs.add( "Code", codeContainer );
+    // }
 
     // Audio
-    {
-        const audioContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-            backgroundColor: "red"
-        } );
+    // {
+    //     const audioContainer = LX.makeContainer( [ "auto", "850px" ], "", {
+    //         backgroundColor: "red"
+    //     } );
 
-        tabs.add( "Audio", audioContainer );
-    }
-
-    // Examples
-    {
-        const examplesContainer = LX.makeContainer( [ "auto", "850px" ], "", {
-            backgroundColor: "red"
-        } );
-
-        tabs.add( "Examples", examplesContainer );
-    }
+    //     tabs.add( "Audio", audioContainer );
+    // }
 }
 
 // Footer