puter/src/UI/UIWindowTaskManager.js

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;