Begin work on task manager

src/UI/UIWindowTaskManager.js

@@ -0,0 +1,148 @@
+import UIWindow from "./UIWindow.js";
+
+const UIWindowTaskManager = async function UIWindowTaskManager () {
+    const sample_data = [
+        {
+            name: 'root',
+            children: [
+                {
+                    name: 'terminal',
+                    children: [
+                        {
+                            name: 'phoenix'
+                        }
+                    ],
+                    children: [
+                        {
+                            name: 'ai-plugin'
+                        }
+                    ]
+                },
+                {
+                    name: 'editor'
+                }
+            ]
+        }
+    ];
+
+    const w = await UIWindow({
+        title: i18n('task_manager'),
+        icon: null,
+        uid: null,
+        is_dir: false,
+        message: 'message',
+        // body_icon: options.body_icon,
+        // backdrop: options.backdrop ?? false,
+        is_resizable: true,
+        is_droppable: false,
+        has_head: true,
+        stay_on_top: true,
+        selectable_body: true,
+        draggable_body: false,
+        allow_context_menu: true,
+        show_in_taskbar: false,
+        window_class: 'window-alert',
+        dominant: true,
+        body_content: '',
+        width: 350,
+        // parent_uuid: options.parent_uuid,
+        // ...options.window_options,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            width: 'initial',
+            padding: '20px',
+            // 'background-color': `hsla(
+            //     var(--primary-hue),
+            //     calc(max(var(--primary-saturation) - 15%, 0%)),
+            //     calc(min(100%,var(--primary-lightness) + 20%)), .91)`,
+            'background-color': `hsla(
+                var(--primary-hue),
+                var(--primary-saturation),
+                var(--primary-lightness),
+                var(--primary-alpha))`,
+            'backdrop-filter': 'blur(3px)',
+            
+        }
+    });
+    const w_body = w.querySelector('.window-body');
+    w_body.classList.add('taskmgr');
+
+    const Indent = ({ has_trunk, has_branch }) => {
+        const el = document.createElement('div');
+        el.classList.add('taskmgr-indentcell');
+        if ( has_trunk ) {
+            // Add new child element
+            const el_indentcell_child = document.createElement('div');
+            el_indentcell_child.classList.add('taskmgr-indentcell-trunk');
+            el.appendChild(el_indentcell_child);
+        }
+        if ( has_branch ) {
+            const el_indentcell_child = document.createElement('div');
+            el_indentcell_child.classList.add('taskmgr-indentcell-branch');
+            el.appendChild(el_indentcell_child);
+        }
+
+        return {
+            appendTo (parent) {
+                parent.appendChild(el);
+                return this;
+            }
+        };
+    };
+
+    const Task = ({ placement, name }) => {
+        const { indent_level, last_item } = placement;
+
+        const el = document.createElement('div');
+        el.classList.add('taskmgr-task');
+
+        for ( let i=0; i < indent_level; i++ ) {
+            const last_cell = i === indent_level - 1;
+            console.log('last_cell', last_cell);
+            console.log('last_item', last_item);
+            Indent({
+                has_trunk: (last_cell && ( ! last_item )) ||
+                    ! last_cell,
+                has_branch: last_cell
+            }).appendTo(el);
+        }
+
+        const el_title = document.createElement('div');
+        el_title.classList.add('taskmgr-task-title');
+        el_title.innerText = name;
+        el.appendChild(el_title);
+
+        return {
+            appendTo (parent) {
+                parent.appendChild(el);
+                return this;
+            }
+        };
+    }
+
+    const el_tasklist = document.createElement('div');
+    el_tasklist.classList.add('taskmgr-tasklist');
+    const iter_tasks = (items, { indent_level }) => {
+        for ( let i=0 ; i < items.length; i++ ) {
+            const item = items[i];
+            Task({
+                placement: {
+                    indent_level,
+                    last_item: i === items.length - 1,
+                },
+                name: item.name
+            }).appendTo(el_tasklist);
+            if ( item.children ) {
+                iter_tasks(item.children, {
+                    indent_level: indent_level + 1
+                });
+            }
+        }
+    };
+    iter_tasks(sample_data, { indent_level: 0 });
+    w_body.appendChild(el_tasklist);
+}
+
+export default UIWindowTaskManager;