Begin work on task manager

src/UI/UIDesktop.js

@@ -35,6 +35,7 @@ import new_context_menu_item from "../helpers/new_context_menu_item.js"
 import refresh_item_container from "../helpers/refresh_item_container.js"
 import changeLanguage from "../i18n/i18nChangeLanguage.js"
 import UIWindowSettings from "./Settings/UIWindowSettings.js"
+import UIWindowTaskManager from "./UIWindowTaskManager.js"
 
 async function UIDesktop(options){
     let h = '';
@@ -1182,7 +1183,7 @@ $(document).on('click', '.user-options-menu-btn', async function(e){
                 }
             },
             //--------------------------------------------------
-            // Change Password
+            // Settings
             //--------------------------------------------------
             {
                 html: i18n('settings'),
@@ -1191,6 +1192,15 @@ $(document).on('click', '.user-options-menu-btn', async function(e){
                 }
             },
             //--------------------------------------------------
+            // Task Manager
+            //--------------------------------------------------
+            {
+                html: i18n('task-manager'),
+                onClick: async function(){
+                    UIWindowTaskManager();
+                }
+            },
+            //--------------------------------------------------
             // Contact Us
             //--------------------------------------------------
             {

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;

src/UI/UIWindowThemeDialog.js

@@ -1,4 +1,5 @@
 import UIWindow from "./UIWindow.js";
+import UIWindowColorPicker from "./UIWindowColorPicker.js";
 
 const UIWindowThemeDialog = async function UIWindowThemeDialog () {
     const services = globalThis.services;
@@ -112,6 +113,12 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
             svc_theme.reset();
         })
         ;
+    Button({ label: i18n('reset_colors') })
+        .appendTo(w_body)
+        .onPress(() => {
+            UIWindowColorPicker();
+        })
+        ;
 
     Slider({
         label: i18n('hue'),

src/css/style.css

@@ -3782,3 +3782,54 @@ label {
     gap: 10px;
     justify-content: flex-end;
 }
+
+.taskmgr {
+    box-sizing: border-box;
+
+    --scale: 2pt;
+    --line-color: #6e6e6ebd;
+}
+
+.taskmgr-tasklist {
+    background-color: rgba(255,255,255,0.8);
+    border: 2px inset rgba(127, 127, 127, 0.3);
+}
+
+.taskmgr-indentcell {
+    position: relative;
+    align-items: right;
+    width: calc(10 * var(--scale));
+    height: calc(10 * var(--scale));
+}
+
+.taskmgr-indentcell-trunk {
+    position: absolute;
+    top: 0;
+    left: calc(5 * var(--scale));
+    width: calc(5 * var(--scale));
+    height: calc(10 * var(--scale));
+    border-left: 2px solid var(--line-color);
+}
+
+.taskmgr-indentcell-branch {
+    position: absolute;
+    top: 0;
+    left: calc(5 * var(--scale));
+    width: calc(5 * var(--scale));
+    height: calc(5 * var(--scale));
+    border-left: 2px solid var(--line-color);
+    border-bottom: 2px solid var(--line-color);
+    border-radius: 0 0 0 calc(2.5 * var(--scale));
+}
+
+.taskmgr-task {
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    height: calc(10 * var(--scale));
+    line-height: calc(10 * var(--scale));
+}
+
+.taskmgr-task-title {
+    flex-grow: 1;
+    padding-left: calc(2.5 * var(--scale));
+}

src/i18n/translations/en.js

@@ -201,6 +201,7 @@ const en = {
         storage_usage: "Storage Usage",
         storage_puter_used: 'used by Puter',
         taking_longer_than_usual: 'Taking a little longer than usual. Please wait...',
+        task_manager: "Task Manager",
         terms: "Terms",
         text_document: 'Text document',
         tos_fineprint: `By clicking 'Create Free Account' you agree to Puter's {{link=terms}}Terms of Service{{/link}} and {{link=privacy}}Privacy Policy{{/link}}.`,

src/services/InstanceService.js

@@ -0,0 +1,5 @@
+import { Service } from "../definitions";
+
+export class InstanceService extends Service {
+    //
+}