Initial commit

src/IPC.js

@@ -0,0 +1,953 @@
+import UIAlert from './UI/UIAlert.js';
+import UIWindow from './UI/UIWindow.js';
+import UIWindowSignup from './UI/UIWindowSignup.js';
+import UIWindowRequestPermission from './UI/UIWindowRequestPermission.js';
+import UIItem from './UI/UIItem.js'
+import UIWindowFontPicker from './UI/UIWindowFontPicker.js';
+import UIWindowColorPicker from './UI/UIWindowColorPicker.js';
+import UIPrompt from './UI/UIPrompt.js';
+import download from './helpers/download.js';
+import path from "./lib/path.js";
+
+/**
+ * In Puter, apps are loaded in iframes and communicate with the graphical user interface (GUI) aand each other using the postMessage API.
+ * The following sets up an Inter-Process Messaging System between apps and the GUI that enables communication
+ * for various tasks such as displaying alerts, prompts, managing windows, handling file operations, and more.
+ * 
+ * The system listens for 'message' events on the window object, handling different types of messages from the app (which is loaded in an iframe),
+ * such as ALERT, createWindow, showOpenFilePicker, ... 
+ * Each message handler performs specific actions, including creating UI windows, handling file saves and reads, and responding to user interactions.
+ * 
+ * Precautions are taken to ensure proper usage of appInstanceIDs and other sensitive information.
+ */
+window.addEventListener('message', async (event) => {
+    const app_env = event.data?.env ?? 'app';
+    
+    // Only process messages from apps
+    if(app_env !== 'app')
+        return;
+
+    // --------------------------------------------------------
+    // A response to a GUI message received from the app.
+    // --------------------------------------------------------
+    if (typeof event.data.original_msg_id !== "undefined" && typeof appCallbackFunctions[event.data.original_msg_id] !== "undefined") {
+        // Execute callback
+        appCallbackFunctions[event.data.original_msg_id](event.data);
+        // Remove this callback function since it won't be needed again
+        delete appCallbackFunctions[event.data.original_msg_id];
+
+        // Done
+        return;
+    }
+
+    // --------------------------------------------------------
+    // Message from apps
+    // --------------------------------------------------------
+
+    // `data` and `msg` are required
+    if(!event.data || !event.data.msg){
+        return;
+    }
+
+    // `appInstanceID` is required
+    if(!event.data.appInstanceID){
+        console.log(`appInstanceID is needed`);
+        return;
+    }
+
+    const $el_parent_window = $(`.window[data-element_uuid="${event.data.appInstanceID}"]`);
+    const parent_window_id = $el_parent_window.attr('data-id');
+    const $el_parent_disable_mask = $el_parent_window.find('.window-disable-mask');
+    const target_iframe = $(`.window[data-element_uuid="${event.data.appInstanceID}"]`).find('.window-app-iframe').get(0);
+    const msg_id = event.data.uuid;
+    const app_name = $(target_iframe).attr('data-app');
+    const app_uuid = $el_parent_window.attr('data-app_uuid');
+
+    // todo validate all event.data stuff coming from the client (e.g. event.data.message, .msg, ...)
+    //-------------------------------------------------
+    // READY
+    //-------------------------------------------------
+    if(event.data.msg === 'READY'){
+        $(target_iframe).attr('data-appUsesSDK', 'true');
+    }
+    //-------------------------------------------------
+    // windowFocused
+    //-------------------------------------------------
+    else if(event.data.msg === 'windowFocused'){
+        console.log('windowFocused');
+    }
+    //--------------------------------------------------------
+    // ALERT
+    //--------------------------------------------------------
+    else if(event.data.msg === 'ALERT' && event.data.message !== undefined){
+        const alert_resp = await UIAlert({
+            message: html_encode(event.data.message),
+            buttons: event.data.buttons,
+            type: event.data.options?.type,
+            window_options: {
+                parent_uuid: event.data.appInstanceID,
+                disable_parent_window: true,
+            }
+        })
+
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id,
+            msg: 'alertResponded',
+            response: alert_resp,
+        }, '*');
+    }
+    //--------------------------------------------------------
+    // PROMPT
+    //--------------------------------------------------------
+    else if(event.data.msg === 'PROMPT' && event.data.message !== undefined){
+        const prompt_resp = await UIPrompt({
+            message: html_encode(event.data.message),
+            placeholder: html_encode(event.data.placeholder),
+            window_options: {
+                parent_uuid: event.data.appInstanceID,
+                disable_parent_window: true,
+            }
+        })
+
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id,
+            msg: 'promptResponded',
+            response: prompt_resp,
+        }, '*');
+    }
+    //--------------------------------------------------------
+    // env
+    //--------------------------------------------------------
+    else if(event.data.msg === 'env'){
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id,
+        }, '*');
+    }
+    //--------------------------------------------------------
+    // createWindow
+    //--------------------------------------------------------
+    else if(event.data.msg === 'createWindow'){
+        // todo: validate as many of these as possible
+        if(event.data.options){
+            UIWindow({
+                title: event.data.options.title,
+                disable_parent_window: event.data.options.disable_parent_window,
+                width: event.data.options.width,
+                height: event.data.options.height,
+                is_resizable: event.data.options.is_resizable,
+                has_head: event.data.options.has_head,
+                center: event.data.options.center,
+                show_in_taskbar: event.data.options.show_in_taskbar,                    
+                iframe_srcdoc: event.data.options.content,
+                iframe_url: event.data.options.url,
+                parent_uuid: event.data.appInstanceID,
+            })
+        }
+    }
+    //--------------------------------------------------------
+    // setItem
+    //--------------------------------------------------------
+    else if(event.data.msg === 'setItem' && event.data.key && event.data.value){
+        // todo: validate key and value to avoid unnecessary api calls
+        return await $.ajax({
+            url: api_origin + "/setItem",
+            type: 'POST',
+            data: JSON.stringify({ 
+                app: app_uuid,
+                key: event.data.key,
+                value: event.data.value,
+            }),
+            async: true,
+            contentType: "application/json",
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            statusCode: {
+                401: function () {
+                    logout();
+                },
+            },        
+            success: function (fsentry){
+            }  
+        })
+    }
+    //--------------------------------------------------------
+    // getItem
+    //--------------------------------------------------------
+    else if(event.data.msg === 'getItem' && event.data.key){
+        // todo: validate key to avoid unnecessary api calls
+        $.ajax({
+            url: api_origin + "/getItem",
+            type: 'POST',
+            data: JSON.stringify({ 
+                key: event.data.key,
+                app: app_uuid,
+            }),
+            async: true,
+            contentType: "application/json",
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            statusCode: {
+                401: function () {
+                    logout();
+                },
+            },        
+            success: function (result){
+                // send confirmation to requester window
+                target_iframe.contentWindow.postMessage({
+                    original_msg_id: msg_id,
+                    msg: 'getItemSucceeded',
+                    value: result ? result.value : null,
+                }, '*');
+            }  
+        })
+    }
+    //--------------------------------------------------------
+    // removeItem
+    //--------------------------------------------------------
+    else if(event.data.msg === 'removeItem' && event.data.key){
+        // todo: validate key to avoid unnecessary api calls
+        $.ajax({
+            url: api_origin + "/removeItem",
+            type: 'POST',
+            data: JSON.stringify({ 
+                key: event.data.key,
+                app: app_uuid,
+            }),
+            async: true,
+            contentType: "application/json",
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            statusCode: {
+                401: function () {
+                    logout();
+                },
+            },        
+            success: function (result){
+                // send confirmation to requester window
+                target_iframe.contentWindow.postMessage({
+                    original_msg_id: msg_id,
+                }, '*');
+            }  
+        })
+    }
+    //--------------------------------------------------------
+    // showOpenFilePicker
+    //--------------------------------------------------------
+    else if(event.data.msg === 'showOpenFilePicker'){
+        // Auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        // Disable parent window
+        $el_parent_window.addClass('window-disabled')
+        $el_parent_disable_mask.show();
+        $el_parent_disable_mask.css('z-index', parseInt($el_parent_window.css('z-index')) + 1);
+        $(target_iframe).blur();
+
+        // Allowed_file_types
+        let allowed_file_types = "";
+        if(event.data.options && event.data.options.accept)
+            allowed_file_types = event.data.options.accept;
+
+        // selectable_body
+        let is_selectable_body = false;
+        if(event.data.options && event.data.options.multiple && event.data.options.multiple === true)
+            is_selectable_body = true;
+
+        // Open dialog
+        UIWindow({
+            allowed_file_types: allowed_file_types,
+            path: '/' + window.user.username + '/Desktop',
+            // this is the uuid of the window to which this dialog will return
+            parent_uuid: event.data.appInstanceID,
+            show_maximize_button: false,
+            show_minimize_button: false,
+            title: 'Open',
+            is_dir: true,
+            is_openFileDialog: true,
+            selectable_body: is_selectable_body,
+            iframe_msg_uid: msg_id,
+            initiating_app_uuid: app_uuid,
+            center: true,
+        });
+    }
+    //--------------------------------------------------------
+    // showDirectoryPicker
+    //--------------------------------------------------------
+    else if(event.data.msg === 'showDirectoryPicker'){
+        // Auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        // Disable parent window
+        $el_parent_window.addClass('window-disabled')
+        $el_parent_disable_mask.show();
+        $el_parent_disable_mask.css('z-index', parseInt($el_parent_window.css('z-index')) + 1);
+        $(target_iframe).blur();
+
+        // allowed_file_types
+        let allowed_file_types = "";
+        if(event.data.options && event.data.options.accept)
+            allowed_file_types = event.data.options.accept;
+
+        // selectable_body
+        let is_selectable_body = false;
+        if(event.data.options && event.data.options.multiple && event.data.options.multiple === true)
+            is_selectable_body = true;
+
+        // open dialog
+        UIWindow({
+            path: '/' + window.user.username + '/Desktop',
+            // this is the uuid of the window to which this dialog will return
+            parent_uuid: event.data.appInstanceID,
+            show_maximize_button: false,
+            show_minimize_button: false,
+            title: 'Open',
+            is_dir: true,
+            is_directoryPicker: true,
+            selectable_body: is_selectable_body,
+            iframe_msg_uid: msg_id,
+            center: true,
+            initiating_app_uuid: app_uuid,
+        });
+    }
+
+    //--------------------------------------------------------
+    // setWindowTitle
+    //--------------------------------------------------------
+    else if(event.data.msg === 'setWindowTitle' && event.data.new_title !== undefined){
+        const el_window = $(`.window[data-element_uuid="${event.data.appInstanceID}"]`).get(0);
+        // set window title
+        $(el_window).find(`.window-head-title`).html(html_encode(event.data.new_title));
+        // send confirmation to requester window
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id, 
+        }, '*');
+    }
+    //--------------------------------------------------------
+    // watchItem
+    //--------------------------------------------------------
+    else if(event.data.msg === 'watchItem' && event.data.item_uid !== undefined){
+        if(!window.watchItems[event.data.item_uid])
+            window.watchItems[event.data.item_uid] = [];
+
+        window.watchItems[event.data.item_uid].push(event.data.appInstanceID);
+    }
+    //--------------------------------------------------------
+    // openItem
+    //--------------------------------------------------------
+    else if(event.data.msg === 'openItem'){
+        // check if readURL returns 200
+        $.ajax({
+            url: event.data.metadataURL + '&return_suggested_apps=true&return_path=true',
+            type: 'GET',
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            success: async function(metadata){
+                $.ajax({
+                    url: api_origin + "/open_item",
+                    type: 'POST',
+                    contentType: "application/json",
+                    data: JSON.stringify({
+                        uid: metadata.uid ?? undefined,
+                        path: metadata.path ?? undefined,
+                    }),
+                    headers: {
+                        "Authorization": "Bearer "+auth_token
+                    },
+                    statusCode: {
+                        401: function () {
+                            logout();
+                        },
+                    },
+                    success: function(open_item_meta){
+                        setTimeout(function(){
+                            launch_app({ 
+                                name: metadata.name, 
+                                file_path: metadata.path,
+                                app_obj: open_item_meta.suggested_apps[0],
+                                window_title: metadata.name,
+                                file_uid: metadata.uid,
+                                file_signature: open_item_meta.signature,
+                            });
+                        // todo: this is done because sometimes other windows such as openFileDialog
+                        // bring focus to their apps and steal the focus from the newly-opened app
+                        }, 800);
+                    },
+                });            
+            }
+        })
+    }
+    //--------------------------------------------------------
+    // launchApp
+    //--------------------------------------------------------
+    else if(event.data.msg === 'launchApp'){
+        // launch app
+        launch_app({
+            name: event.data.app_name ?? app_name,
+            args: event.data.args ?? {},
+        });
+
+        // send confirmation to requester window
+        target_iframe.contentWindow.postMessage({
+            original_msg_id: msg_id, 
+        }, '*');
+    }
+    //--------------------------------------------------------
+    // readAppDataFile
+    //--------------------------------------------------------
+    else if(event.data.msg === 'readAppDataFile' && event.data.path !== undefined){
+        // resolve path to absolute
+        event.data.path = path.resolve(event.data.path);
+        
+        // join with appdata dir
+        const file_path = path.join(appdata_path, app_uuid, event.data.path);
+
+        puter.fs.sign(app_uuid, {
+                path: file_path, 
+                action: 'write',
+            }, 
+            function(signature){
+                signature = signature.items;
+                signature.signatures = signature.signatures ?? [signature];
+                if(signature.signatures.length > 0 && signature.signatures[0].path){
+                    signature.signatures[0].path = `~/` + signature.signatures[0].path.split('/').slice(2).join('/')
+                    // send confirmation to requester window
+                    target_iframe.contentWindow.postMessage({
+                        msg: "readAppDataFileSucceeded",
+                        original_msg_id: msg_id, 
+                        item: signature.signatures[0],
+                    }, '*');
+                }else{
+                    // send error to requester window
+                    target_iframe.contentWindow.postMessage({
+                        msg: "readAppDataFileFailed",
+                        original_msg_id: msg_id, 
+                    }, '*');
+                }
+            }
+        )
+    }
+    //--------------------------------------------------------
+    // getAppData
+    //--------------------------------------------------------
+    // todo appdata should be provided from the /open_item api call
+    else if(event.data.msg === 'getAppData'){
+        if(appdata_signatures[app_uuid]){
+            target_iframe.contentWindow.postMessage({
+                msg: "getAppDataSucceeded",
+                original_msg_id: msg_id, 
+                item: appdata_signatures[app_uuid],
+            }, '*');    
+        }
+        // make app directory if it doesn't exist
+        puter.fs.mkdir({
+            path: path.join( appdata_path, app_uuid),
+            rename: false,
+            overwrite: false,
+            success: function(dir){
+                puter.fs.sign(app_uuid, {
+                    uid: dir.uid, 
+                    action: 'write',
+                    success: function(signature){
+                        signature = signature.items;
+                        appdata_signatures[app_uuid] = signature;
+                        // send confirmation to requester window
+                        target_iframe.contentWindow.postMessage({
+                            msg: "getAppDataSucceeded",
+                            original_msg_id: msg_id, 
+                            item: signature,
+                        }, '*');
+                    }
+                })
+            },
+            error: function(err){
+                if(err.existing_fsentry || err.code === 'path_exists'){
+                    puter.fs.sign(app_uuid, {
+                        uid: err.existing_fsentry.uid, 
+                        action: 'write',
+                        success: function(signature){
+                            signature = signature.items;
+                            appdata_signatures[app_uuid] = signature;
+                            // send confirmation to requester window
+                            target_iframe.contentWindow.postMessage({
+                                msg: "getAppDataSucceeded",
+                                original_msg_id: msg_id, 
+                                item: signature,
+                            }, '*');
+                        }
+                    })    
+                }
+            }
+        });
+    }
+    //--------------------------------------------------------
+    // requestPermission
+    //--------------------------------------------------------
+    else if(event.data.msg === 'requestPermission'){
+        // auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        // options must be an object
+        if(event.data.options === undefined || typeof event.data.options !== 'object')
+            event.data.options = {};
+
+        // clear window_options for security reasons
+        event.data.options.window_options = {}
+
+        // Set app as parent window of font picker window
+        event.data.options.window_options.parent_uuid = event.data.appInstanceID;
+
+        // disable parent window
+        event.data.options.window_options.disable_parent_window = true;
+
+        let granted = await UIWindowRequestPermission({
+            origin: event.origin,
+            permission: event.data.options.permission,
+            window_options: event.data.options.window_options,
+        });
+
+        // send selected font to requester window
+        target_iframe.contentWindow.postMessage({
+            msg: "permissionGranted", 
+            granted: granted,
+            original_msg_id: msg_id, 
+        }, '*');
+        $(target_iframe).get(0).focus({preventScroll:true});
+    }
+    //--------------------------------------------------------
+    // showFontPicker
+    //--------------------------------------------------------
+    else if(event.data.msg === 'showFontPicker'){
+        // auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        // set options
+        event.data.options = event.data.options ?? {};
+
+        // clear window_options for security reasons
+        event.data.options.window_options = {}
+
+        // Set app as parent window of font picker window
+        event.data.options.window_options.parent_uuid = event.data.appInstanceID;
+
+        // Open font picker
+        let selected_font = await UIWindowFontPicker(event.data.options);
+
+        // send selected font to requester window
+        target_iframe.contentWindow.postMessage({
+            msg: "fontPicked", 
+            original_msg_id: msg_id, 
+            font: selected_font,
+        }, '*');
+        $(target_iframe).get(0).focus({preventScroll:true});
+    }
+    //--------------------------------------------------------
+    // showColorPicker
+    //--------------------------------------------------------
+    else if(event.data.msg === 'showColorPicker'){
+        // Auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        // set options
+        event.data.options = event.data.options ?? {};
+
+        // Clear window_options for security reasons
+        event.data.options.window_options = {}
+
+        // Set app as parent window of the font picker window
+        event.data.options.window_options.parent_uuid = event.data.appInstanceID;
+
+        // Open color picker
+        let selected_color = await UIWindowColorPicker(event.data.options);
+
+        // Send selected color to requester window
+        target_iframe.contentWindow.postMessage({
+            msg: "colorPicked", 
+            original_msg_id: msg_id, 
+            color: selected_color ? selected_color.color : undefined,
+        }, '*');
+        $(target_iframe).get(0).focus({preventScroll:true});
+    }        
+    //--------------------------------------------------------
+    // setWallpaper
+    //--------------------------------------------------------
+    else if(event.data.msg === 'setWallpaper'){
+        // Auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        // No options?
+        if(!event.data.options)
+            event.data.options = {};
+
+        // /set-desktop-bg
+        try{
+            await $.ajax({
+                url: api_origin + "/set-desktop-bg",
+                type: 'POST',
+                data: JSON.stringify({ 
+                    url: event.data.readURL,
+                    fit: event.data.options.fit ?? 'cover',
+                    color: event.data.options.color,
+                }),
+                async: true,
+                contentType: "application/json",
+                headers: {
+                    "Authorization": "Bearer "+auth_token
+                },
+                statusCode: {
+                    401: function () {
+                        logout();
+                    },
+                },    
+            });
+
+            // Set wallpaper
+            window.set_desktop_background({
+                url: event.data.readURL,
+                fit: event.data.options.fit ?? 'cover',
+                color: event.data.options.color,
+            })
+    
+            // Send success to app
+            target_iframe.contentWindow.postMessage({
+                msg: "wallpaperSet", 
+                original_msg_id: msg_id, 
+            }, '*');
+            $(target_iframe).get(0).focus({preventScroll:true});
+        }catch(err){
+            console.error(err);
+        }
+    }        
+
+    //--------------------------------------------------------
+    // showSaveFilePicker
+    //--------------------------------------------------------
+    else if(event.data.msg === 'showSaveFilePicker'){
+        //auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        //disable parent window
+        $el_parent_window.addClass('window-disabled')
+        $el_parent_disable_mask.show();
+        $el_parent_disable_mask.css('z-index', parseInt($el_parent_window.css('z-index')) + 1);
+        $(target_iframe).blur();
+
+        await UIWindow({
+            path: '/' + window.user.username + '/Desktop',
+            // this is the uuid of the window to which this dialog will return
+            parent_uuid: event.data.appInstanceID,
+            show_maximize_button: false,
+            show_minimize_button: false,
+            title: 'Save As…',
+            is_dir: true,
+            is_saveFileDialog: true,
+            saveFileDialog_default_filename: event.data.suggestedName ?? '',
+            selectable_body: false,
+            iframe_msg_uid: msg_id,
+            center: true,
+            initiating_app_uuid: app_uuid,
+            onSaveFileDialogSave: async function(target_path, el_filedialog_window){
+                $(el_filedialog_window).find('.window-disable-mask, .busy-indicator').show();
+                let busy_init_ts = Date.now();
+
+                // -------------------------------------
+                // URL
+                // -------------------------------------
+                if(event.data.url){
+                    // download progress tracker
+                    let dl_op_id = operation_id++;
+
+                    // upload progress tracker defaults
+                    window.progress_tracker[dl_op_id] = [];
+                    window.progress_tracker[dl_op_id][0] = {};
+                    window.progress_tracker[dl_op_id][0].total = 0;
+                    window.progress_tracker[dl_op_id][0].ajax_uploaded = 0;
+                    window.progress_tracker[dl_op_id][0].cloud_uploaded = 0;
+
+                    let item_with_same_name_already_exists = true;
+                    while(item_with_same_name_already_exists){
+                        await download({
+                            url: event.data.url, 
+                            name: path.basename(target_path),
+                            dest_path: path.dirname(target_path),
+                            auth_token: auth_token, 
+                            api_origin: api_origin,
+                            dedupe_name: false,
+                            overwrite: false,
+                            operation_id: dl_op_id,
+                            item_upload_id: 0,
+                            success: function(res){
+                            },
+                            error: function(err){
+                                UIAlert(err && err.message ? err.message : "Download failed.");
+                            }
+                        });
+                        item_with_same_name_already_exists = false;
+                    }
+                }
+                // -------------------------------------
+                // File
+                // -------------------------------------
+                else{
+                    let overwrite = false;
+                    let file_to_upload = new File([event.data.content], path.basename(target_path));
+                    let item_with_same_name_already_exists = true;
+                    while(item_with_same_name_already_exists){
+                        // overwrite?
+                        if(overwrite)
+                            item_with_same_name_already_exists = false;
+                        // upload
+                        try{
+                            const res = await puter.fs.write(
+                                target_path,
+                                file_to_upload, 
+                                { 
+                                    dedupeName: false,
+                                    overwrite: overwrite
+                                }
+                            );
+
+                            let file_signature = await puter.fs.sign(app_uuid, {uid: res.uid, action: 'write'});
+                            file_signature = file_signature.items;
+
+                            item_with_same_name_already_exists = false;
+                            target_iframe.contentWindow.postMessage({
+                                msg: "fileSaved", 
+                                original_msg_id: msg_id, 
+                                filename: res.name,
+                                saved_file: {
+                                    name: file_signature.fsentry_name,
+                                    readURL: file_signature.read_url,
+                                    writeURL: file_signature.write_url,
+                                    metadataURL: file_signature.metadata_url,
+                                    type: file_signature.type,
+                                    uid: file_signature.uid,
+                                    path: `~/` + res.path.split('/').slice(2).join('/'),
+                                },
+                            }, '*');
+
+                            $(target_iframe).get(0).focus({preventScroll:true});
+                            // Update matching items on open windows
+                            // todo don't blanket-update, mostly files with thumbnails really need to be updated
+                            // first remove overwritten items
+                            $(`.item[data-uid="${res.uid}"]`).removeItems();
+                            // now add new items
+                            UIItem({
+                                appendTo: $(`.item-container[data-path="${html_encode(path.dirname(target_path))}" i]`),
+                                immutable: res.immutable,
+                                associated_app_name: res.associated_app?.name,
+                                path: target_path,
+                                icon: await item_icon(res),
+                                name: path.basename(target_path),
+                                uid: res.uid,
+                                size: res.size,
+                                modified: res.modified,
+                                type: res.type,
+                                is_dir: false,
+                                is_shared: res.is_shared,
+                                suggested_apps: res.suggested_apps,
+                            });
+                            // sort each window
+                            $(`.item-container[data-path="${html_encode(path.dirname(target_path))}" i]`).each(function(){
+                                sort_items(this, $(this).attr('data-sort_by'), $(this).attr('data-sort_order'))
+                            });                            
+                            $(el_filedialog_window).close();
+                            show_save_account_notice_if_needed();
+                        }
+                        catch(err){
+                            // item with same name exists
+                            if(err.code === 'item_with_same_name_exists'){
+                                const alert_resp = await UIAlert({
+                                    message: `<strong>${html_encode(err.entry_name)}</strong> already exists.`,
+                                    buttons:[
+                                        {
+                                            label: 'Replace',
+                                            value: 'replace',
+                                            type: 'primary',
+                                        },
+                                        {
+                                            label: 'Cancel',
+                                            value: 'cancel',
+                                        },
+                                    ],
+                                    parent_uuid: $(el_filedialog_window).attr('data-element_uuid'),
+                                })
+                                if(alert_resp === 'replace'){
+                                    overwrite = true;
+                                }else if(alert_resp === 'cancel'){
+                                    // enable parent window
+                                    $(el_filedialog_window).find('.window-disable-mask, .busy-indicator').hide();
+                                    return;
+                                }
+                            }
+                            else{
+                                // show error
+                                await UIAlert({
+                                    message: err.message ?? "Upload failed.",
+                                    parent_uuid: $(el_filedialog_window).attr('data-element_uuid'),
+                                });
+                                // enable parent window
+                                $(el_filedialog_window).find('.window-disable-mask, .busy-indicator').hide();
+                                return;
+                            }
+                        }
+                    }
+                }
+
+                // done
+                let busy_duration = (Date.now() - busy_init_ts);
+                if( busy_duration >= busy_indicator_hide_delay){
+                    $(el_filedialog_window).close();   
+                }else{
+                    setTimeout(() => {
+                        // close this dialog
+                        $(el_filedialog_window).close();  
+                    }, Math.abs(busy_indicator_hide_delay - busy_duration));
+                }
+            }
+        });
+    }
+    //--------------------------------------------------------
+    // saveToPictures/Desktop/Documents/Videos/Audio/AppData
+    //--------------------------------------------------------
+    else if((event.data.msg === 'saveToPictures' || event.data.msg === 'saveToDesktop' || event.data.msg === 'saveToAppData' || 
+            event.data.msg === 'saveToDocuments' || event.data.msg === 'saveToVideos' || event.data.msg === 'saveToAudio')){
+        let target_path;
+        let create_missing_ancestors = false;
+
+        if(event.data.msg === 'saveToPictures')
+            target_path = path.join(pictures_path, event.data.filename);
+        else if(event.data.msg === 'saveToDesktop')
+            target_path = path.join(desktop_path, event.data.filename);
+        else if(event.data.msg === 'saveToDocuments')
+            target_path = path.join(documents_path, event.data.filename);
+        else if(event.data.msg === 'saveToVideos')
+            target_path = path.join(videos_path, event.data.filename);
+        else if(event.data.msg === 'saveToAudio')
+            target_path = path.join(audio_path, event.data.filename);
+        else if(event.data.msg === 'saveToAppData'){
+            target_path = path.join(appdata_path, app_uuid, event.data.filename);
+            create_missing_ancestors = true;
+        }
+        //auth
+        if(!is_auth() && !(await UIWindowSignup({referrer: app_name})))
+            return;
+
+        let item_with_same_name_already_exists = true;
+        let overwrite = false;
+
+        // -------------------------------------
+        // URL
+        // -------------------------------------
+        if(event.data.url){
+            let overwrite = false;
+            // download progress tracker
+            let dl_op_id = operation_id++;
+
+            // upload progress tracker defaults
+            window.progress_tracker[dl_op_id] = [];
+            window.progress_tracker[dl_op_id][0] = {};
+            window.progress_tracker[dl_op_id][0].total = 0;
+            window.progress_tracker[dl_op_id][0].ajax_uploaded = 0;
+            window.progress_tracker[dl_op_id][0].cloud_uploaded = 0;
+
+            let item_with_same_name_already_exists = true;
+            while(item_with_same_name_already_exists){
+                const res = await download({
+                    url: event.data.url, 
+                    name: path.basename(target_path),
+                    dest_path: path.dirname(target_path),
+                    auth_token: auth_token, 
+                    api_origin: api_origin,
+                    dedupe_name: true,
+                    overwrite: false,
+                    operation_id: dl_op_id,
+                    item_upload_id: 0,
+                    success: function(res){
+                    },
+                    error: function(err){
+                        UIAlert(err && err.message ? err.message : "Download failed.");
+                    }
+                });
+                item_with_same_name_already_exists = false;
+            }
+        }
+        // -------------------------------------
+        // File
+        // -------------------------------------
+        else{
+            let file_to_upload = new File([event.data.content], path.basename(target_path));
+            
+            while(item_with_same_name_already_exists){
+                if(overwrite)
+                    item_with_same_name_already_exists = false;
+                try{
+                    const res = await puter.fs.write(target_path, file_to_upload, {
+                        dedupeName: true,
+                        overwrite: false,
+                        createMissingAncestors: create_missing_ancestors,
+                    });
+                    item_with_same_name_already_exists = false;
+                    let file_signature = await puter.fs.sign(app_uuid, {uid: res.uid, action: 'write'});
+                    file_signature = file_signature.items;
+
+                    target_iframe.contentWindow.postMessage({
+                        msg: "fileSaved", 
+                        original_msg_id: msg_id, 
+                        filename: res.name,
+                        saved_file: {
+                            name: file_signature.fsentry_name,
+                            readURL: file_signature.read_url,
+                            writeURL: file_signature.write_url,
+                            metadataURL: file_signature.metadata_url,
+                            uid: file_signature.uid,
+                            path: `~/` + res.path.split('/').slice(2).join('/'),
+                        },
+                    }, '*');
+                    $(target_iframe).get(0).focus({preventScroll:true});
+                }
+                catch(err){
+                    if(err.code === 'item_with_same_name_exists'){
+                        const alert_resp = await UIAlert({
+                            message: `<strong>${html_encode(err.entry_name)}</strong> already exists.`,
+                            buttons:[
+                                {
+                                    label: 'Replace',
+                                    type: 'primary',
+                                },
+                                {
+                                    label: 'Cancel'
+                                },
+                            ],
+                            parent_uuid: event.data.appInstanceID,
+                        })
+                        if(alert_resp === 'Replace'){
+                            overwrite = true;
+                        }else if(alert_resp === 'Cancel'){
+                            item_with_same_name_already_exists = false;
+                        }
+                    }else{
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    //--------------------------------------------------------
+    // exit
+    //--------------------------------------------------------
+    else if(event.data.msg === 'exit'){
+        $(`.window[data-element_uuid="${event.data.appInstanceID}"]`).close({bypass_iframe_messaging: true});
+    }
+});

src/UI/UIAlert.js

@@ -0,0 +1,96 @@
+import UIWindow from './UIWindow.js'
+
+function UIAlert(options){
+    // set sensible defaults
+    if(arguments.length > 0){
+        // if first argument is a string, then assume it is the message
+        if(isString(arguments[0])){
+            options = {};
+            options.message = arguments[0];
+        }
+        // if second argument is an array, then assume it is the buttons
+        if(arguments[1] && Array.isArray(arguments[1])){
+            options.buttons = arguments[1];
+        }
+    }
+
+    return new Promise(async (resolve) => {
+        // provide an 'OK' button if no buttons are provided
+        if(!options.buttons || options.buttons.length === 0){
+            options.buttons = [
+                {label: 'OK', value: true, type: 'primary'}
+            ]
+        }
+
+        // set body icon
+        options.body_icon = options.body_icon ?? window.icons['warning-sign.svg'];
+        if(options.type === 'success')
+            options.body_icon = window.icons['c-check.svg'];
+
+        let h = '';
+        // icon
+        h += `<img class="window-alert-icon" src="${html_encode(options.body_icon)}">`;
+        // message
+        h += `<div class="window-alert-message">${options.message}</div>`;
+        // buttons
+        if(options.buttons && options.buttons.length > 0){
+            h += `<div style="overflow:hidden; margin-top:20px;">`;
+            for(let y=0; y<options.buttons.length; y++){
+                h += `<button class="button button-block button-${html_encode(options.buttons[y].type)} alert-resp-button" 
+                                data-label="${html_encode(options.buttons[y].label)}"
+                                data-value="${html_encode(options.buttons[y].value ?? options.buttons[y].label)}"
+                                ${options.buttons[y].type === 'primary' ? 'autofocus' : ''}
+                                >${html_encode(options.buttons[y].label)}</button>`;
+            }
+            h += `</div>`;
+        }
+
+        const el_window = await UIWindow({
+            title: null,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            message: options.message,
+            body_icon: options.body_icon,
+            backdrop: options.backdrop ?? false,
+            is_resizable: false,
+            is_droppable: false,
+            has_head: false,
+            stay_on_top: options.stay_on_top ?? false,
+            selectable_body: false,
+            draggable_body: options.draggable_body ?? true,
+            allow_context_menu: false,
+            show_in_taskbar: false,
+            window_class: 'window-alert',
+            dominant: true,
+            body_content: h,
+            width: 350,
+            parent_uuid: options.parent_uuid,
+            ...options.window_options,
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '20px',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }
+        });
+        // focus to primary btn
+        $(el_window).find('.button-primary').focus();
+
+        // --------------------------------------------------------
+        // Button pressed
+        // --------------------------------------------------------
+        $(el_window).find('.alert-resp-button').on('click',  async function(event){
+            event.preventDefault(); 
+            event.stopPropagation();
+            resolve($(this).attr('data-value'));
+            $(el_window).close();
+            return false;
+        })
+    })
+}
+
+export default UIAlert;

src/UI/UIContextMenu.js

@@ -0,0 +1,211 @@
+function UIContextMenu(options){
+    $('.window-active .window-app-iframe').css('pointer-events', 'none');
+
+    const menu_id = global_element_id++;
+
+    let h = '';
+    h += `<div 
+                id="context-menu-${menu_id}" 
+                data-is-submenu="${options.is_submenu ? 'true' : 'false'}"
+                data-element-id="${menu_id}"
+                data-id="${options.id ?? ''}"
+                ${options.parent_id ? `data-parent-id="${options.parent_id}"` : ``}
+                ${!options.parent_id && options.parent_element ? `data-parent-id="${$(options.parent_element).attr('data-element-id')}"` : ``}
+                class="context-menu context-menu-active ${options.is_submenu ? 'context-menu-submenu-open' : ''}"
+            >`;
+            
+        for(let i=0; i < options.items.length; i++){
+            // item
+            if(!options.items[i].is_divider && options.items[i] !== '-'){
+                // single item
+                if(options.items[i].items === undefined){
+                    h += `<li data-action="${i}" 
+                            class="context-menu-item ${options.items[i].disabled ? ' context-menu-item-disabled' : ''}"
+                            >`;
+                        // icon
+                        h += `<span class="context-menu-item-icon">${options.items[i].icon ?? ''}</span>`;
+                        h += `<span class="context-menu-item-icon-active">${options.items[i].icon_active ?? (options.items[i].icon ?? '')}</span>`;
+                        // label
+                        h += `<span class="contextmenu-label">${options.items[i].html}</span>`;
+                        h += `<span class="contextmenu-label-active">${options.items[i].html_active ?? options.items[i].html}</span>`;
+
+                    h += `</li>`;
+                }
+                // submenu
+                else{
+                    h += `<li data-action="${i}" 
+                              data-menu-id="${menu_id}-${i}"
+                              data-has-submenu="true"
+                              data-parent-element-id="${menu_id}"
+                              class="context-menu-item-submenu context-menu-item${options.items[i].disabled ? ' context-menu-item-disabled' : ''}"
+                            >`;
+                        // icon
+                        h += `<span class="context-menu-item-icon">${options.items[i].icon ?? ''}</span>`;
+                        h += `<span class="context-menu-item-icon-active">${options.items[i].icon_active ?? (options.items[i].icon ?? '')}</span>`;
+                        // label
+                        h += `${html_encode(options.items[i].html)}`;
+                        // arrow
+                        h += `<img class="submenu-arrow" src="${html_encode(window.icons['chevron-right.svg'])}"><img class="submenu-arrow submenu-arrow-active" src="${html_encode(window.icons['chevron-right-active.svg'])}">`;
+                    h += `</li>`;
+                }
+            }
+            // divider
+            else if(options.items[i].is_divider || options.items[i] === '-')
+                h += `<li class="context-menu-divider"><hr></li>`;
+        }
+    h += `</div>`
+    $('body').append(h)
+
+    const contextMenu = document.getElementById(`context-menu-${menu_id}`);
+    const menu_width = $(contextMenu).width();
+    const menu_height = $(contextMenu).outerHeight();
+    let start_x, start_y;
+    //--------------------------------
+    // Auto position
+    //--------------------------------
+    if(!options.position){
+        if(isMobile.phone || isMobile.tablet){
+            start_x = window.last_touch_x;
+            start_y = window.last_touch_y;
+
+        }else{
+            start_x = window.mouseX;
+            start_y = window.mouseY;
+        }
+    }
+    //--------------------------------
+    // custom position
+    //--------------------------------
+    else{
+        start_x = options.position.left;
+        start_y = options.position.top;
+    }
+
+    // X position
+    let x_pos;
+    if( start_x + menu_width > window.innerWidth){
+        x_pos = start_x - menu_width;
+        // if this is a child menu, the width of parent must be also considered
+        if(options.parent_id){
+            x_pos -= $(`.context-menu[data-element-id="${options.parent_id}"]`).width() + 30;
+        }
+    }else
+        x_pos = start_x
+
+    // Y position
+    let y_pos;
+    // is the menu going to go out of the window from the bottom?
+    if( (start_y + menu_height) > (window.innerHeight - taskbar_height - 10))
+        y_pos = window.innerHeight - menu_height - taskbar_height - 10;
+    else
+        y_pos = start_y;
+
+    // Show ContextMenu
+    $(contextMenu).delay(100).show(0)
+    // In the right position (the mouse)
+    .css({
+        top: y_pos + "px",
+        left: x_pos + "px"
+    });
+
+    // mark other context menus as inactive
+    $('.context-menu').not(contextMenu).removeClass('context-menu-active');
+
+    // An item is clicked
+    $(`#context-menu-${menu_id} > li:not(.context-menu-item-disabled)`).on('click', function (e) {
+        
+        // onClick
+        if(options.items[$(this).attr("data-action")].onClick && typeof options.items[$(this).attr("data-action")].onClick === 'function'){
+            let event = e;
+            event.value = options.items[$(this).attr("data-action")]['val'] ?? undefined;
+            options.items[$(this).attr("data-action")].onClick(event);
+        }
+        // close menu and, if exists, its parent
+        if(!$(this).hasClass('context-menu-item-submenu')){
+            $(`#context-menu-${menu_id}, .context-menu[data-element-id="${$(this).closest('.context-menu').attr('data-parent-id')}"]`).fadeOut(200, function(){
+                $(contextMenu).remove();
+            });
+        }
+
+        return false;
+    });
+
+    // when mouse is over an item    
+    $(contextMenu).find('.context-menu-item').on('mouseover', function (e) {
+        // mark other items as inactive
+        $(contextMenu).find('.context-menu-item').removeClass('context-menu-item-active');
+        // mark this item as active
+        $(this).addClass('context-menu-item-active');
+        // close any submenu that doesn't belong to this item
+        $(`.context-menu[data-parent-id="${menu_id}"]`).remove();
+        // mark this context menu as active
+        $(contextMenu).addClass('context-menu-active');
+    })
+
+    // open submenu if applicable
+    $(`#context-menu-${menu_id} > li.context-menu-item-submenu`).on('mouseover', function (e) {
+        
+        // open submenu only if it's not already open
+        if($(`.context-menu[data-id="${menu_id}-${$(this).attr('data-action')}"]`).length === 0){
+            let item_rect_box = this.getBoundingClientRect();
+            
+            // close other submenus
+            $(`.context-menu[parent-element-id="${menu_id}"]`).remove();
+
+            // open the new submenu
+            UIContextMenu({ 
+                items: options.items[parseInt($(this).attr('data-action'))].items,
+                parent_id: menu_id,
+                is_submenu: true,
+                id: menu_id + '-' + $(this).attr('data-action'),
+                position:{
+                    top: item_rect_box.top - 5,
+                    left: x_pos + item_rect_box.width + 15,
+                } 
+            })
+        }
+        return false;    
+    });
+
+    // useful in cases such as where a menue item is over a window, this prevents from the mousedown event
+    // reaching the window underneath
+    $(`#context-menu-${menu_id} > li:not(.context-menu-item-disabled)`).on('mousedown', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    })
+
+    //disable parent scroll
+    if(options.parent_element){
+        $(options.parent_element).css('overflow', 'hidden');
+        $(options.parent_element).parent().addClass('children-have-open-contextmenu');
+        $(options.parent_element).addClass('has-open-contextmenu');
+    }
+
+    $(contextMenu).on("remove", function () {
+        // when removing, make parent scrollable again
+        if(options.parent_element){
+            $(options.parent_element).parent().removeClass('children-have-open-contextmenu');
+
+            $(options.parent_element).css('overflow', 'scroll');
+            $(options.parent_element).removeClass('has-open-contextmenu');
+            if($(options.parent_element).hasClass('taskbar-item')){
+                make_taskbar_sortable()
+            }
+        }
+    })
+    $(contextMenu).on("contextmenu", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    })    
+}
+
+window.select_ctxmenu_item = function ($ctxmenu_item){
+    // remove active class from other items
+    $($ctxmenu_item).siblings('.context-menu-item').removeClass('context-menu-item-active');
+    // add active class to the selected item
+    $($ctxmenu_item).addClass('context-menu-item-active');
+}
+
+export default UIContextMenu;

src/UI/UINotification.js

@@ -0,0 +1,57 @@
+function UINotification(options){
+    global_element_id++;
+
+    options.content = options.content ?? '';
+
+    let h = '';
+    h += `<div id="ui-notification__${global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
+        h += `<img class="notification-close" src="${html_encode(window.icons['close.svg'])}">`;
+        h += options.content;
+    h += `</div>`;
+
+    $('body').append(h);
+
+
+    const el_notification = document.getElementById(`ui-notification__${global_element_id}`);
+
+    $(el_notification).show(0, function(e){
+        // options.onAppend()
+        if(options.onAppend && typeof options.onAppend === 'function'){
+            options.onAppend(el_notification);
+        }
+    })
+
+    // Show Notification
+    $(el_notification).delay(100).show(0).
+    // In the right position (the mouse)
+    css({
+        top: toolbar_height + 15,
+    });
+
+    return el_notification;
+}
+
+$(document).on('click', '.notification', function(e){
+    if($(e.target).hasClass('notification')){
+        if(options.click && typeof options.click === 'function'){
+            options.click(e);
+        }
+        window.close_notification(e.target);
+    }else{
+        window.close_notification($(e.target).closest('.notification'));
+    }
+});
+
+$(document).on('click', '.notification-close', function(e){
+    window.close_notification($(e.target).closest('.notification'));
+});
+
+
+window.close_notification = function(el_notification){
+    $(el_notification).addClass('animate__fadeOutRight');
+    setTimeout(function(){
+        $(el_notification).remove();
+    }, 500);
+}
+
+export default UINotification;

src/UI/UIPopover.js

@@ -0,0 +1,85 @@
+// todo change to apps popover or sth
+function UIPopover(options){
+    // skip if popover already open
+    if(options.parent_element && $(options.parent_element).hasClass('has-open-popover'))
+        return;
+
+    $('.window-active .window-app-iframe').css('pointer-events', 'none');
+
+    global_element_id++;
+
+    options.content = options.content ?? '';
+
+    let h = '';
+    h += `<div id="popover-${global_element_id}" class="popover">`;
+        h += options.content;
+    h += `</div>`;
+
+    $('body').append(h);
+
+
+    const el_popover = document.getElementById(`popover-${global_element_id}`);
+
+    $(el_popover).show(0, function(e){
+        // options.onAppend()
+        if(options.onAppend && typeof options.onAppend === 'function'){
+            options.onAppend(el_popover);
+        }
+    })
+
+    let x_pos;
+    let y_pos;
+
+    if(options.parent_element){
+        $(options.parent_element).addClass('has-open-popover');
+    }
+    $(el_popover).on("remove", function () {
+        if(options.parent_element){
+            $(options.parent_element).removeClass('has-open-popover');
+        }
+    })
+
+    function position_popover(){
+        // X position
+        const popover_width = options.width ?? $(el_popover).width();
+        if(options.center_horizontally){
+            x_pos = window.innerWidth/2 - popover_width/2 - 15;
+        }else{
+            if(options.position === 'bottom' || options.position === 'top')
+                x_pos = options.left ?? ($(options.snapToElement).offset().left - (popover_width/ 2) + 10);
+            else
+                x_pos = options.left ?? ($(options.snapToElement).offset().left + 5);
+        }
+
+        // Y position
+        const popover_height = options.height ?? $(el_popover).height();
+        if(options.center_horizontally){
+            y_pos = options.top ?? (window.innerHeight - (taskbar_height + popover_height + 10));
+        }else{
+            y_pos = options.top ?? ($(options.snapToElement).offset().top + $(options.snapToElement).height() + 5);
+        }
+
+        $(el_popover).css({
+            left: x_pos + "px",
+            top: y_pos + "px",
+        });
+    }
+    position_popover();
+
+    // If the window is resized, reposition the popover
+    $(window).on('resize', function(){
+        position_popover();
+    });
+    
+    // Show Popover
+    $(el_popover).delay(100).show(0).
+    // In the right position (the mouse)
+    css({
+        left: x_pos + "px",
+        top: y_pos + "px",
+    });
+
+    return el_popover;
+}
+
+export default UIPopover;

src/UI/UIPrompt.js

@@ -0,0 +1,103 @@
+import UIWindow from './UIWindow.js'
+
+function UIPrompt(options){
+    // set sensible defaults
+    if(arguments.length > 0){
+        // if first argument is a string, then assume it is the message
+        if(isString(arguments[0])){
+            options = {};
+            options.message = arguments[0];
+        }
+        // if second argument is an array, then assume it is the buttons
+        if(arguments[1] && Array.isArray(arguments[1])){
+            options.buttons = arguments[1];
+        }
+    }
+
+    return new Promise(async (resolve) => {
+        // provide an 'OK' button if no buttons are provided
+        if(!options.buttons || options.buttons.length === 0){
+            options.buttons = [
+                {label: 'Cancel', value: false, type: 'default'},
+                {label: 'OK', value: true, type: 'primary'},
+            ]
+        }
+
+        let h = '';
+        // message
+        h += `<div class="window-prompt-message">${options.message}</div>`;
+        // prompt
+        h += `<div class="window-alert-prompt" style="margin-top: 20px;">`;
+            h += `<input type="text" class="prompt-input" placeholder="${options.placeholder ?? ''}" value="${options.value ?? ''}">`;
+        h += `</div>`;
+        // buttons
+        if(options.buttons && options.buttons.length > 0){
+            h += `<div style="overflow:hidden; margin-top:20px; float:right;">`;
+                h += `<button class="button button-default prompt-resp-button prompt-resp-btn-cancel" data-label="Cancel" style="padding: 0 20px;">Cancel</button>`;
+                h += `<button class="button button-primary prompt-resp-button prompt-resp-btn-ok" data-label="OK" data-value="true" autofocus>OK</button>`;
+            h += `</div>`;
+        }
+
+        const el_window = await UIWindow({
+            title: null,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            message: options.message,
+            backdrop: options.backdrop ?? false,
+            is_resizable: false,
+            is_droppable: false,
+            has_head: false,
+            stay_on_top: options.stay_on_top ?? false,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            show_in_taskbar: false,
+            window_class: 'window-alert',
+            dominant: true,
+            body_content: h,
+            width: 450,
+            parent_uuid: options.parent_uuid,
+            onAppend: function(this_window){
+                setTimeout(function(){
+                    $(this_window).find('.prompt-input').get(0).focus({preventScroll:true});
+                }, 30);
+            },
+            ...options.window_options,
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '20px',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }
+        });
+        // focus to primary btn
+        $(el_window).find('.button-primary').focus();
+
+        // --------------------------------------------------------
+        // Button pressed
+        // --------------------------------------------------------
+        $(el_window).find('.prompt-resp-button').on('click',  async function(event){
+            event.preventDefault(); 
+            event.stopPropagation();
+            if($(this).attr('data-value') === 'true'){
+                resolve($(el_window).find('.prompt-input').val());
+            }else{
+                resolve(false);
+            }
+            $(el_window).close();
+            return false;
+        })
+
+        $(el_window).find('.prompt-input').on('keyup', async function(e){
+            if(e.keyCode === 13){
+                $(el_window).find('.prompt-resp-btn-ok').click();
+            }
+        })
+    })
+}
+
+export default UIPrompt;

src/UI/UITaskbar.js

@@ -0,0 +1,286 @@
+import UITaskbarItem from './UITaskbarItem.js'
+import UIPopover from './UIPopover.js'
+
+async function UITaskbar(options){
+    global_element_id++;
+
+    options = options ?? {};
+    options.content = options.content ?? '';
+
+    // get launch apps
+    $.ajax({
+        url: api_origin + "/get-launch-apps",
+        type: 'GET',
+        async: true,
+        contentType: "application/json",
+        headers: {
+            "Authorization": "Bearer "+auth_token
+        },
+        success: function (apps){ 
+            window.launch_apps = apps;
+        }
+    });
+
+    let h = '';
+    h += `<div id="ui-taskbar_${global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;"><span id='clock'></span></div>`;
+
+    $('.desktop').append(h);
+
+    //---------------------------------------------
+    // add `Start` to taskbar
+    //---------------------------------------------
+    UITaskbarItem({
+        icon: window.icons['start.svg'],
+        name: 'Start',
+        sortable: false,
+        keep_in_taskbar: true,
+        disable_context_menu: true,
+        onClick: async function(item){
+            // skip if popover already open
+            if($(item).hasClass('has-open-popover'))
+                return;
+
+            // show popover
+            let popover = UIPopover({
+                content: `<div class="launch-popover hide-scrollbar"><span class="close-launch-popover">✕</span></div>`,
+                snapToElement: item,
+                parent_element: item,
+                width: 500,
+                height: 500,
+                center_horizontally: true,
+            });
+
+            // In the rare case that launch_apps is not populated yet, get it from the server
+            // then populate the popover
+            if(!launch_apps || !launch_apps.recent || launch_apps.recent.length === 0){
+                // get launch apps
+                launch_apps = await $.ajax({
+                    url: api_origin + "/get-launch-apps",
+                    type: 'GET',
+                    async: true,
+                    contentType: "application/json",
+                    headers: {
+                        "Authorization": "Bearer "+auth_token
+                    },
+                });
+            }
+            
+            let apps_str = '';
+
+            apps_str += `<div style="margin-bottom: 10px; padding: 5px; position: relative;">`
+                apps_str += `<input style="background-image:url(${window.icons['magnifier-outline.svg']});" class="launch-search">`;
+                apps_str += `<img class="launch-search-clear" src="${window.icons['close.svg']}">`;
+            apps_str += `</div>`;
+            // -------------------------------------------
+            // Recent apps
+            // -------------------------------------------
+            if(launch_apps.recent.length > 0){
+                // heading
+                apps_str += `<h1 class="start-section-heading start-section-heading-recent">Recent</h1>`;
+
+                // apps
+                apps_str += `<div class="launch-apps-recent">`;
+                for (let index = 0; index < window.launch_recent_apps_count && index < launch_apps.recent.length; index++) {
+                    const app_info = launch_apps.recent[index];
+                    apps_str += `<div title="${html_encode(app_info.title)}" data-name="${html_encode(app_info.name)}" class="start-app-card">`;
+                        apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
+                            apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
+                            apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
+                        apps_str += `</div>`;
+                    apps_str += `</div>`;
+                }
+                apps_str += `</div>`;
+            }
+            // -------------------------------------------
+            // Reccomended apps
+            // -------------------------------------------
+            if(launch_apps.recommended.length > 0){
+                // heading
+                apps_str += `<h1 class="start-section-heading start-section-heading-recommended" style="${launch_apps.recent.length > 0 ? 'padding-top: 30px;' : ''}">Recommended</h1>`;
+                
+                // apps
+                apps_str += `<div class="launch-apps-recommended">`;
+                for (let index = 0; index < launch_apps.recommended.length; index++) {
+                    const app_info = launch_apps.recommended[index];
+                    apps_str += `<div title="${html_encode(app_info.title)}" data-name="${html_encode(app_info.name)}" class="start-app-card">`;
+                        apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
+                            apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
+                            apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
+                        apps_str += `</div>`;
+                    apps_str += `</div>`;
+                }
+                apps_str += `</div>`;
+            }
+
+            // add apps to popover
+            $(popover).find('.launch-popover').append(apps_str);
+
+            // focus on search input only if not on mobile
+            if(!isMobile.phone)
+                $(popover).find('.launch-search').focus();
+
+            // make apps draggable
+            $(popover).find('.start-app').draggable({
+                appendTo: "body",
+                helper: "clone",
+                revert: "invalid",
+                connectToSortable: ".taskbar",
+                //containment: "document",
+                zIndex: parseInt($(popover).css('z-index')) + 1,
+                scroll: false,
+                distance: 5,
+                revertDuration: 100,
+                helper: 'clone',
+                cursorAt: { left: 18, top: 20 },
+                start: function(event, ui){
+                },
+                drag: function(event, ui){
+                },
+                stop: function(){
+                }
+            });
+        }
+    });            
+
+    //---------------------------------------------
+    // add `Explorer` to the taskbar
+    //---------------------------------------------
+    UITaskbarItem({
+        icon: window.icons['folders.svg'],
+        app: 'explorer',
+        name: 'Explorer',
+        sortable: false,
+        keep_in_taskbar: true,
+        lock_keep_in_taskbar: true,
+        onClick: function(){
+            let open_window_count = parseInt($(`.taskbar-item[data-app="explorer"]`).attr('data-open-windows'));
+            if(open_window_count === 0){
+                launch_app({ name: 'explorer', path: window.home_path});
+            }else{
+                return false;
+            }
+        }
+    })
+
+    //---------------------------------------------
+    // Add other useful apps to the taskbar
+    //---------------------------------------------
+    if(window.user.taskbar_items && window.user.taskbar_items.length > 0){
+        for (let index = 0; index < window.user.taskbar_items.length; index++) {
+            const app_info = window.user.taskbar_items[index];
+            // add taskbar item for each app
+            UITaskbarItem({
+                icon: app_info.icon,
+                app: app_info.name,
+                name: app_info.title,
+                keep_in_taskbar: true,
+                onClick: function(){
+                    let open_window_count = parseInt($(`.taskbar-item[data-app="${app_info.name}"]`).attr('data-open-windows'));
+                    if(open_window_count === 0){
+                        launch_app({
+                            name: app_info.name,
+                        }) 
+                    }else{
+                        return false;
+                    }
+                }
+            });
+        }
+    }
+
+    //---------------------------------------------
+    // add `Trash` to the taskbar
+    //---------------------------------------------
+    const trash = await puter.fs.stat(trash_path);
+    if(window.socket){
+        window.socket.emit('trash.is_empty', {is_empty: trash.is_empty});
+    }
+
+    UITaskbarItem({
+        icon: trash.is_empty ? window.icons['trash.svg'] : window.icons['trash-full.svg'],
+        app: 'trash',
+        name: 'Trash',
+        sortable: false,
+        keep_in_taskbar: true,
+        lock_keep_in_taskbar: true,
+        onClick: function(){
+            let open_windows = $(`.window[data-path="${html_encode(trash_path)}"]`);
+            if(open_windows.length === 0){
+                launch_app({ name: 'explorer', path: window.trash_path});
+            }else{
+                open_windows.focusWindow();
+            }
+        },
+        onItemsDrop: function(items){
+            move_items(items, trash_path);
+        }
+    })
+
+    make_taskbar_sortable();
+}
+
+window.make_taskbar_sortable = function(){
+    //-------------------------------------------
+    // Taskbar is sortable
+    //-------------------------------------------
+    $('.taskbar').sortable({
+        axis: "x",
+        items: '.taskbar-item-sortable:not(.has-open-contextmenu)',
+        cancel: '.has-open-contextmenu',
+        placeholder: "taskbar-item-sortable-placeholder",
+        helper : 'clone',
+        distance: 5,
+        revert: 10,
+        receive: function(event, ui){
+            if(!$(ui.item).hasClass('taskbar-item')){
+                // if app is already in taskbar, cancel
+                if($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0){
+                    $(this).sortable('cancel');
+                    $('.taskbar .start-app').remove();
+                    return;
+                }else{
+                }
+            }
+        },
+        update: function(event, ui){
+            if(!$(ui.item).hasClass('taskbar-item')){
+                // if app is already in taskbar, cancel
+                if($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0){
+                    $(this).sortable('cancel');
+                    $('.taskbar .start-app').remove();
+                    return;
+                }
+                
+                let item = UITaskbarItem({
+                    icon: $(ui.item).attr('data-app-icon'),
+                    app: $(ui.item).attr('data-app-name'),
+                    name: $(ui.item).attr('data-app-title'),
+                    append_to_taskbar: false,
+                    keep_in_taskbar: true,
+                    onClick: function(){
+                        let open_window_count = parseInt($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).attr('data-open-windows'));
+                        if(open_window_count === 0){
+                            launch_app({
+                                name: $(ui.item).attr('data-app-name'),
+                            }) 
+                        }else{
+                            return false;
+                        }
+                    }
+                });
+                let el = ($(item).detach())
+                $(el).insertAfter(ui.item);
+                // $(ui.item).insertBefore(`<h1>Hello!</h1>`);
+                $(el).show();
+                $(ui.item).removeItems();  
+                update_taskbar();  
+            }
+            // only proceed to update DB if the item sorted was a pinned item otherwise no point in updating the taskbar in DB
+            else if($(ui.item).attr('data-keep-in-taskbar') === 'true'){
+                update_taskbar();
+            }
+        },
+    });
+}
+
+export default UITaskbar;

src/UI/UITaskbarItem.js

@@ -0,0 +1,346 @@
+import UIContextMenu from './UIContextMenu.js';
+
+let tray_item_id = 1;
+
+function UITaskbarItem(options){
+    let h = ``;
+    tray_item_id++;
+    options.sortable = options.sortable ?? true;
+    options.open_windows_count = options.open_windows_count ?? 0;
+    options.lock_keep_in_taskbar = options.lock_keep_in_taskbar ?? false;
+    options.append_to_taskbar = options.append_to_taskbar ?? true;
+    const element_id = global_element_id++;
+
+    h += `<div  class = "taskbar-item ${options.sortable ? 'taskbar-item-sortable' : ''} disable-user-select"
+                id = "taskbar-item-${tray_item_id}"
+                data-taskbar-item-id = "${tray_item_id}"
+                data-element-id = "${html_encode(element_id)}"
+                data-name = "${html_encode(options.name)}"
+                data-app = "${html_encode(options.app)}"
+                data-keep-in-taskbar = "${html_encode(options.keep_in_taskbar ?? 'false')}"
+                data-open-windows="${(options.open_windows_count)}"
+                title = "${html_encode(options.name)}"
+                style= "${options.style ? html_encode(options.style) : ''}"
+            >`;
+        let icon = options.icon ? options.icon : window.icons['app.svg'];
+        if(options.app === 'explorer')
+            icon = window.icons['folders.svg'];
+
+        // taskbar icon
+        h += `<div class="taskbar-icon">`;
+            h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
+        h += `</div>`;
+
+        // active indicator
+        if(options.app !== 'apps')
+            h += `<span class="active-taskbar-indicator"></span>`;
+    h += `</div>`;
+
+    if(options.append_to_taskbar)
+        $('.taskbar').append(h);
+    else
+        $('body').prepend(h);
+
+    const el_taskbar_item = document.querySelector(`#taskbar-item-${tray_item_id}`);
+
+    // fade in the taskbar item
+    $(el_taskbar_item).show(50);
+
+    $(el_taskbar_item).on("click", function(){
+        // If this item has an open context menu, don't do anything
+        if($(el_taskbar_item).hasClass('has-open-contextmenu'))
+            return;
+
+        if(options.onClick === undefined || options.onClick(el_taskbar_item) === false){
+            // re-show each window in this app group
+            $(`.window[data-app="${options.app}"]`).showWindow();
+        }
+    })
+
+    $(el_taskbar_item).on('contextmenu taphold', function(e){
+        // seems like the only way to stop sortable is to destroy it
+        if(options.sortable) {
+            $('.taskbar').sortable('destroy');
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        // If context menu is disabled on this item, return
+        if(options.disable_context_menu)
+            return;
+
+        // don't allow context menu to open if it's already open
+        if($(el_taskbar_item).hasClass('has-open-contextmenu'))
+            return;
+
+        const menu_items =[];
+        const open_windows = parseInt($(el_taskbar_item).attr('data-open-windows'));        
+        // -------------------------------------------
+        // List of open windows belonging to this app
+        // -------------------------------------------
+        $(`.window[data-app="${options.app}"]`).each(function(){
+            menu_items.push({
+                html: $(this).find(`.window-head-title`).html(),
+                val: $(this).attr('data-id'),
+                onClick: function(e){
+                    $(`.window[data-id="${e.value}"]`).showWindow();
+                }
+            })
+        })
+        // -------------------------------------------
+        // divider
+        // -------------------------------------------
+        if(menu_items.length > 0)
+            menu_items.push('-');
+
+        //------------------------------------------
+        // New Window
+        //------------------------------------------
+        if(options.app){
+            menu_items.push({
+                html: 'New Window',
+                val: $(this).attr('data-id'),
+                onClick: function(){
+                    launch_app({
+                        name: options.app,
+                        maximized: (isMobile.phone || isMobile.tablet),
+                    })
+                }
+            })
+        }
+        //------------------------------------------
+        // Empty Trash
+        //------------------------------------------
+        if(options.app === 'trash' && options.name === 'Trash'){
+            // divider
+            menu_items.push('-');
+
+            // Empty Trash menu item
+            menu_items.push({
+                html: 'Empty Trash',
+                val: $(this).attr('data-id'),
+                onClick: async function(){
+                    empty_trash();
+                }
+            })
+        }
+
+        //------------------------------------------
+        // Remove from Taskbar
+        //------------------------------------------
+        if(options.keep_in_taskbar && !options.lock_keep_in_taskbar){
+            menu_items.push({
+                html: 'Remove from Taskbar',
+                val: $(this).attr('data-id'),
+                onClick: function(){
+                    $(el_taskbar_item).attr('data-keep-in-taskbar', 'false');
+                    if($(el_taskbar_item).attr('data-open-windows') === '0'){
+                        remove_taskbar_item(el_taskbar_item);
+                    }
+                    update_taskbar();
+                    options.keep_in_taskbar = false;
+                }
+            })
+        }
+        //------------------------------------------
+        // Keep in Taskbar
+        //------------------------------------------
+        else if(!options.keep_in_taskbar){
+            menu_items.push({
+                html: 'Keep in Taskbar',
+                val: $(this).attr('data-id'),
+                onClick: function(){
+                    $(el_taskbar_item).attr('data-keep-in-taskbar', 'true');
+                    update_taskbar();
+                    options.keep_in_taskbar = true;
+                }
+            })  
+        }
+
+        if(open_windows > 0){
+            // -------------------------------------------
+            // divider
+            // -------------------------------------------
+            menu_items.push('-');
+            // -------------------------------------------
+            // Show All Windows
+            // -------------------------------------------
+            menu_items.push({
+                html: "Show All Windows",
+                onClick: function(){
+                    if(open_windows > 0)
+                        $(el_taskbar_item).trigger('click');
+                }
+            })
+            // -------------------------------------------
+            // Hide All Windows
+            // -------------------------------------------
+            menu_items.push({
+                html: "Hide All Windows",
+                onClick: function(){
+                    if(open_windows > 0)
+                        $(`.window[data-app="${options.app}"]`).hideWindow();
+                }
+            })
+            // -------------------------------------------
+            // Close All Windows
+            // -------------------------------------------
+            menu_items.push({
+                html: "Close All Windows",
+                onClick: function(){
+                    $(`.window[data-app="${options.app}"]`).close();
+                }
+            })
+        }
+        const pos = el_taskbar_item.getBoundingClientRect();
+        UIContextMenu({
+            parent_element: el_taskbar_item,
+            position: {top: pos.top - 15, left: pos.left+5},
+            items: menu_items
+        });
+
+        return false;
+    });
+
+    $( el_taskbar_item ).tooltip({
+        items: ".taskbar:not(.children-have-open-contextmenu) .taskbar-item",
+        position: {
+            my: "center bottom-20",
+            at: "center top",
+            using: function( position, feedback ) {
+              $( this ).css( position );
+              $( "<div>" )
+                .addClass( "arrow" )
+                .addClass( feedback.vertical )
+                .addClass( feedback.horizontal )
+                .appendTo( this );
+            }
+        }    
+    });
+
+    // --------------------------------------------------------
+    // Droppable
+    // --------------------------------------------------------
+    $(el_taskbar_item).droppable({
+        accept: '.item',
+        // 'pointer' is very important because of active window tracking is based on the position of cursor.
+        tolerance: 'pointer',
+        drop: async function( event, ui ) {
+            // Check if hovering over an item that is VISIBILE
+            if($(event.target).closest('.window').attr('data-id') !== $(mouseover_window).attr('data-id'))
+                return;
+
+            // If ctrl is pressed and source is Trashed, cancel whole operation
+            if(event.ctrlKey && path.dirname($(ui.draggable).attr('data-path')) === window.trash_path)
+                return;
+
+            const items_to_move = []
+            
+            // First item
+            items_to_move.push(ui.draggable); 
+            
+            // All subsequent items
+            const cloned_items = document.getElementsByClassName('item-selected-clone');
+            for(let i =0; i<cloned_items.length; i++){
+                const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
+                if(source_item !== null)
+                    items_to_move.push(source_item);
+            }
+
+            // --------------------------------------------------------
+            // If `options.onItemsDrop` is set, call it with the items to move
+            //--------------------------------------------------------
+            if(options.onItemsDrop && typeof options.onItemsDrop === 'function'){
+                options.onItemsDrop(items_to_move);
+                return;
+            }
+            // --------------------------------------------------------
+            // If dropped on an app, open the app with the dropped item as an argument
+            //--------------------------------------------------------
+            else if(options.app){
+                // an array that hold the items to sign
+                const items_to_sign = [];
+
+                // prepare items to sign
+                for(let i=0; i < items_to_move.length; i++){
+                    items_to_sign.push({
+                        name: $(items_to_move[i]).attr('data-name'), 
+                        uid: $(items_to_move[i]).attr('data-uid'), 
+                        action: 'write', 
+                        path: $(items_to_move[i]).attr('data-path')
+                    });
+                }
+
+                // open each item
+                for (let i = 0; i < items_to_sign.length; i++) {
+                    const item = items_to_sign[i];
+                    launch_app({ 
+                        name: options.app, 
+                        file_path: item.path,
+                        // app_obj: open_item_meta.suggested_apps[0],
+                        window_title: item.name,
+                        file_uid: item.uid,
+                        // file_signature: item,
+                    });
+                }
+
+                // deselect dragged item
+                for(let i=0; i < items_to_move.length; i++)
+                    $(items_to_move[i]).removeClass('item-selected');
+            }
+
+            // Unselect directory/app if item is dropped
+            if(options.is_dir || options.app){
+                $(el_taskbar_item).removeClass('active');
+                $(el_taskbar_item).tooltip('close');
+                $('.ui-draggable-dragging .item-name, .item-selected-clone .item-name').css('opacity', 'initial')
+                $('.item-container').removeClass('item-container-transparent-border')
+            }
+
+            // Re-enable droppable on all item-container
+            $('.item-container').droppable('enable')
+
+            return false;
+        },
+        over: function(event, ui){
+            // Check hovering over an item that is VISIBILE
+            const $event_parent_win = $(event.target).closest('.window')
+            if( $event_parent_win.length > 0 && $event_parent_win.attr('data-id') !== $(mouseover_window).attr('data-id'))
+                return;
+            // Don't do anything if the dragged item is NOT a UIItem
+            if(!$(ui.draggable).hasClass('item'))
+                return;
+            // If this is a directory or an app, and an item was dragged over it, highlight it.
+            if(options.is_dir || options.app){
+                $(el_taskbar_item).addClass('active');
+                // show tooltip of this item
+                $(el_taskbar_item).tooltip().mouseover();
+                // make item name partially transparent
+                $('.ui-draggable-dragging .item-name, .item-selected-clone .item-name').css('opacity', 0.1)
+                // remove all item-container active borders
+                $('.item-container').addClass('item-container-transparent-border')
+            }
+            // Disable all window bodies 
+            $('.item-container').droppable( 'disable' )
+        },
+        out: function(event, ui){
+            // Don't do anything if the dragged item is NOT a UIItem
+            if(!$(ui.draggable).hasClass('item'))
+                return;
+
+            // Unselect directory/app if item is dragged out
+            if(options.is_dir || options.app){
+                $(el_taskbar_item).removeClass('active');
+                $(el_taskbar_item).tooltip('close');
+                $('.ui-draggable-dragging .item-name, .item-selected-clone .item-name').css('opacity', 'initial')
+                $('.item-container').removeClass('item-container-transparent-border')
+            }
+            $('.item-container').droppable( 'enable' )    
+        }
+    });
+
+    return el_taskbar_item;
+}
+
+export default UITaskbarItem

src/UI/UIWindowChangePassword.js

@@ -0,0 +1,110 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowChangePassword(){
+    const internal_id = window.uuidv4();
+    let h = '';
+    h += `<div class="change-password" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
+        // error msg
+        h += `<div class="form-error-msg"></div>`;
+        // success msg
+        h += `<div class="form-success-msg"></div>`;
+        // current password
+        h += `<div style="overflow: hidden; margin-bottom: 20px;">`;
+            h += `<label for="current-password-${internal_id}">Current Password</label>`;
+            h += `<input id="current-password-${internal_id}" class="current-password" type="password" name="current-password" autocomplete="current-password" />`;
+        h += `</div>`;
+        // new password
+        h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+            h += `<label for="new-password-${internal_id}">New Password</label>`;
+            h += `<input id="new-password-${internal_id}" type="password" class="new-password" name="new-password" autocomplete="off" />`;
+        h += `</div>`;
+        // confirm new password
+        h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+            h += `<label for="confirm-new-password-${internal_id}">Confirm New Password</label>`;
+            h += `<input id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" class="confirm-new-password" autocomplete="off" />`;
+        h += `</div>`;
+
+        // Change Password
+        h += `<button class="change-password-btn button button-primary button-block button-normal">Change Password</button>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: 'Change Password',
+        app: 'change-passowrd',
+        single_instance: true,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        width: 350,
+        height: 'auto',
+        dominant: true,
+        show_in_taskbar: false,
+        onAppend: function(this_window){
+            $(this_window).find(`.current-password`).get(0).focus({preventScroll:true});
+        },
+        window_class: 'window-publishWebsite',
+        body_css: {
+            width: 'initial',
+            height: '100%',
+            'background-color': 'rgb(245 247 249)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    })
+
+    $(el_window).find('.change-password-btn').on('click', function(e){
+        const current_password = $(el_window).find('.current-password').val();
+        const new_password = $(el_window).find('.new-password').val();
+        const confirm_new_password = $(el_window).find('.confirm-new-password').val();
+
+        let data;
+
+        if(current_password === '' || new_password === '' || confirm_new_password === ''){
+            $(el_window).find('.form-error-msg').html('All fields are required.');
+            $(el_window).find('.form-error-msg').fadeIn();
+            return;
+        }
+        else if(new_password !== confirm_new_password){
+            $(el_window).find('.form-error-msg').html('`New Password` and `Confirm New Password` do not match.');
+            $(el_window).find('.form-error-msg').fadeIn();
+            return;
+        }
+        
+        $(el_window).find('.form-error-msg').hide();
+    
+        $.ajax({
+            url: api_origin + "/passwd",
+            type: 'POST',
+            async: true,
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            contentType: "application/json",
+            data: JSON.stringify({ 
+                old_pass: current_password, 
+                new_pass: new_password,
+            }),				
+            success: function (data){
+                $(el_window).find('.form-success-msg').html('Password changed successfully.');
+                $(el_window).find('.form-success-msg').fadeIn();
+                $(el_window).find('input').val('');
+            },
+            error: function (err){
+                $(el_window).find('.form-error-msg').html(err.responseText);
+                $(el_window).find('.form-error-msg').fadeIn();
+            }
+        });	
+    })
+}
+
+export default UIWindowChangePassword

src/UI/UIWindowChangeUsername.js

@@ -0,0 +1,111 @@
+import UIWindow from './UIWindow.js'
+import update_username_in_gui from '../helpers/update_username_in_gui.js'
+
+async function UIWindowChangeUsername(){
+    const internal_id = window.uuidv4();
+    let h = '';
+    h += `<div class="change-username" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
+        // error msg
+        h += `<div class="form-error-msg"></div>`;
+        // success msg
+        h += `<div class="form-success-msg"></div>`;
+        // new username
+        h += `<div style="overflow: hidden; margin-top: 10px; margin-bottom: 30px;">`;
+            h += `<label for="confirm-new-username-${internal_id}">New Username</label>`;
+            h += `<input id="confirm-new-username-${internal_id}" type="text" name="new-username" class="new-username" autocomplete="off" />`;
+        h += `</div>`;
+
+        // Change Username
+        h += `<button class="change-username-btn button button-primary button-block button-normal">Change Username</button>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: 'Change Username',
+        app: 'change-username',
+        single_instance: true,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        width: 350,
+        height: 'auto',
+        dominant: true,
+        show_in_taskbar: false,
+        onAppend: function(this_window){
+            $(this_window).find(`.new-username`).get(0)?.focus({preventScroll:true});
+        },
+        window_class: 'window-publishWebsite',
+        body_css: {
+            width: 'initial',
+            height: '100%',
+            'background-color': 'rgb(245 247 249)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    })
+
+    $(el_window).find('.change-username-btn').on('click', function(e){
+        // hide previous error/success msg
+        $(el_window).find('.form-success-msg, .form-success-msg').hide();
+
+        const new_username = $(el_window).find('.new-username').val();
+
+        if(!new_username){
+            $(el_window).find('.form-error-msg').html('All fields are required.');
+            $(el_window).find('.form-error-msg').fadeIn();
+            return;
+        }
+
+        $(el_window).find('.form-error-msg').hide();
+
+        // disable button
+        $(el_window).find('.change-username-btn').addClass('disabled');
+        // disable input
+        $(el_window).find('.new-username').attr('disabled', true);
+    
+        $.ajax({
+            url: api_origin + "/change_username",
+            type: 'POST',
+            async: true,
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            contentType: "application/json",
+            data: JSON.stringify({ 
+                new_username: new_username, 
+            }),				
+            success: function (data){
+                $(el_window).find('.form-success-msg').html('Username updated successfully.');
+                $(el_window).find('.form-success-msg').fadeIn();
+                $(el_window).find('input').val('');
+                // update auth data
+                update_username_in_gui(new_username);
+                // update username
+                window.user.username = new_username;
+                // enable button
+                $(el_window).find('.change-username-btn').removeClass('disabled');
+                // enable input
+                $(el_window).find('.new-username').attr('disabled', false);
+            },
+            error: function (err){
+                $(el_window).find('.form-error-msg').html(html_encode(err.responseJSON?.message));
+                $(el_window).find('.form-error-msg').fadeIn();
+                // enable button
+                $(el_window).find('.change-username-btn').removeClass('disabled');
+                // enable input
+                $(el_window).find('.new-username').attr('disabled', false);
+            }
+        });	
+    })
+}
+
+export default UIWindowChangeUsername

src/UI/UIWindowClaimReferral.js

@@ -0,0 +1,55 @@
+import UIWindow from './UIWindow.js'
+import UIWindowSaveAccount from './UIWindowSaveAccount.js';
+
+async function UIWindowClaimReferral(options){
+    let h = '';
+
+    h += `<div>`;
+        h += `<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> &times; </div>`;
+        h += `<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
+        h += `<h1 style="font-weight: 400; padding: 0 10px; font-size: 21px; text-align: center; margin-bottom: 0; color: #60626d; -webkit-font-smoothing: antialiased;">You have been referred to Puter by a friend!</h1>`;
+        h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 0px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">Create an account and confirm your email address to receive 1 GB of free storage. Your friend will get 1 GB of free storage too.</p>`;
+        h += `<button class="button button-primary button-block create-account-ref-btn" style="display: block;">Create Account</button>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Refer a friend!`,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_draggable: true,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        onAppend: function(el_window){
+        },
+        width: 400,
+        dominant: true,
+        window_css: {
+            height: 'initial',
+        },
+        body_css: {
+            padding: '10px',
+            width: 'initial',
+            'max-height': 'calc(100vh - 200px)',
+            'background-color': 'rgb(241 246 251)',
+            'backdrop-filter': 'blur(3px)',
+            'padding': '10px 20px 20px 20px',
+            'height': 'initial',
+        }    
+    });
+
+    $(el_window).find('.create-account-ref-btn').on('click', function(e){    
+        UIWindowSaveAccount();
+        $(el_window).close();
+    })
+}
+
+export default UIWindowClaimReferral

src/UI/UIWindowColorPicker.js

@@ -0,0 +1,110 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowColorPicker(options){
+    // set sensible defaults
+    if(arguments.length > 0){
+        // if first argument is a string, then assume it is the default color
+        if(isString(arguments[0])){
+            options = {};
+            options.default = arguments[0];
+        }
+    }
+    options = options ?? {};
+
+    return new Promise(async (resolve) => {
+        let colorPicker;
+
+        let h = ``;
+        h += `<div>`;
+            h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
+                    // picker
+                    h += `<div style="padding: 0; margin-bottom: 20px;">`;
+                        h += `<div class="picker"></div>`;
+                    h += `</div>`;
+
+                    // Select button
+                    h += `<button class="select-btn button button-primary button-block button-normal">Select</button>`
+                h += `</form>`;
+            h += `</div>`;
+        h += `</div>`;
+        
+        const el_window = await UIWindow({
+            title: 'Select color…',
+            app: 'color-picker',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_draggable: true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            ...options.window_options,
+            width: 350,
+            dominant: true,
+            on_close: async ()=>{
+                resolve(false)
+            },
+            onAppend: function(window){
+                colorPicker = new iro.ColorPicker($(window).find('.picker').get(0), {
+                    layout: [
+                        {
+                            component: iro.ui.Box,
+                            options: {
+                                layoutDirection: 'horizontal',
+                                width: 265,
+                                height: 265,
+                            }
+                        },
+                        {
+                            component: iro.ui.Slider,
+                            options: {
+                                sliderType: 'alpha',
+                                layoutDirection: 'horizontal',
+                                height: 265,
+                                width:265,
+                            }
+                        },
+                        {
+                            component: iro.ui.Slider,
+                            options: {
+                                sliderType: 'hue',
+                            }
+                        },
+                    ],
+                    // Set the initial color to pure red
+                    color: options.default ?? "#f00",
+                });    
+            },
+            window_class: 'window-login',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '0',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        $(el_window).find('.select-btn').on('click', function(e){            
+            resolve({color: colorPicker.color.hex8String});
+            $(el_window).close();
+        })  
+        $(el_window).find('.font-selector').on('click', function(e){
+            $(el_window).find('.font-selector').removeClass('font-selector-active');
+            $(this).addClass('font-selector-active');
+        }) 
+    }) 
+}
+
+export default UIWindowColorPicker

src/UI/UIWindowConfirmDownload.js

@@ -0,0 +1,73 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowConfirmDownload(options){
+    return new Promise(async (resolve) => {
+        let h = '';
+        h += `<div>`;
+            // Confirm download
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // Message
+                h += `<p style="font-weight:bold;">Do you want to download this file?</p>`;
+                h += `<div style="overflow:hidden; float:left; width: 100px; height: 100px; display:flex; display: flex; justify-content: center; align-items: center;">`;
+                    h += `<img style="float:left; margin-right: 7px; width: 60px; height: 60px; filter: drop-shadow(0px 0px 1px rgba(102, 102, 102, 1));" src="${html_encode((await item_icon({is_dir: options.is_dir === '1' || options.is_dir === 'true', type: options.type, name: options.name})).image)}" />`;
+                h += `</div>`;
+                // Item information
+                h += `<div  style="overflow:hidden;">`;
+                    // Name
+                    h += `<p style="text-overflow: ellipsis; overflow: hidden;"><span class="dl-conf-item-attr">Name:</span> ${options.name ?? options.url}</p>`;
+                    // Type
+                    h += `<p style="text-overflow: ellipsis; overflow: hidden;"><span class="dl-conf-item-attr">Type:</span> ${options.is_dir === '1' || options.is_dir === 'true' ? 'Folder' : options.type  ?? 'Unknown File Type'}</p>`;
+                    // Source
+                    h += `<p style="text-overflow: ellipsis; overflow: hidden;"><span class="dl-conf-item-attr">From:</span> ${options.source}</p>`;
+                h += `</div>`;
+            h += `</div>`;
+            // Download
+            h += `<button style="float:right; margin-top: 15px; margin-right: -2px; margin-left:10px;" class="button button-small button-primary btn-download-confirm">Download</button>`;
+            // Cancel
+            h += `<button style="float:right; margin-top: 15px;" class="button button-small btn-download-cancel">Cancel</button>`;
+        h +=`</div>`;
+
+        const el_window = await UIWindow({
+            title: `Upload`,
+            icon: window.icons[`app-icon-uploader.svg`],
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: false,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: false,
+            allow_user_select: false,
+            window_class: 'window-upload-progress',
+            width: 450,
+            dominant: true,
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                padding: '22px',
+                width: 'initial',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        });
+
+        $(el_window).find('.btn-download-confirm').on('click submit', function(e){
+            $(el_window).close();
+            resolve(true);
+        })
+
+        $(el_window).find('.btn-download-cancel').on('click submit', function(e){
+            $(el_window).close();
+            resolve(false);
+        })
+    })
+}
+
+export default UIWindowConfirmDownload

src/UI/UIWindowCopyProgress.js

@@ -0,0 +1,63 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowCopyProgress(options){
+    let h = '';
+    h += `<div data-copy-operation-id="${options.operation_id}">`;
+        h += `<div>`;
+            // spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+            // Progress report
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // msg
+                h += `<span class="copy-progress-msg">Copying </span>`;
+                h += `<span class="copy-from" style="font-weight:strong;"></span>`;
+            h += `</div>`;
+            // progress
+            h += `<div class="copy-progress-bar-container" style="clear:both; margin-top:20px; border-radius:3px;">`;
+                h += `<div class="copy-progress-bar"></div>`;
+            h += `</div>`;
+            // cancel
+            // h += `<button style="float:right; margin-top: 15px; margin-right: -2px;" class="button button-small copy-cancel-btn">Cancel</button>`;
+        h +=`</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Copying`,
+        icon: window.icons[`app-icon-copying.svg`],
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        window_class: 'window-copy-progress',
+        width: 450,
+        dominant: true,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '22px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245, .95)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    });
+
+    $(el_window).find('.copy-cancel-btn').on('click', function(e){
+        operation_cancelled[options.operation_id] = true;
+        $(el_window).close();
+    })
+
+    return el_window;
+}
+
+export default UIWindowCopyProgress

src/UI/UIWindowDesktopBGSettings.js

@@ -0,0 +1,189 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowDesktopBGSettings(){
+    return new Promise(async (resolve) => {
+        let h = '';
+        const original_background_css = $('body').attr('style');
+        let bg_url = window.desktop_bg_url, 
+            bg_color = window.desktop_bg_color, 
+            bg_fit = window.desktop_bg_fit;
+
+        h += `<div style="padding: 10px; border-bottom: 1px solid #ced7e1;">`;
+
+            // type
+            h += `<label>Background:</label>`;
+            h += `<select class="desktop-bg-type" style="width: 150px; margin-bottom: 20px;">`
+                h += `<option value="picture">Picture</option>`;
+                h += `<option value="color">Color</option>`;
+            h += `</select>`;
+
+            // Picture
+            h += `<div class="desktop-bg-settings-wrapper desktop-bg-settings-picture">`;
+                h += `<label>Image:</label>`;
+                h += `<button class="button button-default button-small browse">Browse</button>`;
+                h += `<label style="margin-top: 20px;">Fit:</label>`;
+                h += `<select class="desktop-bg-fit" style="width: 150px;">`
+                    h += `<option value="cover">Cover</option>`;
+                    h += `<option value="center">Center</option>`;
+                    h += `<option value="contain">Contain</option>`;
+                    h += `<option value="repeat">Repeat</option>`;
+                h += `</select>`;
+            h += `</div>`
+
+            // Color
+            h += `<div class="desktop-bg-settings-wrapper desktop-bg-settings-color">`;
+                h += `<label>Color:</label>`;
+                h += `<div class="desktop-bg-color-blocks">`;
+                    h += `<div class="desktop-bg-color-block" data-color="#4F7BB5" style="background-color: #4F7BB5"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#545554" style="background-color: #545554"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#F5D3CE" style="background-color: #F5D3CE"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#52A758" style="background-color: #52A758"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#ad3983" style="background-color: #ad3983"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#ffffff" style="background-color: #ffffff"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#000000" style="background-color: #000000"></div>`;
+                    h += `<div class="desktop-bg-color-block" data-color="#454545" style="background-color: #454545"></div>`;
+                    h += `<div class="desktop-bg-color-block desktop-bg-color-block-palette" data-color="" style="background-image: url(${window.icons['palette.svg']});
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    background-position: center;"><input type="color" style="width:25px; height: 25px; opacity:0;"></div>`;
+                h += `</div>`;
+            h += `</div>`;
+
+            h += `<div style="padding-top: 5px; overflow:hidden; margin-top: 25px; border-top: 1px solid #CCC;">`
+                h += `<button class="button button-primary apply" style="float:right;">Apply</button>`;
+                h += `<button class="button button-default cancel" style="float:right; margin-right: 10px;">Cancel</button>`;
+            h += `</div>`;
+
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: 'Change Desktop Background…',
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            onAppend: function(this_window){
+                $(this_window).find(`.access-recipient`).focus();
+            },
+            window_class: 'window-give-access',
+            width: 350,
+            window_css: {
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                height: '100%',
+                'background-color': 'rgb(245 247 249)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        if(window.desktop_bg_url !== undefined && window.desktop_bg_url !== null){
+            $(el_window).find('.desktop-bg-settings-wrapper').hide();
+            $(el_window).find('.desktop-bg-settings-picture').show();
+            $(el_window).find('.desktop-bg-type').val('picture');
+        }else if(window.desktop_bg_color !== undefined && window.desktop_bg_color !== null){
+            $(el_window).find('.desktop-bg-settings-wrapper').hide();
+            $(el_window).find('.desktop-bg-settings-color').show();
+            $(el_window).find('.desktop-bg-type').val('color');
+        }else{
+            $(el_window).find('.desktop-bg-settings-wrapper').hide();
+            $(el_window).find('.desktop-bg-settings-picture').show();
+            $(el_window).find('.desktop-bg-type').val('picture');
+        }
+
+        $(el_window).find('.desktop-bg-color-block:not(.desktop-bg-color-block-palette').on('click', async function(e){
+            window.set_desktop_background({color: $(this).attr('data-color')})
+        })
+        $(el_window).find('.desktop-bg-color-block-palette input').on('change', async function(e){
+            window.set_desktop_background({color: $(this).val()})
+        })
+        $(el_window).on('file_opened', function(e){
+            let selected_file = Array.isArray(e.detail) ? e.detail[0] : e.detail;
+            const fit = $(el_window).find('.desktop-bg-fit').val();
+            bg_url = selected_file.read_url;
+            bg_fit = fit;
+            bg_color = undefined;
+            window.set_desktop_background({url: bg_url, fit: bg_fit})
+        })
+
+        $(el_window).find('.desktop-bg-fit').on('change', function(e){
+            const fit = $(this).val();
+            bg_fit = fit;
+            window.set_desktop_background({fit: fit})
+        })
+
+        $(el_window).find('.desktop-bg-type').on('change', function(e){
+            const type = $(this).val();
+            if(type === 'picture'){
+                $(el_window).find('.desktop-bg-settings-wrapper').hide();
+                $(el_window).find('.desktop-bg-settings-picture').show();
+            }else if(type==='color'){
+                $(el_window).find('.desktop-bg-settings-wrapper').hide();
+                $(el_window).find('.desktop-bg-settings-color').show();
+            }
+        })
+
+        $(el_window).find('.apply').on('click', async function(e){
+            // /set-desktop-bg
+            try{
+                $.ajax({
+                    url: api_origin + "/set-desktop-bg",
+                    type: 'POST',
+                    data: JSON.stringify({ 
+                        url: window.desktop_bg_url,
+                        color: window.desktop_bg_color,
+                        fit: window.desktop_bg_fit,
+                    }),
+                    async: true,
+                    contentType: "application/json",
+                    headers: {
+                        "Authorization": "Bearer "+auth_token
+                    },
+                    statusCode: {
+                        401: function () {
+                            logout();
+                        },
+                    },
+                })
+                $(el_window).close();
+                resolve(true);    
+            }catch(err){
+            }
+        })
+
+        $(el_window).find('.browse').on('click', function(){
+            // open dialog
+            UIWindow({
+                path: '/' + window.user.username + '/Desktop',
+                // this is the uuid of the window to which this dialog will return
+                parent_uuid: $(el_window).attr('data-element_uuid'),
+                allowed_file_types: ['image/*'],
+                show_maximize_button: false,
+                show_minimize_button: false,
+                title: 'Open',
+                is_dir: true,
+                is_openFileDialog: true,
+                selectable_body: false,
+            });
+        })
+
+        $(el_window).find('.cancel').on('click', function(){
+            $('body').attr('style', original_background_css);
+            $(el_window).close();
+            resolve(true);
+        })
+    })
+}
+
+export default UIWindowDesktopBGSettings

src/UI/UIWindowDownloadDirProg.js

@@ -0,0 +1,53 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowDownloadDirProg(options){
+    options = options ?? {};
+
+    let h = '';
+    // Loading spinner
+    h +=`<svg style="height: 40px; width: 40px; padding: 10px; display: block; float: left;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+    h += `<p style="text-align:left; padding-left:20px; padding-right:20px; overflow:hidden; width: 310px; text-overflow: ellipsis; white-space: nowrap; float:left; font-size:14px;" class="dir-dl-status">${options.defaultText ?? 'Preparing...'}</p>`;
+
+    const el_window = await UIWindow({
+        title: 'Instant Login!',
+        app: 'instant-login',
+        single_instance: true,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        backdrop: false,
+        width: 460,
+        height: 'auto',
+        dominant: true,
+        show_in_taskbar: false,
+        draggable_body: true,
+        onAppend: function(this_window){
+        },
+        window_class: 'window-qr',
+        body_css: {
+            width: 'initial',
+            height: '100px',
+            'background-color': 'rgb(245 247 249)',
+            'backdrop-filter': 'blur(3px)',
+            'display': 'flex',
+            "flex-direction": 'row',
+            'justify-content': 'center',
+            'align-items': 'center',
+        }    
+    })       
+
+    return el_window;
+}
+
+export default UIWindowDownloadDirProg

src/UI/UIWindowDownloadProgress.js

@@ -0,0 +1,63 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowDownloadProgress(options){
+    let h = '';
+    h += `<div data-download-operation-id="${options.operation_id}">`;
+        h += `<div>`;
+            // Spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+            // Progress report
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // msg
+                h += `<span class="upload-progress-msg">Downloading <strong>${options.item_name ?? ''}</strong></span>`;
+            h += `</div>`;
+            // Progress
+            h += `<div class="download-progress-bar-container" style="clear:both; margin-top:20px; border-radius:3px;">`;
+                h += `<div class="download-progress-bar"></div>`;
+            h += `</div>`;
+            // Cancel
+            h += `<button style="float:right; margin-top: 15px; margin-right: -2px;" class="button button-small download-cancel-btn">Cancel</button>`;
+        h +=`</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Upload`,
+        icon: window.icons[`app-icon-uploader.svg`],
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        window_class: 'window-upload-progress',
+        width: 450,
+        dominant: true,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '22px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245, .95)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    });
+
+    // cancel download button clicked
+    $(el_window).find('.download-cancel-btn').on('click', function(){
+        operation_cancelled[options.operation_id] = true;
+        $(el_window).close();
+    })
+
+    return el_window;
+}
+
+export default UIWindowDownloadProgress

src/UI/UIWindowEmailConfirmationRequired.js

@@ -0,0 +1,258 @@
+import UIWindow from './UIWindow.js'
+import UIAlert from './UIAlert.js'
+
+function UIWindowEmailConfirmationRequired(options){
+    return new Promise(async (resolve) => {
+        options = options ?? {};
+        let final_code = '';
+        let is_checking_code = false;
+
+        const submit_btn_txt = 'Confirm Email'
+        let h = '';
+        h += `<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>`;
+        h += `<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`;
+            h += `<img src="${html_encode(window.icons['mail.svg'])}" style="display:block; margin:10px auto 10px;">`;
+            h += `<h3 style="text-align:center; font-weight: 500; font-size: 20px;">Confirm Your Email Address</h3>`;
+            h += `<form>`;
+                h += `<p style="text-align:center; padding: 0 20px;">To continue, please enter the 6-digit confirmation code sent to <strong style="font-weight: 500;">${window.user.email}</strong></p>`;
+                h += `<div class="error"></div>`;
+                h += `  <fieldset name="number-code" style="border: none; padding:0;" data-number-code-form>
+                <input class="digit-input" type="number" min='0' max='9' name='number-code-0' data-number-code-input='0' required />
+                <input class="digit-input" type="number" min='0' max='9' name='number-code-1' data-number-code-input='1' required />
+                <input class="digit-input" type="number" min='0' max='9' name='number-code-2' data-number-code-input='2' required />
+                <span class="email-confirm-code-hyphen">-</span>
+                <input class="digit-input" type="number" min='0' max='9' name='number-code-3' data-number-code-input='3' required />
+                <input class="digit-input" type="number" min='0' max='9' name='number-code-4' data-number-code-input='4' required />
+                <input class="digit-input" type="number" min='0' max='9' name='number-code-5' data-number-code-input='5' required />
+              </fieldset>`;
+                h += `<button type="submit" class="button button-block button-primary email-confirm-btn" style="margin-top:10px;" disabled>${submit_btn_txt}</button>`;
+            h += `</form>`;
+            h += `<div style="text-align:center; padding:10px; font-size:14px; margin-top:10px;">`;
+                h += `<span class="send-conf-email">Re-send Confirmation Code</span>`;
+                if(options.logout_in_footer){
+                    h += ` &bull; `;
+                    h += `<span class="conf-email-log-out">Log Out</span>`;
+                }
+            h += `</div>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: null,
+            backdrop: options.backdrop ?? false,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: false,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            is_draggable: options.is_draggable ?? true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: options.stay_on_top ?? false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            backdrop: true,
+            width: 390,
+            dominant: true,
+            onAppend: function(el_window){
+                $(el_window).find('.digit-input').first().focus();
+            },
+            window_class: 'window-item-properties',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                padding: '30px',
+                width: 'initial',
+                height: 'initial',
+                'background-color': 'rgb(247 251 255)',
+                'backdrop-filter': 'blur(3px)',
+            }
+        })
+
+        $(el_window).find('.digit-input').first().focus();
+
+        $(el_window).find('.email-confirm-btn').on('click submit', function(e){
+            e.preventDefault();
+            e.stopPropagation();
+
+            $(el_window).find('.email-confirm-btn').prop('disabled', true);
+            $(el_window).find('.error').hide();
+            
+            // Check if already checking code to prevent multiple requests
+            if(is_checking_code)
+                return;
+            // Confirm button
+            is_checking_code = true;
+
+            // set animation
+            $(el_window).find('.email-confirm-btn').html(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
+
+            setTimeout(() => {
+                $.ajax({
+                    url: api_origin + "/confirm-email",
+                    type: 'POST',
+                    data: JSON.stringify({
+                        code: final_code,
+                    }),
+                    async: true,
+                    contentType: "application/json",
+                    headers: {
+                        "Authorization": "Bearer "+auth_token
+                    },
+                    statusCode: {
+                        401: function () {
+                            logout();
+                        },
+                    },        
+                    success: function (res){
+                        if(res.email_confirmed){
+                            $(el_window).close();
+                            refresh_user_data(window.auth_token)
+                            resolve(true);
+                        }else{
+                            $(el_window).find('.error').html('Invalid confirmation code.');
+                            $(el_window).find('.error').fadeIn();
+                            $(el_window).find('.digit-input').val('');
+                            $(el_window).find('.digit-input').first().focus();
+                            $(el_window).find('.email-confirm-btn').prop('disabled', false);
+                            $(el_window).find('.email-confirm-btn').html(submit_btn_txt);
+                        }
+                    },
+                    error: function(res){
+                        $(el_window).find('.error').html(res.responseJSON.error);
+                        $(el_window).find('.error').fadeIn();
+                        $(el_window).find('.digit-input').val('');
+                        $(el_window).find('.digit-input').first().focus();
+                        $(el_window).find('.email-confirm-btn').prop('disabled', false);
+                        $(el_window).find('.email-confirm-btn').html(submit_btn_txt);
+                    },
+                    complete: function(){
+                        is_checking_code = false;
+                    }
+                })
+            }, 1000);
+        })
+
+        // send email confirmation
+        $(el_window).find('.send-conf-email').on('click', function(e){
+            $.ajax({
+                url: api_origin + "/send-confirm-email",
+                type: 'POST',
+                async: true,
+                contentType: "application/json",
+                headers: {
+                    "Authorization": "Bearer "+auth_token
+                },
+                statusCode: {
+                    401: function () {
+                        logout();
+                    },
+                },        
+                success: async function (res){
+                    await UIAlert({
+                        message: `A new confirmation code has been sent to <strong>${window.user.email}</strong>.`,
+                        body_icon: window.icons['c-check.svg'],
+                        stay_on_top: true,
+                        backdrop: true,
+                    })
+                    $(el_window).find('.digit-input').first().focus();
+                },
+                complete: function(){
+                }
+            })
+        })
+
+        // logout
+        $(el_window).find('.conf-email-log-out').on('click', function(e){
+            logout();
+            $(el_window).close();
+        })
+
+        // Elements
+        const numberCodeForm = document.querySelector('[data-number-code-form]');
+        const numberCodeInputs = [...numberCodeForm.querySelectorAll('[data-number-code-input]')];
+
+        // Event listeners
+        numberCodeForm.addEventListener('input', ({ target }) => {
+            if(!target.value.length) { return target.value = null; }
+            const inputLength = target.value.length;
+            let currentIndex = Number(target.dataset.numberCodeInput);
+            if(inputLength === 2){
+                const inputValues = target.value.split('');
+                target.value = inputValues[0];
+            }
+            else if (inputLength > 1) {
+                const inputValues = target.value.split('');
+
+                inputValues.forEach((value, valueIndex) => {
+                    const nextValueIndex = currentIndex + valueIndex;
+
+                    if (nextValueIndex >= numberCodeInputs.length) { return; }
+
+                    numberCodeInputs[nextValueIndex].value = value;
+                });
+                currentIndex += inputValues.length - 2;
+            }
+
+            const nextIndex = currentIndex + 1;
+
+            if (nextIndex < numberCodeInputs.length) {
+                numberCodeInputs[nextIndex].focus();
+            }
+
+            // Concatenate all inputs into one string to create the final code
+            final_code = '';
+            for(let i=0; i< numberCodeInputs.length; i++){
+                final_code += numberCodeInputs[i].value;
+            }
+            // Automatically submit if 6 digits entered
+            if(final_code.length === 6){
+                $(el_window).find('.email-confirm-btn').prop('disabled', false);
+                $(el_window).find('.email-confirm-btn').trigger('click');
+            }
+        });
+
+        numberCodeForm.addEventListener('keydown', (e) => {
+            const { code, target } = e;
+
+            const currentIndex = Number(target.dataset.numberCodeInput);
+            const previousIndex = currentIndex - 1;
+            const nextIndex = currentIndex + 1;
+
+            const hasPreviousIndex = previousIndex >= 0;
+            const hasNextIndex = nextIndex <= numberCodeInputs.length - 1
+
+            switch (code) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    if (hasPreviousIndex) {
+                        numberCodeInputs[previousIndex].focus();
+                    }
+                    e.preventDefault();
+                    break;
+
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    if (hasNextIndex) {
+                        numberCodeInputs[nextIndex].focus();
+                    }
+                    e.preventDefault();
+                    break;
+                case 'Backspace':
+                    if (!e.target.value.length && hasPreviousIndex) {
+                        numberCodeInputs[previousIndex].value = null;
+                        numberCodeInputs[previousIndex].focus();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        });
+    })
+}
+
+export default UIWindowEmailConfirmationRequired

src/UI/UIWindowFeedback.js

@@ -0,0 +1,80 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowQR(options){
+    return new Promise(async (resolve) => {
+        options = options ?? {};
+
+        let h = '';
+        h += `<div style="padding: 20px; margin-top: 0;">`;
+            // success
+            h += `<div class="feedback-sent-success">`;
+                h += `<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`;
+                h += `<p style="text-align:center; margin-bottom:10px; color: #005300; padding: 10px;">Thank you for contacting us. If you have an email associated with your account, you will hear back from us as soon as possible.</p>`;
+            h+= `</div>`;
+            // form
+            h += `<div class="feedback-form">`;
+                h += `<p style="margin-top:0; font-size: 15px; -webkit-font-smoothing: antialiased;">Please use the form below to send us your feedback, comments, and bug reports.</p>`;
+                h += `<textarea class="feedback-message" style="width:100%; height: 200px; padding: 10px; box-sizing: border-box;"></textarea>`;
+                h += `<button class="button button-primary send-feedback-btn" style="float: right; margin-bottom: 15px; margin-top: 10px;">Send</button>`;
+            h += `</div>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: 'Contact Us',
+            app: 'feedback',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: false,
+            allow_user_select: false,
+            width: 350,
+            height: 'auto',
+            dominant: true,
+            show_in_taskbar: false,
+            onAppend: function(this_window){
+                $(this_window).find('.feedback-message').get(0).focus({preventScroll:true});
+            },
+            window_class: 'window-feedback',
+            body_css: {
+                width: 'initial',
+                height: '100%',
+                'background-color': 'rgb(245 247 249)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        $(el_window).find('.send-feedback-btn').on('click', function(e){
+            const message = $(el_window).find('.feedback-message').val();
+            if(message)
+                $(this).prop('disabled', true);
+            $.ajax({
+                url: api_origin + "/contactUs",
+                type: 'POST',
+                async: true,
+                contentType: "application/json",
+                headers: {
+                    "Authorization": "Bearer "+auth_token
+                },    
+                data: JSON.stringify({ 
+                    message: message,
+                }),
+                success: async function (data){
+                    $(el_window).find('.feedback-form').hide();
+                    $(el_window).find('.feedback-sent-success').show(100);
+                }
+            })
+        })
+    })
+}
+
+export default UIWindowQR

src/UI/UIWindowFontPicker.js

@@ -0,0 +1,103 @@
+import UIWindow from './UIWindow.js'
+
+let fontAvailable = new Set();
+const font_list = new Set([
+    // Windows 10
+    'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
+    // macOS
+    'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
+].sort());
+
+// filter through available system fonts
+(async () => {
+    await document.fonts.ready;
+
+    for (const font of font_list.values()) {
+        if (document.fonts.check(`12px "${font}"`)) {
+            fontAvailable.add(font);
+        }
+    }
+})();
+
+async function UIWindowFontPicker(options){
+    // set sensible defaults
+    if(arguments.length > 0){
+        // if first argument is a string, then assume it is the default color
+        if(isString(arguments[0])){
+            options = {};
+            options.default = arguments[0];
+        }
+    }
+    options = options || {};
+
+    return new Promise(async (resolve) => {
+        let h = ``;
+        h += `<div>`;
+            h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
+                    h += `<div class="font-list" style="margin-bottom: 10px; height: 200px; overflow-y: scroll; background-color: white; padding: 0 10px;">`;
+                        fontAvailable.forEach(element => {
+                            h += `<p class="font-selector disable-user-select ${options.default === element ? 'font-selector-active' : ''}" style="font-family: '${html_encode(element)}';" data-font-family="${html_encode(element)}">${element}</p>`; // 👉️ one, two, three, four
+                        });
+                    h += `</div>`;
+
+                    // Select
+                    h += `<button class="select-btn button button-primary button-block button-normal">Select</button>`
+                h += `</form>`;
+            h += `</div>`;
+        h += `</div>`;
+        
+        const el_window = await UIWindow({
+            title: 'Select font…',
+            app: 'font-picker',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_draggable: true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            ...options.window_options,
+            width: 350,
+            dominant: true,
+            on_close: ()=>{
+                resolve(false)
+            },
+            onAppend: function(window){
+                let active_font = $(window).find('.font-selector-active');
+                if(active_font.length > 0){
+                    scrollParentToChild($(window).find('.font-list').get(0), active_font.get(0));
+                }
+            },
+            window_class: 'window-login',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '0',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        $(el_window).find('.select-btn').on('click', function(e){
+            resolve({fontFamily: $(el_window).find('.font-selector-active').attr('data-font-family')});
+            $(el_window).close();
+        })  
+        $(el_window).find('.font-selector').on('click', function(e){
+            $(el_window).find('.font-selector').removeClass('font-selector-active');
+            $(this).addClass('font-selector-active');
+        }) 
+    }) 
+}
+
+export default UIWindowFontPicker

src/UI/UIWindowGetCopyLink.js

@@ -0,0 +1,100 @@
+import UIWindow from './UIWindow.js'
+import UIPopover from './UIPopover.js'
+
+async function UIWindowGetCopyLink(options){
+    let h = '';
+    let copy_btn_text = 'Copy Link';
+    let copied_btn_text = 'Copied!';
+    const signature = await puter.fs.sign(null, {uid: options.uid, action: 'read'})
+    const url = `${gui_origin}/?name=${encodeURIComponent(options.name)}&is_dir=${encodeURIComponent(options.is_dir)}&download=${encodeURIComponent(signature.items.read_url)}`;
+
+    h += `<div>`;
+        h += `<p style="font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; color: #474a57;">Share the following link with anyone and they will be able to receive a copy of <strong>${html_encode(options.name)}</strong></p>`;
+        h += `<input type="text" style="margin-bottom:10px;" class="downloadable-link" readonly />`;
+        h += `<button class="button button-primary copy-downloadable-link" style="width:130px;">${copy_btn_text}</button>`
+        h += `<img class="share-copy-link-on-social" src="${window.icons['share-outline.svg']}">`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Get Copy Link`,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        onAppend: function(el_window){
+        },
+        width: 500,
+        dominant: true,
+        window_css: {
+            height: 'initial',
+        },
+        body_css: {
+            padding: '10px',
+            width: 'initial',
+            'max-height': 'calc(100vh - 200px)',
+            'background-color': 'rgb(241 246 251)',
+            'backdrop-filter': 'blur(3px)',
+            'padding': '10px 20px 20px 20px',
+            'height': 'initial',
+        }    
+    });
+
+    $(el_window).find('.window-body .downloadable-link').val(url);
+
+    $(el_window).find('.window-body .share-copy-link-on-social').on('click', function(e){    
+        const social_links = socialLink({url: url, title: `Get a copy of '${options.name}' on Puter.com!`, description: `Get a copy of '${options.name}' on Puter.com!`});
+
+        let social_links_html = ``;
+        social_links_html += `<div style="padding: 10px;">`;
+            social_links_html += `<p style="margin: 0; text-align: center; margin-bottom: 6px; color: #484a57; font-weight: bold; font-size: 14px;">Share to</p>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.twitter}" style=""><svg viewBox="0 0 24 24" aria-hidden="true" style="opacity: 0.7;"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.whatsapp}" style=""><img src="${window.icons['logo-whatsapp.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.facebook}" style=""><img src="${window.icons['logo-facebook.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.linkedin}" style=""><img src="${window.icons['logo-linkedin.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.reddit}" style=""><img src="${window.icons['logo-reddit.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links['telegram.me']}" style=""><img src="${window.icons['logo-telegram.svg']}"></a>`
+        social_links_html += '</div>';
+
+        UIPopover({
+            content: social_links_html,
+            snapToElement: this,
+            parent_element: this,
+            // width: 300,
+            height: 100,
+            position: 'bottom',
+        });    
+    })
+
+    $(el_window).find('.window-body .copy-downloadable-link').on('click', async function(e){
+        var copy_btn = this;
+        if (navigator.clipboard) {
+            // Get link text
+            const selected_text = $(el_window).find('.window-body .downloadable-link').val();
+            // copy selected text to clipboard
+            await navigator.clipboard.writeText(selected_text);
+        }
+        else{
+            // Get the text field
+            $(el_window).find('.window-body .downloadable-link').select();
+            // Copy the text inside the text field
+            document.execCommand('copy');
+        }
+
+        $(this).html(copied_btn_text);
+        setTimeout(function(){
+            $(copy_btn).html(copy_btn_text);
+        }, 1000);
+    });
+}
+
+export default UIWindowGetCopyLink

src/UI/UIWindowItemProperties.js

@@ -0,0 +1,226 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowItemProperties(item_name, item_path, item_uid, left, top, width, height){
+    let h = '';
+    h += `<div class="item-props-tabview" style="display: flex; flex-direction: column; height: 100%;">`;
+        // tabs
+        h += `<div class="item-props-tab">`;
+            h += `<div class="item-props-tab-btn antialiased disable-user-select item-props-tab-selected" data-tab="general">General</div>`;
+            h += `<div class="item-props-tab-btn antialiased disable-user-select item-props-tab-btn-versions" data-tab="versions">Versions</div>`;
+        h += `</div>`;
+
+        h+= `<div class="item-props-tab-content item-props-tab-content-selected" data-tab="general" style="border-top-left-radius:0;">`;
+            h += `<table class="item-props-tbl">`;
+                h += `<tr><td class="item-prop-label">Name</td><td class="item-prop-val item-prop-val-name"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Path</td><td class="item-prop-val item-prop-val-path"></td></tr>`;
+                h += `<tr class="item-prop-original-name"><td class="item-prop-label">Original Name</td><td class="item-prop-val item-prop-val-original-name"></td></tr>`;
+                h += `<tr class="item-prop-original-path"><td class="item-prop-label">Original Path</td><td class="item-prop-val item-prop-val-original-path"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Shortcut to</td><td class="item-prop-val item-prop-val-shortcut-to"></td></tr>`;
+                h += `<tr><td class="item-prop-label">UID</td><td class="item-prop-val item-prop-val-uid"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Type</td><td class="item-prop-val item-prop-val-type"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Size</td><td class="item-prop-val item-prop-val-size"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Modified</td><td class="item-prop-val item-prop-val-modified"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Created</td><td class="item-prop-val item-prop-val-created"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Versions</td><td class="item-prop-val item-prop-val-versions"></td></tr>`;
+                h += `<tr><td class="item-prop-label">Associated Websites</td><td class="item-prop-val item-prop-val-websites">`;
+                h += `</td></tr>`;
+                h += `<tr><td class="item-prop-label">Access Granted To</td><td class="item-prop-val item-prop-val-permissions"></td></tr>`;
+            h += `</table>`;
+        h += `</div>`;
+
+        h += `<div class="item-props-tab-content" data-tab="versions" style="padding: 20px;">`
+            h += `<div class="item-props-version-list">`;
+            h += `</div>`;
+        h += `</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `${item_name} properties`,
+        app: item_uid+'-account',
+        single_instance: true,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        left: left,
+        top: top,
+        width: width,
+        height: height,
+        onAppend: function(el_window){
+        },
+        width: 450,
+        window_class: 'window-item-properties',
+        window_css:{
+            // height: 'initial',
+        },
+        body_css: {
+            padding: '10px',
+            width: 'initial',
+            height: 'calc(100% - 50px)',
+            'background-color': 'rgb(241 242 246)',
+            'backdrop-filter': 'blur(3px)',
+            'content-box': 'content-box',
+        }    
+    })
+
+    // item props tab click handler
+    $(el_window).find('.item-props-tab-btn').click(function(e){
+        // unselect all tabs
+        $(el_window).find('.item-props-tab-btn').removeClass('item-props-tab-selected');
+        // select this tab
+        $(this).addClass('item-props-tab-selected');
+        // unselect all tab contents
+        $(el_window).find('.item-props-tab-content').removeClass('item-props-tab-content-selected');
+        // select this tab content
+        $(el_window).find(`.item-props-tab-content[data-tab="${$(this).attr('data-tab')}"]`).addClass('item-props-tab-content-selected');
+    })
+
+
+    // /stat
+    puter.fs.stat({ 
+        uid: item_uid,
+        returnSubdomains: true,
+        returnPermissions: true,
+        returnVersions: true,
+        returnSize: true,
+        success: function (fsentry){
+            // hide versions tab if item is a directory
+            if(fsentry.is_dir){
+                $(el_window).find('[data-tab="versions"]').hide();
+            }
+            // name
+            $(el_window).find('.item-prop-val-name').html(fsentry.name);
+            // path
+            $(el_window).find('.item-prop-val-path').html(item_path);
+            // original name & path
+            if(fsentry.metadata){
+                try{
+                    let metadata = JSON.parse(fsentry.metadata);
+                    if(metadata.original_name){
+                        $(el_window).find('.item-prop-val-original-name').html(metadata.original_name);
+                        $(el_window).find('.item-prop-original-name').show();
+                    }
+                    if(metadata.original_path){
+                        $(el_window).find('.item-prop-val-original-path').html(metadata.original_path);
+                        $(el_window).find('.item-prop-original-path').show();
+                    }
+                }catch(e){}
+            }
+
+            // shortcut to
+            if(fsentry.shortcut_to && fsentry.shortcut_to_path){
+                $(el_window).find('.item-prop-val-shortcut-to').html(fsentry.shortcut_to_path);
+            }
+            // uid
+            $(el_window).find('.item-prop-val-uid').html(fsentry.id);
+            // type
+            $(el_window).find('.item-prop-val-type').html(fsentry.is_dir ? 'Directory' : (fsentry.type === null ? '-' : fsentry.type));
+            // size
+            $(el_window).find('.item-prop-val-size').html(fsentry.size === null || fsentry.size === undefined  ? '-' : byte_format(fsentry.size));
+            // modified
+            $(el_window).find('.item-prop-val-modified').html(fsentry.modified === 0 ? '-' : timeago.format(fsentry.modified*1000));
+            // created
+            $(el_window).find('.item-prop-val-created').html(fsentry.created === 0 ? '-' : timeago.format(fsentry.created*1000));
+            // subdomains
+            if(fsentry.subdomains && fsentry.subdomains.length > 0 ){
+                fsentry.subdomains.forEach(subdomain => {
+                    $(el_window).find('.item-prop-val-websites').append(`<p class="item-prop-website-entry" data-uuid="${subdomain.uuid}" style="margin-bottom:5px; margin-top:5px;"><a target="_blank" href="${subdomain.address}">${subdomain.address}</a> (<span class="disassociate-website-link" data-uuid="${subdomain.uuid}" data-subdomain="${extractSubdomain(subdomain.address)}">disassociate</span>)</p>`);
+                });
+            }
+            else{
+                $(el_window).find('.item-prop-val-websites').append('-');
+            }
+            // versions
+            if(fsentry.versions && fsentry.versions.length > 0 ){
+                fsentry.versions.reverse().forEach(version => {
+                    $(el_window).find('.item-props-version-list')
+                        .append(`<div class="item-prop-version-entry">${version.user? version.user.username : ''} &bull; ${timeago.format(version.timestamp*1000)}<p style="font-size:10px;">${version.id}</p></div>`);
+                });
+            }
+            else{
+                $(el_window).find('.item-props-version-list').append('-');
+            }
+
+            // owner
+            $(el_window).find('.item-prop-val-permissions').append(`<p class="item-prop-perm-entry" style="margin-bottom:5px; margin-top:5px;">${(fsentry.owner.email === undefined || fsentry.owner.email === null) ? fsentry.owner.username : fsentry.owner.email} (owner)</p>`);
+
+            // other users with access
+            if(fsentry.permissions && fsentry.permissions.length > 0 ){
+                fsentry.permissions.forEach(perm => {
+                    let h = ``;
+                    // username/email
+                    h += `<p class="item-prop-perm-entry" data-perm-uid="${perm.uid}" style="margin-bottom:5px; margin-top:5px;">${perm.email ?? perm.username} `;
+                    // remove
+                    h += `(<span class="remove-permission-link" data-perm-uid="${perm.uid}">remove</span>)`;
+                    $(el_window).find('.item-prop-val-permissions').append(h);
+                });
+            }
+            else{
+                $(el_window).find('.item-prop-val-permissions').append('-');
+            }
+
+            $(el_window).find(`.disassociate-website-link`).on('click', function(e){
+                puter.hosting.update(
+                    $(e.target).attr('data-subdomain'), 
+                    null).then(()=>{ 
+                        $(el_window).find(`.item-prop-website-entry[data-uuid="${$(e.target).attr('data-uuid')}"]`).remove();
+                        if($(el_window).find(`.item-prop-website-entry`).length === 0){
+                            $(el_window).find(`.item-prop-val-websites`).html('-');
+                            // remove the website badge from all instances of the dir
+                            $(`.item[data-uid="${item_uid}"]`).find('.item-has-website-badge').fadeOut(200);
+                        }
+                    }
+                )
+            })
+            
+            $(el_window).find('.remove-permission-link').on('click', function(e){
+                const el_remove_perm_link= this;
+                const perm_uid = $(el_remove_perm_link).attr('data-perm-uid');
+                $.ajax({
+                    url: api_origin + "/remove-perm",
+                    type: 'POST',
+                    async: true,
+                    contentType: "application/json",
+                    data: JSON.stringify({
+                        uid: perm_uid,
+                    }),
+                    headers: {
+                        "Authorization": "Bearer "+auth_token
+                    },
+                    statusCode: {
+                        401: function () {
+                            logout();
+                        },
+                    },        
+                    success: async function (res){
+                        $(el_window).find(`.item-prop-perm-entry[data-perm-uid="${perm_uid}"]`).remove();
+                        
+                        if($(el_window).find(`.item-prop-perm-entry`).length === 0){
+                            $(el_window).find(`.item-prop-val-permissions`).html('-');
+                            // todo is it better to combine the following two queriesinto one css selector?
+                            $(`.item[data-uid="${item_uid}"]`).find(`.item-is-shared`).fadeOut(200);
+                            // todo optim do this only if item is a directory
+                            // todo this has to be case-insensitive but the `i` selector doesn't work on ^=
+                            $(`.item[data-path^="${item_path}/"]`).find(`.item-is-shared`).fadeOut(200);
+                        }
+                    },
+                    complete: function(){
+                    }
+                })
+            })
+        }
+    })
+}
+
+export default UIWindowItemProperties

src/UI/UIWindowLogin.js

@@ -0,0 +1,171 @@
+import UIWindow from './UIWindow.js'
+import UIWindowSignup from './UIWindowSignup.js'
+import UIWindowRecoverPassword from './UIWindowRecoverPassword.js'
+
+async function UIWindowLogin(options){
+    options = options ?? {};
+    options.reload_on_success = options.reload_on_success ?? false;
+    options.has_head = options.has_head ?? true;
+    options.send_confirmation_code = options.send_confirmation_code ?? false;
+
+    return new Promise(async (resolve) => {
+        const internal_id = window.uuidv4();
+        let h = ``;
+        h += `<div style="max-width: 500px; min-width: 340px;">`;
+            if(!options.has_head && options.show_close_button !== false)
+                h += `<div class="generic-close-window-button"> &times; </div>`;
+            h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
+                // title
+                h += `<h1 class="login-form-title">Log In</h1>`;
+                // login form
+                h += `<form class="login-form">`;
+                    // error msg
+                    h += `<div class="login-error-msg"></div>`;
+                    // username/email
+                    h += `<div style="overflow: hidden;">`;
+                        h += `<label for="email_or_username-${internal_id}">Email or Username</label>`;
+                        h += `<input id="email_or_username-${internal_id}" class="email_or_username" type="text" name="email_or_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false" autocomplete="username"/>`;
+                    h += `</div>`;
+                    // password
+                    h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+                        h += `<label for="password-${internal_id}">Password</label>`;
+                        h += `<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="current-password" />`;
+                    h += `</div>`;
+                    // login
+                    h += `<button class="login-btn button button-primary button-block button-normal">Log in</button>`;
+                    // password recovery
+                    h += `<p style="text-align:center; margin-bottom: 0;"><span class="forgot-password-link">Forgot password?</span></p>`;
+                h += `</form>`;
+            h += `</div>`;
+            // create account link
+            if(options.show_signup_button === undefined || options.show_signup_button){
+                h += `<div class="c2a-wrapper" style="padding:20px;">`;
+                    h += `<button class="signup-c2a-clickable">Create Free Account</button>`;
+                h += `</div>`;
+            }
+        h += `</div>`;
+        
+        const el_window = await UIWindow({
+            title: null,
+            app: 'login',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_draggable: options.is_draggable ?? true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            ...options.window_options,
+            width: 350,
+            dominant: true,
+            on_close: ()=>{
+                resolve(false)
+            },
+            onAppend: function(this_window){
+                $(this_window).find(`.email_or_username`).get(0).focus({preventScroll:true});
+            },
+            window_class: 'window-login',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '0',
+                'background-color': 'rgb(255 255 255)',
+                'backdrop-filter': 'blur(3px)',
+                'display': 'flex',
+                'flex-direction': 'column',
+                'justify-content': 'center',
+                'align-items': 'center',
+            }    
+        })
+
+        $(el_window).find('.forgot-password-link').on('click', function(e){
+            UIWindowRecoverPassword({
+                window_options: {
+                    backdrop: true,
+                    close_on_backdrop_click: false,
+                }
+            });
+        })
+
+        $(el_window).find('.login-btn').on('click', function(e){
+            const email_username = $(el_window).find('.email_or_username').val();
+            const password = $(el_window).find('.password').val();
+            let data;
+        
+            if(is_email(email_username)){
+                data = JSON.stringify({ 
+                    email: email_username, 
+                    password: password
+                })
+            }else{
+                data = JSON.stringify({ 
+                    username: email_username, 
+                    password: password
+                })
+            }
+        
+            $(el_window).find('.login-error-msg').hide();
+        
+            let headers = {};
+            if(window.custom_headers)
+                headers = window.custom_headers;
+    
+            $.ajax({
+                url: gui_origin + "/login",
+                type: 'POST',
+                async: false,
+                headers: headers,
+                contentType: "application/json",
+                data: data,				
+                success: function (data){
+                    update_auth_data(data.token, data.user);
+                    
+                    if(options.reload_on_success){
+                        window.onbeforeunload = null;
+                        window.location.replace('/');
+                    }else
+                        resolve(true);
+                    $(el_window).close();
+                },
+                error: function (err){
+                    $(el_window).find('.login-error-msg').html(err.responseText);
+                    $(el_window).find('.login-error-msg').fadeIn();
+                }
+            });	
+        })  
+
+        $(el_window).find('.login-form').on('submit', function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        })
+
+        $(el_window).find('.signup-c2a-clickable').on('click', async function(e){
+            //destroy this window
+            $(el_window).close();
+            // create Signup window
+            const signup = await UIWindowSignup({
+                referrer: options.referrer,
+                show_close_button: options.show_close_button,
+                reload_on_success: options.reload_on_success,
+                window_options: options.window_options,
+                send_confirmation_code: options.send_confirmation_code,
+            });
+            if(signup)
+                resolve(true);
+        })
+    }) 
+}
+
+export default UIWindowLogin

src/UI/UIWindowLoginInProgress.js

@@ -0,0 +1,59 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowLoginInProgress(options){
+    return new Promise(async (resolve) => {
+        options = options ?? {};
+
+        let h = '';        
+        h += `<div class="login-progress">`;
+            h += `<h1 style="text-align: center;
+            font-size: 20px;
+            padding: 10px;
+            font-weight: 300; margin: -10px 10px 20px 10px;">Logging in as <strong>${options.user_info.email === null ? options.user_info.username : options.user_info.email}</strong></h1>`;
+            // spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: 'Instant Login!',
+            app: 'change-passowrd',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: false,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: false,
+            allow_user_select: false,
+            width: 350,
+            height: 'auto',
+            dominant: true,
+            show_in_taskbar: false,
+            backdrop: true,
+            stay_on_top: true,
+            onAppend: function(this_window){
+            },
+            window_class: 'window-login-progress',
+            body_css: {
+                width: 'initial',
+                height: '100%',
+                'background-color': 'rgb(245 247 249)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        setTimeout(() => {
+            $(el_window).close();
+        }, 3000);
+    })
+}
+
+export default UIWindowLoginInProgress

src/UI/UIWindowMoveProgress.js

@@ -0,0 +1,63 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowMoveProgress(options){
+    let h = '';
+    h += `<div data-move-operation-id="${options.operation_id}">`;
+        h += `<div>`;
+            // spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+            // Progress report
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // msg
+                h += `<span class="move-progress-msg">Moving </span>`;
+                h += `<span class="move-from" style="font-weight:strong;"></span>`;
+            h += `</div>`;
+            // progress
+            h += `<div class="move-progress-bar-container" style="clear:both; margin-top:20px; border-radius:3px;">`;
+                h += `<div class="move-progress-bar"></div>`;
+            h += `</div>`;
+            // cancel
+            // h += `<button style="float:right; margin-top: 15px; margin-right: -2px;" class="button button-small move-cancel-btn">Cancel</button>`;
+        h +=`</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `moveing`,
+        icon: window.icons[`app-icon-moveing.svg`],
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        window_class: 'window-move-progress',
+        width: 450,
+        dominant: true,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '22px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245, .95)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    });
+
+    $(el_window).find('.move-cancel-btn').on('click', function(e){
+        operation_cancelled[options.operation_id] = true;
+        $(el_window).close();
+    })
+
+    return el_window;
+}
+
+export default UIWindowMoveProgress

src/UI/UIWindowMyWebsites.js

@@ -0,0 +1,178 @@
+import UIWindow from './UIWindow.js'
+import UIContextMenu from './UIContextMenu.js'
+import UIAlert from './UIAlert.js'
+
+async function UIWindowMyWebsites(options){
+    let h = '';
+    h += `<div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `My Websites`,
+        app: 'my-websites',
+        single_instance: true,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        width: 400,
+        dominant: true,
+        onAppend: function(el_window){
+        },
+        window_css:{
+        },
+        body_css: {
+            padding: '10px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245)',
+            'backdrop-filter': 'blur(3px)',
+            'padding-bottom': 0,
+            'height': '351px',
+            'box-sizing': 'border-box',
+        }    
+    });
+
+    // /sites
+    let init_ts = Date.now();
+    let loading = setTimeout(function(){
+        $(el_window).find('.window-body').html(`<p style="text-align: center;
+        margin-top: 40px;
+        margin-bottom: 50px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        color: #596c7c;">Loading...</p>`);
+    }, 1000);
+
+    puter.hosting.list().then(function (sites){
+        setTimeout(function(){
+            // clear loading
+            clearTimeout(loading);
+            // user has sites
+            if(sites.length > 0){
+                let h ='';
+                for(let i=0; i< sites.length; i++){
+                    h += `<div class="mywebsites-card" data-uuid="${sites[i].uid}">`;
+                        h += `<a class="mywebsites-address-link" href="https://${sites[i].subdomain}.puter.site" target="_blank">${sites[i].subdomain}.puter.site</a>`;
+                        h += `<img class="mywebsites-site-setting" data-site-uuid="${sites[i].uid}" src="${html_encode(window.icons['cog.svg'])}">`;
+                        // there is a directory associated with this site
+                        if(sites[i].root_dir){
+                            h += `<p class="mywebsites-dir-path" data-path="${html_encode(sites[i].root_dir.path)}" data-name="${sites[i].root_dir.name}" data-uuid="${sites[i].root_dir.id}">`;
+                                h+= `<img src="${html_encode(window.icons['folder.svg'])}">`;
+                                h+= `${sites[i].root_dir.path}`;
+                            h += `</p>`;
+                            h += `<p style="margin-bottom:0; margin-top: 20px; font-size: 13px;">`;
+                                h += `<span class="mywebsites-dis-dir" data-dir-uuid="${sites[i].root_dir.id}" data-site-uuid="${sites[i].uid}">`;
+                                h += `<img style="width: 16px; margin-bottom: -2px; margin-right: 4px;" src="${html_encode(window.icons['plug.svg'])}">Disassociate Folder</span>`;
+                            h += `</p>`;
+                        }
+                        h += `<p class="mywebsites-no-dir-notice" data-site-uuid="${sites[i].uid}" style="${sites[i].root_dir ? `display:none;` : `display:block;`}">No directory associated with this address.</p>`;
+                    h += `</div>`;
+                }
+                $(el_window).find('.window-body').html(h);
+            }
+            // has no sites
+            else{
+                $(el_window).find('.window-body').html(`<p style="text-align: center;
+                margin-top: 40px;
+                margin-bottom: 50px;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                color: #596c7c;">You haven't published any websites!</p>`);
+            }
+        }, Date.now() - init_ts < 1000 ? 0 : 2000);
+    })
+}
+
+$(document).on('click', '.mywebsites-dir-path', function(e){
+    e = e.target;
+    UIWindow({
+        path: $(e).attr('data-path'),
+        title: $(e).attr('data-name'),
+        icon: window.icons['folder.svg'],
+        uid: $(e).attr('data-uuid'),
+        is_dir: true,
+        app: 'explorer',
+    });
+})
+
+$(document).on('click', '.mywebsites-site-setting', function(e){
+    const pos = e.target.getBoundingClientRect();
+    UIContextMenu({
+        parent_element: e.target,
+        position: {top: pos.top+25, left: pos.left-193},
+        items: [
+            //--------------------------------------------------
+            // Release Address
+            //--------------------------------------------------
+            {
+                html: `Release Address`,
+                onClick: async function(){
+                    const alert_resp = await UIAlert({
+                        message: `Are you sure you want to release this address?`,
+                        buttons:[
+                            {
+                                label: 'Yes, Release It',
+                                type: 'primary',
+                            },
+                            {
+                                label: 'Cancel'
+                            },
+                        ]
+                    })
+                    if(alert_resp !== 'Yes, Release It'){
+                        return;
+                    }
+                
+                    $.ajax({
+                        url: api_origin + "/delete-site",
+                        type: 'POST',
+                        data: JSON.stringify({ 
+                            site_uuid: $(e.target).attr('data-site-uuid'),
+                        }),
+                        async: false,
+                        contentType: "application/json",
+                        headers: {
+                            "Authorization": "Bearer "+auth_token
+                        },
+                        statusCode: {
+                            401: function () {
+                                logout();
+                            },
+                        },        
+                        success: function (){ 
+                            $(`.mywebsites-card[data-uuid="${$(e.target).attr('data-site-uuid')}"]`).fadeOut();
+                        }  
+                    })
+                }
+            }
+        ]
+    });
+})
+
+$(document).on('click', '.mywebsites-dis-dir', function(e){
+    puter.hosting.delete(
+        // dir
+        $(e.target).attr('data-dir-uuid'),
+        // hostname
+        $(e.target).attr('data-site-uuid'), 
+        // success
+        function (){ 
+            $(`.mywebsites-no-dir-notice[data-site-uuid="${$(e.target).attr('data-site-uuid')}"]`).show();
+            $(`.mywebsites-dir-path[data-uuid="${$(e.target).attr('data-dir-uuid')}"]`).remove();
+            // remove the website badge from all instances of the dir
+            $(`.item[data-uid="${$(e.target).attr('data-dir-uuid')}"]`).find('.item-has-website-badge').fadeOut(300);
+            $(e.target).hide();
+        }
+    )
+})
+export default UIWindowMyWebsites

src/UI/UIWindowNewFolderProgress.js

@@ -0,0 +1,56 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowNewFolderProgress(options){
+    let h = '';
+    h += `<div data-newfolder-operation-id="${options.operation_id}">`;
+        h += `<div>`;
+            // spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+            // message
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // text
+                h += `<span class="newfolder-progress-msg">Taking a little longer than usual. Please wait...</span>`;
+            h += `</div>`;
+        h +=`</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Creating New Folder`,
+        icon: window.icons[`app-icon-newfolder.svg`],
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        window_class: 'window-newfolder-progress',
+        width: 450,
+        dominant: true,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '22px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245, .95)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    });
+
+    $(el_window).find('.newfolder-cancel-btn').on('click', function(e){
+        operation_cancelled[options.operation_id] = true;
+        $(el_window).close();
+    })
+
+    return el_window;
+}
+
+export default UIWindowNewFolderProgress

src/UI/UIWindowNewPassword.js

@@ -0,0 +1,126 @@
+import UIWindow from './UIWindow.js'
+import UIAlert from './UIAlert.js'
+import UIWindowLogin from './UIWindowLogin.js'
+
+async function UIWindowNewPassword(options){
+    return new Promise(async (resolve) => {
+        options = options ?? {};
+
+        const internal_id = window.uuidv4();
+        let h = '';
+        h += `<div class="change-password" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
+            // error msg
+            h += `<div class="form-error-msg"></div>`;
+            // success msg
+            h += `<div class="form-success-msg"></div>`;
+            // new password
+            h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+                h += `<label for="new-password-${internal_id}">New Password</label>`;
+                h += `<input class="new-password" id="new-password-${internal_id}" type="password" name="new-password" autocomplete="off" />`;
+            h += `</div>`;
+            // confirm new password
+            h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+                h += `<label for="confirm-new-password-${internal_id}">Confirm New Password</label>`;
+                h += `<input class="confirm-new-password" id="confirm-new-password-${internal_id}" type="password" name="confirm-new-password" autocomplete="off" />`;
+            h += `</div>`;
+
+            // Change Password
+            h += `<button class="change-password-btn button button-primary button-block button-normal">Set New Password</button>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: 'Set New Password',
+            app: 'change-passowrd',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: false,
+            allow_user_select: false,
+            width: 350,
+            height: 'auto',
+            dominant: true,
+            show_in_taskbar: false,
+            onAppend: function(this_window){
+                $(this_window).find(`.new-password`).get(0)?.focus({preventScroll:true});
+            },
+            window_class: 'window-publishWebsite',
+            body_css: {
+                width: 'initial',
+                height: '100%',
+                'background-color': 'rgb(245 247 249)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        $(el_window).find('.change-password-btn').on('click', function(e){
+            const new_password = $(el_window).find('.new-password').val();
+            const confirm_new_password = $(el_window).find('.confirm-new-password').val();
+
+            if(new_password === '' || confirm_new_password === ''){
+                $(el_window).find('.form-error-msg').html('All fields are required.');
+                $(el_window).find('.form-error-msg').fadeIn();
+                return;
+            }
+            else if(new_password !== confirm_new_password){
+                $(el_window).find('.form-error-msg').html('`New Password` and `Confirm New Password` do not match.');
+                $(el_window).find('.form-error-msg').fadeIn();
+                return;
+            }
+            
+            $(el_window).find('.form-error-msg').hide();
+        
+            $.ajax({
+                url: api_origin + "/set-pass-using-token",
+                type: 'POST',
+                async: true,
+                contentType: "application/json",
+                data: JSON.stringify({
+                    password: new_password,
+                    token: options.token,
+                    user_id: options.user,
+                }),                    
+                success: async function (data){
+                    $(el_window).close();
+                    await UIAlert({
+                        message: 'Password changed successfully.',
+                        body_icon: window.icons['c-check.svg'],
+                        stay_on_top: true,
+                        backdrop: true,
+                        buttons:[
+                            {
+                                label: 'Proceed to Login',
+                                type: 'primary',
+                            },
+                        ],
+                        window_options: {
+                            backdrop: true,
+                            close_on_backdrop_click: false,
+                        }
+                    })
+                    await UIWindowLogin({
+                        reload_on_success: true,
+                        window_options:{
+                            has_head: false
+                        }
+                    });
+                },
+                error: function (err){
+                    $(el_window).find('.form-error-msg').html(err.responseText);
+                    $(el_window).find('.form-error-msg').fadeIn();
+                }
+            });	
+        })
+    })
+}
+
+export default UIWindowNewPassword

src/UI/UIWindowProgressEmptyTrash.js

@@ -0,0 +1,56 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowProgressEmptyTrash(options){
+    let h = '';
+    h += `<div data-newfolder-operation-id="${options.operation_id}">`;
+        h += `<div>`;
+            // spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+            // message
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // text
+                h += `<span class="newfolder-progress-msg">Emptying the Trash...</span>`;
+            h += `</div>`;
+        h +=`</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Creating New Folder`,
+        icon: window.icons[`app-icon-newfolder.svg`],
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        window_class: 'window-newfolder-progress',
+        width: 450,
+        dominant: true,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '22px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245, .95)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    });
+
+    $(el_window).find('.newfolder-cancel-btn').on('click', function(e){
+        operation_cancelled[options.operation_id] = true;
+        $(el_window).close();
+    })
+
+    return el_window;
+}
+
+export default UIWindowProgressEmptyTrash

src/UI/UIWindowPublishWebsite.js

@@ -0,0 +1,116 @@
+import UIWindow from './UIWindow.js'
+import UIWindowMyWebsites from './UIWindowMyWebsites.js'
+
+async function UIWindowPublishWebsite(target_dir_uid, target_dir_name, target_dir_path){
+    let h = '';
+    h += `<div class="window-publishWebsite-content" style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
+        // success
+        h += `<div class="window-publishWebsite-success">`;
+            h += `<img src="${html_encode(window.icons['c-check.svg'])}" style="width:80px; height:80px; display: block; margin:10px auto;">`;
+            h += `<p style="text-align:center;"><strong>${target_dir_name}</strong> has been published to:<p>`;
+            h += `<p style="text-align:center;"><a class="publishWebsite-published-link" target="_blank"></a><img class="publishWebsite-published-link-icon" src="${html_encode(window.icons['launch.svg'])}"></p>`;
+            h += `<button class="button button-normal button-block button-primary publish-window-ok-btn" style="margin-top:20px;">OK</button>`;
+        h+= `</div>`;
+        // form
+        h += `<form class="window-publishWebsite-form">`;
+            // error msg
+            h += `<div class="publish-website-error-msg"></div>`;
+            // subdomain
+            h += `<div style="overflow: hidden;">`;
+                h += `<label style="margin-bottom: 10px;">Pick a name for your website:</label>`;
+                h += `<div style="font-family: monospace;">https://<input class="publish-website-subdomain" style="width:235px;" type="text" autocomplete="subdomain" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>.${window.hosting_domain}</div>`;
+            h += `</div>`;
+            // uid
+            h += `<input class="publishWebsiteTargetDirUID" type="hidden" value="${target_dir_uid}"/>`;
+            // Publish
+            h += `<button class="publish-btn button button-action button-block button-normal">Publish</button>`
+        h += `</form>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: 'Publish Website',
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        width: 450,
+        dominant: true,
+        onAppend: function(this_window){
+            $(this_window).find(`.publish-website-subdomain`).val(generate_identifier());
+            $(this_window).find(`.publish-website-subdomain`).get(0).focus({preventScroll:true});
+        },
+        window_class: 'window-publishWebsite',
+        window_css:{
+            height: 'initial'
+        },
+        body_css: {
+            width: 'initial',
+            height: '100%',
+            'background-color': 'rgb(245 247 249)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    })
+
+    $(el_window).find('.publish-btn').on('click', function(e){
+        // todo do some basic validation client-side
+
+        //Subdomain
+        let subdomain = $(el_window).find('.publish-website-subdomain').val();
+    
+        // disable 'Publish' button
+        $(el_window).find('.publish-btn').prop('disabled', true);
+
+        puter.hosting.create(
+            subdomain, 
+            target_dir_path).then((res)=>{
+                $(el_window).find('.window-publishWebsite-form').hide(100, function(){
+                    let url = 'https://' + subdomain + '.' + window.hosting_domain + '/';
+                    $(el_window).find('.publishWebsite-published-link').attr('href', url);
+                    $(el_window).find('.publishWebsite-published-link').text(url);
+                    $(el_window).find('.window-publishWebsite-success').show(100)
+                    $(`.item[data-uid="${target_dir_uid}"] .item-has-website-badge`).show();
+                });
+
+                // find all items whose path starts with target_dir_path
+                $(`.item[data-path^="${target_dir_path}"]`).each(function(){
+                    // show the link badge
+                    $(this).find('.item-has-website-url-badge').show();
+                    // update item's website_url attribute
+                    $(this).attr('data-website_url', url + $(this).attr('data-path').substring(target_dir_path.length));
+                })
+
+                update_sites_cache();
+            }).catch((err)=>{
+                $(el_window).find('.publish-website-error-msg').html(
+                    err.message + (
+                        err.code === 'subdomain_limit_reached' ? 
+                            ' <span class="manage-your-websites-link">Manage Your Subdomains</span>' : ''
+                    )
+                );
+                $(el_window).find('.publish-website-error-msg').fadeIn();
+                // re-enable 'Publish' button
+                $(el_window).find('.publish-btn').prop('disabled', false);
+            })
+    })
+
+    $(el_window).find('.publish-window-ok-btn').on('click', function(){
+        $(el_window).close();
+    })
+}
+
+$(document).on('click', '.manage-your-websites-link', async function(e){
+    UIWindowMyWebsites();
+})
+
+
+export default UIWindowPublishWebsite

src/UI/UIWindowQR.js

@@ -0,0 +1,61 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowQR(options){
+    return new Promise(async (resolve) => {
+        options = options ?? {};
+
+        let h = '';
+        // close button containing the multiplication sign
+        h += `<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>`;
+        h += `<div class="otp-qr-code">`;
+            h += `<h1 style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">Scan the code below to log into this session from other devices</h1>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: 'Instant Login!',
+            app: 'instant-login',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: false,
+            selectable_body: false,
+            draggable_body: false,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: false,
+            allow_user_select: false,
+            backdrop: true,
+            width: 350,
+            height: 'auto',
+            dominant: true,
+            show_in_taskbar: false,
+            draggable_body: true,
+            onAppend: function(this_window){
+            },
+            window_class: 'window-qr',
+            body_css: {
+                width: 'initial',
+                height: '100%',
+                'background-color': 'rgb(245 247 249)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        // generate auth token QR code
+        new QRCode($(el_window).find('.otp-qr-code').get(0), {
+            text: window.gui_origin + '?auth_token=' + window.auth_token,
+            width: 155,
+            height: 155,
+            colorDark : "#000000",
+            colorLight : "#ffffff",
+            correctLevel : QRCode.CorrectLevel.H
+        });        
+    })
+}
+
+export default UIWindowQR

src/UI/UIWindowRecoverPassword.js

@@ -0,0 +1,110 @@
+import UIWindow from './UIWindow.js'
+import UIAlert from './UIAlert.js'
+
+function UIWindowRecoverPassword(options){
+    return new Promise(async (resolve) => {
+        options = options ?? {};
+
+        let h = '';
+        h += `<div style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #3e5362;">`;
+            h += `<h3 style="text-align:center; font-weight: 400; font-size: 20px;">Recover Password</h3>`;
+            h += `<form class="pass-recovery-form">`;
+                h += `<p style="text-align:center; padding: 0 20px;"></p>`;
+                h += `<div class="error"></div>`;
+                h += `<label>Email or Username</label>`;
+                h += `<input class="pass-recovery-username-or-email" type="text"/>`;
+                h += `<button type="submit" class="send-recovery-email button button-block button-primary" style="margin-top:10px;">Send Recovery Email</button>`;
+            h += `</form>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: null,
+            backdrop: options.backdrop ?? false,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: options.has_head ?? true,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            is_draggable: options.is_draggable ?? true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: options.stay_on_top ?? false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            width: 350,
+            dominant: true,
+            ...options.window_options,
+            onAppend: function(el_window){
+                $(el_window).find('.pass-recovery-username-or-email').first().focus();
+            },
+            window_class: 'window-item-properties',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                padding: '10px',
+                width: 'initial',
+                height: 'initial',
+                'background-color': 'rgba(231, 238, 245)',
+                'backdrop-filter': 'blur(3px)',
+            }
+        })
+        $(el_window).find('.pass-recovery-form').on('submit', function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        })
+
+        // Send recovery email
+        $(el_window).find('.send-recovery-email').on('click', function(e){
+            let email, username;
+            let input = $(el_window).find('.pass-recovery-username-or-email').val();
+            if(is_email(input))
+                email = input;
+            else
+                username = input;
+
+            // todo validation before sending
+            $.ajax({
+                url: api_origin + "/send-pass-recovery-email",
+                type: 'POST',
+                async: true,
+                contentType: "application/json",
+                data: JSON.stringify({
+                    email: email,
+                    username: username,
+                }),    
+                statusCode: {
+                    401: function () {
+                        logout();
+                    },
+                },        
+                success: async function (res){
+                    $(el_window).close();
+                    await UIAlert({
+                        message: res.message,
+                        body_icon: window.icons['c-check.svg'],
+                        stay_on_top: true,
+                        backdrop: true,
+                        window_options: {
+                            backdrop: true,
+                            close_on_backdrop_click: false,
+                        }
+                    })           
+                },
+                error: function (err){
+                    $(el_window).find('.error').html(err.responseText);
+                    $(el_window).find('.error').fadeIn();
+                },
+                complete: function(){
+                }
+            })
+        })
+    })
+}
+
+export default UIWindowRecoverPassword

src/UI/UIWindowRefer.js

@@ -0,0 +1,102 @@
+import UIWindow from './UIWindow.js'
+import UIPopover from './UIPopover.js'
+
+async function UIWindowRefer(options){
+    let h = '';
+    let copy_btn_text = 'Copy Link';
+    let copied_btn_text = 'Copied!';
+    const url = `${gui_origin}/?r=${user.referral_code}`;
+
+    h += `<div>`;
+        h += `<div class="qr-code-window-close-btn generic-close-window-button disable-user-select"> &times; </div>`;
+        h += `<img src="${window.icons['present.svg']}" style="width: 70px; margin: 20px auto 20px; display: block; margin-bottom: 20px;">`;
+        h += `<p style="text-align: center; font-size: 16px; padding: 20px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">Get 1 GB for every friend who creates and confirms an account on Puter. Your friend will get 1 GB too!</p>`;
+        h += `<label style="font-weight: bold;">Invite link</label>`;
+        h += `<input type="text" style="margin-bottom:10px;" class="downloadable-link" readonly />`;
+        h += `<button class="button button-primary copy-downloadable-link" style="width:130px;">${copy_btn_text}</button>`
+        h += `<img class="share-copy-link-on-social" src="${window.icons['share-outline.svg']}">`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Refer a friend!`,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_draggable: true,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        onAppend: function(el_window){
+        },
+        width: 500,
+        dominant: true,
+        window_css: {
+            height: 'initial',
+        },
+        body_css: {
+            padding: '10px',
+            width: 'initial',
+            'max-height': 'calc(100vh - 200px)',
+            'background-color': 'rgb(241 246 251)',
+            'backdrop-filter': 'blur(3px)',
+            'padding': '10px 20px 20px 20px',
+            'height': 'initial',
+        }    
+    });
+
+    $(el_window).find('.window-body .downloadable-link').val(url);
+
+    $(el_window).find('.window-body .share-copy-link-on-social').on('click', function(e){    
+        const social_links = socialLink({url: url, title: `Get 1 GB of free storage on Puter.com!`, description: `Get 1 GB of free storage on Puter.com!`});
+
+        let social_links_html = ``;
+        social_links_html += `<div style="padding: 10px;">`;
+            social_links_html += `<p style="margin: 0; text-align: center; margin-bottom: 6px; color: #484a57; font-weight: bold; font-size: 14px;">Share to</p>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.twitter}" style=""><svg viewBox="0 0 24 24" aria-hidden="true" style="opacity: 0.7;"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.whatsapp}" style=""><img src="${window.icons['logo-whatsapp.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.facebook}" style=""><img src="${window.icons['logo-facebook.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.linkedin}" style=""><img src="${window.icons['logo-linkedin.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links.reddit}" style=""><img src="${window.icons['logo-reddit.svg']}"></a>`
+            social_links_html += `<a class="copy-link-social-btn" target="_blank" href="${social_links['telegram.me']}" style=""><img src="${window.icons['logo-telegram.svg']}"></a>`
+        social_links_html += '</div>';
+
+        UIPopover({
+            content: social_links_html,
+            snapToElement: this,
+            parent_element: this,
+            // width: 300,
+            height: 100,
+            position: 'bottom',
+        });    
+    })
+
+    $(el_window).find('.window-body .copy-downloadable-link').on('click', async function(e){
+        var copy_btn = this;
+        if (navigator.clipboard) {
+            // Get link text
+            const selected_text = $(el_window).find('.window-body .downloadable-link').val();
+            // copy selected text to clipboard
+            await navigator.clipboard.writeText(selected_text);
+        }
+        else{
+            // Get the text field
+            $(el_window).find('.window-body .downloadable-link').select();
+            // Copy the text inside the text field
+            document.execCommand('copy');
+        }
+
+        $(this).html(copied_btn_text);
+        setTimeout(function(){
+            $(copy_btn).html(copy_btn_text);
+        }, 1000);
+    });
+}
+
+export default UIWindowRefer

src/UI/UIWindowRequestFiles.js

@@ -0,0 +1,75 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowRequestFiles(options){
+    let h = '';
+    h += `<div>`;
+        h += `<h3 style="margin-bottom: 0;">File Request Link:</h3>`;
+        h += `<p style="word-break: break-all;" class="filereq-link"></p>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Request Files`,
+        icon: null,
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: true,
+        selectable_body: false,
+        draggable_body: false,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: true,
+        allow_user_select: true,
+        width: 400,
+        dominant: true,
+        onAppend: function(el_window){
+        },
+        window_class: 'window-item-properties',
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '10px',
+            width: 'initial',
+            'max-height': 'calc(100vh - 200px)',
+            'background-color': 'rgba(231, 238, 245)',
+            'backdrop-filter': 'blur(3px)',
+            'padding-bottom': 0,
+            'height': 'initial',
+        }    
+    });
+
+    //check if there is a fr token available
+    let stat = await puter.fs.stat(options.dir_path);
+    if(stat.file_request_url !== undefined && stat.file_request_url !== null && stat.file_request_url !== ''){
+        $(el_window).find('.filereq-link').html(stat.file_request_url);
+    }
+    // generate new fr url
+    else{
+        $.ajax({
+            url: api_origin + "/filereq",
+            type: 'POST',
+            data: JSON.stringify({ 
+                dir_path: options.dir_path
+            }),
+            async: true,
+            contentType: "application/json",
+            headers: {
+                "Authorization": "Bearer "+auth_token
+            },
+            statusCode: {
+                401: function (){
+                    logout();
+                },
+            },
+            success: function (filereq){
+                $(el_window).find('.filereq-link').html(filereq.url);
+            }
+        });         
+    }
+}
+
+export default UIWindowRequestFiles

src/UI/UIWindowRequestPermission.js

@@ -0,0 +1,125 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowRequestPermission(options){
+    options = options ?? {};
+    options.reload_on_success = options.reload_on_success ?? false;
+    return new Promise(async (resolve) => {
+        let drivers = [
+            {
+                name: 'puter-chat-completion',
+                human_name: 'AI Chat Completion',
+                description: 'This app wants to generate text using AI. This may incur costs on your behalf.',
+            },
+            {
+                name: 'puter-image-generation',
+                human_name: 'AI Image Generation',
+                description: 'This app wants to generate images using AI. This may incur costs on your behalf.',
+            },
+            {
+                name: 'puter-kvstore',
+                human_name: 'Puter Storage',
+                description: 'This app wants to securely store data in your Puter account. This app will not be able to access your personal data or data stored by other apps.',
+            }
+
+        ]
+
+        let parts = options.permission.split(":");
+        let driver_name = parts[1];
+        let action_name = parts[2];
+        
+        function findDriverByName(driverName) {
+            return drivers.find(driver => driver.name === driverName);
+        }
+        
+        let driver = findDriverByName(driver_name);
+
+        if(driver === undefined){
+            resolve(false);
+            return;
+        }
+
+        let h = ``;
+        h += `<div>`;
+            h += `<div style="padding: 20px; width: 100%; box-sizing: border-box;">`;
+                // title
+                h += `<h1 class="perm-title">"<span style="word-break: break-word;">${html_encode(options.app_uid ?? options.origin)}</span>" would Like to use ${html_encode(driver.human_name)}</h1>`;
+                // todo show the real description of action
+                h += `<p class="perm-description">${html_encode(driver.description)}</p>`;
+                // Allow/Don't Allow
+                h += `<button type="button" class="app-auth-allow button button-primary button-block" style="margin-top: 10px;">Allow</button>`;
+                h += `<button type="button" class="app-auth-dont-allow button button-default button-block" style="margin-top: 10px;">Don't Allow</button>`;
+            h += `</div>`;
+        h += `</div>`;
+        
+        const el_window = await UIWindow({
+            title: null,
+            app: 'request-authorization',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            is_draggable: true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            ...options.window_options,
+            width: 350,
+            dominant: true,
+            on_close: ()=>{
+                resolve(false)
+            },
+            onAppend: function(this_window){
+            },
+            window_class: 'window-login',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '0',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }
+        })
+
+        $(el_window).find('.app-auth-allow').on('click', async function(e){
+            $(this).addClass('disabled');
+
+            try{
+                const res = await fetch( window.api_origin + "/auth/grant-user-app", {
+                    "headers": {
+                    "Content-Type": "application/json",
+                    "Authorization": "Bearer " + window.auth_token,
+                    },
+                    "body": JSON.stringify({
+                        app_uid: options.app_uid,
+                        origin: options.origin,
+                        permission: options.permission 
+                    }),
+                    "method": "POST",
+                });
+            }catch(err){
+                console.error(err);
+                resolve(err);
+            }
+
+            resolve(true);
+        })  
+
+        $(el_window).find('.app-auth-dont-allow').on('click', function(e){
+            $(this).addClass('disabled');
+            $(el_window).close();
+            resolve(false);
+        })
+    }) 
+}
+
+export default UIWindowRequestPermission

src/UI/UIWindowSaveAccount.js

@@ -0,0 +1,167 @@
+import UIWindow from './UIWindow.js'
+import UIWindowEmailConfirmationRequired from './UIWindowEmailConfirmationRequired.js'
+
+async function UIWindowSaveAccount(options){
+    const internal_id = window.uuidv4();
+    options = options ?? {};
+    options.reload_on_success = options.reload_on_success ?? false;
+    options.send_confirmation_code = options.send_confirmation_code ?? false;
+
+    return new Promise(async (resolve) => {
+        let h = '';
+        h += `<div>`;
+            // success
+            h += `<div class="save-account-success">`;
+                h += `<img src="${html_encode(window.icons['c-check.svg'])}" style="width:50px; height:50px; display: block; margin:10px auto;">`;
+                h += `<p style="text-align:center; margin-bottom:10px;">Thank you for creating an account. This session has been saved.</p>`;
+                h += `<button class="button button-action button-block save-account-success-ok-btn">OK</button>`
+            h+= `</div>`;
+    
+            // form
+            h += `<div class="save-account-form" style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">`;
+                // title
+                h += `<h1 class="signup-form-title" style="margin-bottom:0;">Create Account</h1>`;
+                // description
+                h += `<p class="create-account-desc">${options.message ?? 'Create an account to save your current session and avoid losing your work.'}</p>`;
+                // signup form
+                h += `<form class="signup-form">`;
+                    // error msg
+                    h += `<div class="signup-error-msg"></div>`;
+                    // username
+                    h += `<div style="overflow: hidden;">`;
+                        h += `<label for="username-${internal_id}">Username</label>`;
+                        h += `<input id="username-${internal_id}" class="username" value="${options.default_username ?? ''}" type="text" autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
+                    h += `</div>`;
+                    // email
+                    h += `<div style="overflow: hidden; margin-top: 20px;">`;
+                        h += `<label for="email-${internal_id}">Email</label>`;
+                        h += `<input id="email-${internal_id}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
+                    h += `</div>`;
+                    // password
+                    h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+                        h += `<label for="password-${internal_id}">Password</label>`;
+                        h += `<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`;
+                    h += `</div>`;
+                    // bot trap - if this value is submitted server will ignore the request
+                    h += `<input type="text" name="p102xyzname" class="p102xyzname" value="">`;
+                    // Create Account
+                    h += `<button class="signup-btn button button-primary button-block button-normal">Create Account</button>`
+                h += `</form>`;
+            h += `</div>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: null,
+            icon: null,
+            uid: null,
+            app: 'save-account',
+            single_instance: true,
+            is_dir: false,
+            body_content: h,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            is_draggable: true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            width: 350,
+            dominant: true,
+            show_in_taskbar: false,
+            ...options.window_options,
+            onAppend: function(this_window){
+                if(options.default_username)
+                    $(this_window).find('.email').get(0).focus({preventScroll:true});
+                else
+                    $(this_window).find('.username').get(0).focus({preventScroll:true});
+            },
+            window_class: 'window-save-account',
+            window_css:{
+                height: 'initial',
+            },
+            on_close: ()=>{
+                resolve(false)
+            },
+            body_css: {
+                width: 'initial',
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        $(el_window).find('.signup-btn').on('click', function(e){
+            // todo do some basic validation client-side
+
+            //Username
+            let username = $(el_window).find('.username').val();
+        
+            //Email
+            let email = $(el_window).find('.email').val();
+        
+            //Password
+            let password = $(el_window).find('.password').val();
+            
+            // disable 'Create Account' button
+            $(el_window).find('.signup-btn').prop('disabled', true);
+
+            $.ajax({
+                url: api_origin + "/save_account",
+                type: 'POST',
+                async: true,
+                contentType: "application/json",
+                data: JSON.stringify({ 
+                    username: username, 
+                    email: email, 
+                    password: password,
+                    referrer: options.referrer,
+                    send_confirmation_code: options.send_confirmation_code,
+                }),
+                headers: {
+                    "Authorization": "Bearer "+auth_token
+                },        
+                success: async function (data){                    
+                    update_auth_data(data.token, data.user)
+
+                    //close this window
+                    if(data.user.email_confirmation_required){
+                        let is_verified = await UIWindowEmailConfirmationRequired({
+                            stay_on_top: true, 
+                            has_head: true
+                        });
+                        resolve(is_verified);
+                    }else{
+                        resolve(true);
+                    }
+
+                    $(el_window).find('.save-account-form').hide(100, ()=>{
+                        $(el_window).find('.save-account-success').show(100);
+                    })
+                },
+                error: function (err){
+                    $(el_window).find('.signup-error-msg').html(err.responseText);
+                    $(el_window).find('.signup-error-msg').fadeIn();
+                    // re-enable 'Create Account' button
+                    $(el_window).find('.signup-btn').prop('disabled', false);
+                }
+            });
+        })
+
+        $(el_window).find('.signup-form').on('submit', function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        })
+            
+        $(el_window).find('.save-account-success-ok-btn').on('click', ()=>{
+            $(el_window).close();
+        })
+
+        //remove login window
+        $(el_window).find('.signup-c2a-clickable').parents('.window').close();
+    })
+}
+
+export default UIWindowSaveAccount

src/UI/UIWindowSelfhostedWaitlist.js

@@ -0,0 +1,92 @@
+import UIWindow from './UIWindow.js'
+
+async function UIWindowSelfhostedWaitlist(options){
+    options = options ?? {};
+    options.reload_on_success = options.reload_on_success ?? false;
+
+    return new Promise(async (resolve) => {
+        getItem({
+            key: "joined_selfhosted_waitlist",
+            success: async function(resp){
+                if(resp.value){
+                    $(el_window).find('.join-waitlist-btn').hide();
+                    $(el_window).find('.waitlist-success-msg').show();
+                }else{
+                    $(el_window).find('.join-waitlist-btn').show();
+                    $(el_window).find('.waitlist-success-msg').hide();
+                }
+            }
+        })
+
+        let h = ``;
+        h += `<div>`;
+            h += `<div style="padding: 20px; width: 100%; box-sizing: border-box;">`;
+                // title
+                h += `<svg style="width: 70px; height: 70px; margin: 0 auto; display: block;" id="Icons" height="512" viewBox="0 0 60 60" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m45 19v29a3 3 0 0 1 -3 3h-34a3 3 0 0 1 -3-3v-29l20-15z" fill="#cce2ed"/><path d="m10 13.32v-8.66a1.656 1.656 0 0 1 1.66-1.66h2.68a1.656 1.656 0 0 1 1.66 1.66v4.34z" fill="#30649d"/><path d="m2.2 20.607a.861.861 0 0 0 1.226.23l21.083-15.179a.831.831 0 0 1 .982 0l21.08 15.179a.861.861 0 0 0 1.226-.23l1.056-1.574a.877.877 0 0 0 -.206-1.19l-23.156-16.683a.834.834 0 0 0 -.982 0l-23.156 16.683a.877.877 0 0 0 -.206 1.19z" fill="#3b7ac8"/><path d="m59 40v5a3 3 0 0 1 -3 3v1h-32v-1a3 3 0 0 1 -3-3v-5a3 3 0 0 1 3-3v-1h32v1a3 3 0 0 1 3 3z" fill="#30649d"/><rect fill="#3b7ac8" height="11" rx="3" width="38" x="21" y="26"/><rect fill="#3b7ac8" height="11" rx="3" width="38" x="21" y="48"/><path d="m26 55a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#76e4c1"/><path d="m30 55a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#76e4c1"/><g fill="#30649d"><path d="m47 55a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z"/><path d="m43 55a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z"/><path d="m51 55a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z"/><path d="m55 55a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z"/></g><path d="m26 44a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#76e4c1"/><path d="m30 44a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#76e4c1"/><path d="m47 44a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#23527c"/><path d="m43 44a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#23527c"/><path d="m51 44a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#23527c"/><path d="m55 44a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#23527c"/><path d="m26 33a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#76e4c1"/><path d="m30 33a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#76e4c1"/><path d="m47 33a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#30649d"/><path d="m43 33a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#30649d"/><path d="m51 33a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#30649d"/><path d="m55 33a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1z" fill="#30649d"/></svg>`;
+                h += `<h1 class="login-form-title" style="margin-bottom: 0; margin-top: 15px; font-size: 18px;">Self-Hosted Puter is Coming soon!</h1>`;
+                h += `<p style=" text-align:center; font-size: 15px; -webkit-font-smoothing: antialiased;padding: 0 10px; color: #2d3847; margin-top:0; margin-bottom: 0;">Join the waitlist for the launch of Self-Hosted Puter!</p>`;
+                // error msg
+                h += `<div class="login-error-msg"></div>`;
+                // success
+                h += `<div class="waitlist-success-msg form-success-msg" style="background-color: #cafbe4; margin-top:10px; margin-bottom: 0;">You've been added to the waitlist and will receive a notification when it's your turn.</div>`;
+                // waitlist
+                h += `<button type="button" class="join-waitlist-btn button button-primary button-block" style="margin-top: 10px; display:none;">Join Waitlist!</button>`;
+            h += `</div>`;
+        h += `</div>`;
+        
+        const el_window = await UIWindow({
+            title: null,
+            app: 'waitlist',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            draggable_body: true,
+            allow_context_menu: false,
+            is_draggable: true,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            ...options.window_options,
+            width: 350,
+            dominant: true,
+            on_close: ()=>{
+                resolve(false)
+            },
+            onAppend: function(this_window){
+            },
+            window_class: 'window-login',
+            window_css:{
+                height: 'initial',
+            },
+            body_css: {
+                width: 'initial',
+                padding: '0',
+                height: 245,
+                'background-color': 'rgba(231, 238, 245, .95)',
+                'backdrop-filter': 'blur(3px)',
+            }    
+        })
+
+        $(el_window).find('.join-waitlist-btn').on('click', function(e){
+            $(this).addClass('disabled');
+            setItem({
+                key: "joined_selfhosted_waitlist",
+                value: true,
+                success: async function(){
+                    $(el_window).find('.join-waitlist-btn').hide();
+                    $(el_window).find('.waitlist-success-msg').show();
+                }
+            })
+        })  
+
+    }) 
+}
+
+export default UIWindowSelfhostedWaitlist

src/UI/UIWindowSessionList.js

@@ -0,0 +1,138 @@
+import UIWindow from './UIWindow.js'
+import UIWindowLogin from './UIWindowLogin.js'
+import UIWindowSignup from './UIWindowSignup.js'
+
+async function UIWindowSessionList(options){
+    options = options ?? {};
+    options.reload_on_success = options.reload_on_success ?? true;
+
+    return new Promise(async (resolve) => {
+        let h = '';
+        h += `<div style="margin:10px;">`;
+            h += `<div class="loading">Signing in...</div>`
+            h += `<div style="overflow-y: scroll; max-width: 400px; margin: 0 auto;">`;
+            h += `<h1 style="text-align: center; font-size: 18px; font-weight: normal; color: #757575;"><img src="${icons['logo-white.svg']}" style="padding: 4px; background-color: blue; border-radius: 5px; width: 25px; box-sizing: border-box; margin-bottom: -6px; margin-right: 6px;">Sign in with Puter</h1>`
+            for (let index = 0; index < logged_in_users.length; index++) {
+                const l_user = logged_in_users[index];
+                h += `<div data-uuid="${l_user.uuid}" class="session-entry">${l_user.username}</div>`;
+            }
+            h += `</div>`;
+
+            h += `<div style="margin-top: 20px; margin-bottom: 20px; text-align:center;"><span class="login-c2a-session-list">Log Into Another Account</span> &bull; <span class="signup-c2a-session-list">Create Account</span></div>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: 'Session List!',
+            app: 'session-list',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            has_head: false,
+            selectable_body: false,
+            draggable_body: options.draggable_body ?? true,
+            allow_context_menu: false,
+            is_resizable: false,
+            is_droppable: false,
+            init_center: true,
+            allow_native_ctxmenu: false,
+            allow_user_select: false,
+            width: 350,
+            height: 'auto',
+            dominant: true,
+            show_in_taskbar: false,
+            update_window_url: false,
+            cover_page: options.cover_page ?? false,
+            onAppend: function(this_window){
+            },
+            window_class: 'window-session-list',
+            body_css: {
+                width: 'initial',
+                height: '100%',
+                'background-color': 'rgb(245 247 249)',
+                'backdrop-filter': 'blur(3px)',
+                'display': 'flex',
+                'flex-direction': 'column',
+                'justify-content': 'center',
+            }    
+        })
+        $(el_window).find('.login-c2a-session-list').on('click', async function(e){
+            const login = await UIWindowLogin({
+                referrer: options.referrer, 
+                reload_on_success: options.reload_on_success,
+                window_options: options.window_options,
+                cover_page: options.cover_page ?? false,
+                has_head: options.has_head,
+                send_confirmation_code: options.send_confirmation_code,
+                window_options: {
+                    has_head: false,
+                    cover_page: options.cover_page ?? false,
+                }
+            });
+            if(login){
+                if(options.reload_on_success){
+                    // disable native browser exit confirmation
+                    window.onbeforeunload = null;            
+                    // refresh
+                    location.reload();
+                }else{
+                    resolve(login);
+                }
+            }
+        })
+        $(el_window).find('.signup-c2a-session-list').on('click', async function(e){
+            $('.signup-c2a-clickable').parents('.window').close();
+            // create Signup window
+            const signup = await UIWindowSignup({
+                referrer: options.referrer,
+                reload_on_success: options.reload_on_success,
+                window_options: options.window_options,
+                send_confirmation_code: options.send_confirmation_code,
+                window_options: {
+                    has_head: false,
+                    cover_page: options.cover_page ?? false,
+                }
+
+            });
+            if(signup){
+                if(options.reload_on_success){
+                    // disable native browser exit confirmation
+                    window.onbeforeunload = null;            
+                    // refresh
+                    location.reload();
+                }else{
+                    resolve(signup);
+                }
+            }
+        })
+
+        $(el_window).find('.session-entry').on('click', function(e){
+            $(el_window).find('.loading').css({display: 'flex'});
+
+            setTimeout(() => {
+                let selected_uuid = $(this).attr('data-uuid');
+                let selected_user;
+                for (let index = 0; index < window.logged_in_users.length; index++) {
+                    const l_user = logged_in_users[index];
+                    if(l_user.uuid === selected_uuid){
+                        selected_user = l_user;
+                    }
+                }
+
+                // new logged in user
+                update_auth_data(selected_user.auth_token, selected_user);
+                if(options.reload_on_success){
+                    // disable native browser exit confirmation
+                    window.onbeforeunload = null;            
+                    // refresh
+                    location.reload();
+                }else{
+                    resolve(true);
+                }
+            }, 500);
+        })
+    })
+}
+
+export default UIWindowSessionList

src/UI/UIWindowSignup.js

@@ -0,0 +1,186 @@
+import UIWindow from './UIWindow.js'
+import UIWindowLogin from './UIWindowLogin.js'
+import UIWindowEmailConfirmationRequired from './UIWindowEmailConfirmationRequired.js'
+
+function UIWindowSignup(options){
+    options = options ?? {};
+    options.reload_on_success = options.reload_on_success ?? false;
+    options.has_head = options.has_head ?? true;
+    options.send_confirmation_code  = options.send_confirmation_code ?? false;
+
+    return new Promise(async (resolve) => {
+        const internal_id = window.uuidv4();
+        let h = '';
+        h += `<div style="margin: 0 auto; max-width: 500px; min-width: 400px;">`;
+            // logo
+            h += `<img src="${window.icons['logo-white.svg']}" style="width: 40px; height: 40px; margin: 0 auto; display: block; padding: 15px; background-color: blue; border-radius: 5px;">`;
+            // close button
+            if(!options.has_head && options.show_close_button !== false)
+                h += `<div class="generic-close-window-button"> &times; </div>`;
+
+            // Form
+            h += `<div style="padding: 20px; border-bottom: 1px solid #ced7e1;">`;
+                // title
+                h += `<h1 class="signup-form-title">Create Free Account</h1>`;
+                // signup form
+                h += `<form class="signup-form">`;
+                    // error msg
+                    h += `<div class="signup-error-msg"></div>`;
+                    // username
+                    h += `<div style="overflow: hidden;">`;
+                        h += `<label for="username-${internal_id}">Username</label>`;
+                        h += `<input id="username-${internal_id}" class="username" type="text" autocomplete="username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
+                    h += `</div>`;
+                    // email
+                    h += `<div style="overflow: hidden; margin-top: 20px;">`;
+                        h += `<label for="email-${internal_id}">Email</label>`;
+                        h += `<input id="email-${internal_id}" class="email" type="email" autocomplete="email" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
+                    h += `</div>`;
+                    // password
+                    h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+                        h += `<label for="password-${internal_id}">Password</label>`;
+                        h += `<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="new-password" />`;
+                    h += `</div>`;
+                    // bot trap - if this value is submitted server will ignore the request
+                    h += `<input type="text" name="p102xyzname" class="p102xyzname" value="">`;
+
+                    // terms and privacy
+                    h += `<p class="signup-terms">By clicking 'Create Free Account' you agree to Puter's <a href="https://puter.com/terms" target="_blank">Terms of Service</a> and <a href="https://puter.com/privacy" target="_blank">Privacy Policy</a>.</p>`;
+                    // Create Account
+                    h += `<button class="signup-btn button button-primary button-block button-normal">Create Free Account</button>`
+                h += `</form>`;
+            h += `</div>`;
+            // login link
+            // create account link
+            h += `<div class="c2a-wrapper" style="padding:20px;">`;
+                h += `<button class="login-c2a-clickable">Log In</button>`;
+            h += `</div>`;
+        h += `</div>`;
+
+        const el_window = await UIWindow({
+            title: null,
+            app: 'signup',
+            single_instance: true,
+            icon: null,
+            uid: null,
+            is_dir: false,
+            body_content: h,
+            draggable_body: false,
+            has_head: true,
+            selectable_body: false,
+            allow_context_menu: false,
+            is_draggable: false,
+            is_droppable: false,
+            is_resizable: false,
+            stay_on_top: false,
+            allow_native_ctxmenu: true,
+            allow_user_select: true,
+            ...options.window_options,
+            // width: 350,
+            dominant: false,
+            center: true,
+            onAppend: function(el_window){
+                $(el_window).find(`.username`).get(0).focus({preventScroll:true});
+            },
+            window_class: 'window-signup',
+            window_css:{
+                height: 'initial',
+            }, 
+            body_css: {
+                width: 'initial',
+                'background-color': 'white',
+                'backdrop-filter': 'blur(3px)',
+                'display': 'flex',
+                'flex-direction': 'column',
+                'justify-content': 'center',
+                'align-items': 'center',
+                padding: '30px 10px 10px 10px',
+            }    
+        })
+
+        $(el_window).find('.login-c2a-clickable').on('click', async function(e){
+            $('.login-c2a-clickable').parents('.window').close();
+            const login = await UIWindowLogin({
+                referrer: options.referrer, 
+                reload_on_success: options.reload_on_success,
+                window_options: options.window_options,
+                show_close_button: options.show_close_button,
+                send_confirmation_code: options.send_confirmation_code,
+            });
+            if(login)
+                resolve(true);
+        })
+
+        $(el_window).find('.signup-btn').on('click', function(e){
+            // todo do some basic validation client-side
+
+            //Username
+            let username = $(el_window).find('.username').val();
+        
+            //Email
+            let email = $(el_window).find('.email').val();
+        
+            //Password
+            let password = $(el_window).find('.password').val();
+            
+            //xyzname
+            let p102xyzname = $(el_window).find('.p102xyzname').val();
+
+            // disable 'Create Account' button
+            $(el_window).find('.signup-btn').prop('disabled', true);
+
+            let headers = {};
+            if(window.custom_headers)
+                headers = window.custom_headers;
+
+            $.ajax({
+                url: gui_origin + "/signup",
+                type: 'POST',
+                async: true,
+                headers: headers,
+                contentType: "application/json",
+                data: JSON.stringify({ 
+                    username: username,
+                    referral_code: window.referral_code,
+                    email: email, 
+                    password: password,
+                    referrer: options.referrer ?? window.referrerStr,
+                    send_confirmation_code: options.send_confirmation_code,
+                    p102xyzname: p102xyzname,
+                }),
+                success: async function (data){
+                    update_auth_data(data.token, data.user)
+                    
+                    //send out the login event
+                    if(options.reload_on_success){
+                        window.onbeforeunload = null;
+                        window.location.replace('/');
+                    }else if(options.send_confirmation_code){
+                        $(el_window).close();
+                        let is_verified = await UIWindowEmailConfirmationRequired({stay_on_top: true, has_head: true});
+                        resolve(is_verified);
+                    }else{
+                        resolve(true);
+                    }
+                },
+                error: function (err){
+                    $(el_window).find('.signup-error-msg').html(err.responseText);
+                    $(el_window).find('.signup-error-msg').fadeIn();
+                    // re-enable 'Create Account' button
+                    $(el_window).find('.signup-btn').prop('disabled', false);
+                }
+            });
+        })
+
+        $(el_window).find('.signup-form').on('submit', function(e){
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        })
+            
+        //remove login window
+        $('.signup-c2a-clickable').parents('.window').close();
+    })
+}
+
+export default UIWindowSignup

src/UI/UIWindowUploadProgress.js

@@ -0,0 +1,57 @@
+import UIWindow from './UIWindow.js'
+
+// todo do this using uid rather than item_path, since item_path is way mroe expensive on the DB
+async function UIWindowUploadProgress(options){
+    let h = '';
+    h += `<div data-upload-operation-id="${options.operation_id}">`;
+        h += `<div>`;
+            // spinner
+            h +=`<svg style="float:left; margin-right: 7px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
+            // Progress report
+            h +=`<div style="margin-bottom:20px; float:left; padding-top:3px; font-size:15px; overflow: hidden; width: calc(100% - 40px); text-overflow: ellipsis; white-space: nowrap;">`;
+                // msg
+                h += `<span class="upload-progress-msg">Preparing for upload...</span>`;
+            h += `</div>`;
+            // progress
+            h += `<div class="upload-progress-bar-container" style="clear:both; margin-top:20px; border-radius:3px;">`;
+                h += `<div class="upload-progress-bar"></div>`;
+            h += `</div>`;
+            // cancel
+            h += `<button style="float:right; margin-top: 15px; margin-right: -2px;" class="button button-small upload-cancel-btn">Cancel</button>`;
+        h +=`</div>`;
+    h += `</div>`;
+
+    const el_window = await UIWindow({
+        title: `Upload`,
+        icon: window.icons[`app-icon-uploader.svg`],
+        uid: null,
+        is_dir: false,
+        body_content: h,
+        draggable_body: false,
+        has_head: false,
+        selectable_body: false,
+        draggable_body: true,
+        allow_context_menu: false,
+        is_resizable: false,
+        is_droppable: false,
+        init_center: true,
+        allow_native_ctxmenu: false,
+        allow_user_select: false,
+        window_class: 'window-upload-progress',
+        width: 450,
+        dominant: true,
+        window_css:{
+            height: 'initial',
+        },
+        body_css: {
+            padding: '22px',
+            width: 'initial',
+            'background-color': 'rgba(231, 238, 245, .95)',
+            'backdrop-filter': 'blur(3px)',
+        }    
+    });
+
+    return el_window;
+}
+
+export default UIWindowUploadProgress

src/browserconfig.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+<msapplication>
+<tile>
+<square70x70logo src="./favicons/ms-icon-70x70.png"/>
+<square150x150logo src="./favicons/ms-icon-150x150.png"/>
+<square310x310logo src="./favicons/ms-icon-310x310.png"/>
+<TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/favicons/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

src/globals.js

@@ -0,0 +1,143 @@
+window.clipboard_op = '';
+window.clipboard = [];
+window.window_nav_history = {};
+window.window_nav_history_current_position = {};
+window.progress_tracker = [];
+window.upload_item_global_id = 0;
+
+window.download_progress = [];
+window.download_item_global_id = 0;
+
+window.TRUNCATE_LENGTH = 20;
+
+// This is the minimum width of the window for the sidebar to be shown
+window.window_width_threshold_for_sidebar = 500;
+
+// the window over which mouse is hovering
+window.mouseover_window = null;
+
+// an active itewm container is the one where keyboard events should work (arrow keys, ...)
+window.active_item_container = null;
+
+window.mouseX = 0;
+window.mouseY = 0;
+
+// get all logged-in users
+try{
+    window.logged_in_users = JSON.parse(localStorage.getItem("logged_in_users"));
+}catch(e){
+    window.logged_in_users = [];
+}
+if(window.logged_in_users === null)
+    window.logged_in_users = [];
+
+// this sessions's user
+window.auth_token = localStorage.getItem("auth_token");
+try{
+    window.user = JSON.parse(localStorage.getItem("user"));
+}catch(e){
+    window.user = null;
+}
+
+// in case this is the first time user is visiting multi-user feature
+if(window.logged_in_users.length === 0 && window.user !== null){
+    let tuser = window.user;
+    tuser.auth_token = window.auth_token
+    window.logged_in_users.push(tuser);
+    localStorage.setItem("logged_in_users", window.logged_in_users);
+}
+
+window.last_window_zindex = 1;
+
+// first visit tracker
+window.first_visit_ever = localStorage.getItem("has_visited_before") === null ? true : false;
+localStorage.setItem("has_visited_before", true);
+
+// system paths
+if(window.user !== undefined && window.user !== null){
+    window.desktop_path = '/' + window.user.username + '/Desktop';
+    window.trash_path = '/' + window.user.username + '/Trash';
+    window.appdata_path = '/' + window.user.username + '/AppData';
+    window.documents_path = '/' + window.user.username + '/Documents';
+    window.pictures_path = '/' + window.user.username + '/Photos';
+    window.videos_path = '/' + window.user.username + '/Videos';
+    window.audio_path = '/' + window.user.username + '/Audio';
+    window.home_path = '/' + window.user.username;
+}
+window.root_dirname = 'Puter';
+
+window.window_stack = []
+window.toolbar_height = 30;
+window.default_taskbar_height = 50;
+window.taskbar_height = window.default_taskbar_height;
+window.upload_progress_hide_delay = 500;
+window.active_uploads = {};
+window.copy_progress_hide_delay = 1000;
+window.busy_indicator_hide_delay = 600;
+window.global_element_id = 0;
+window.operation_id = 0;
+window.operation_cancelled = [];
+window.last_enter_pressed_to_rename_ts = 0;
+window.window_counter = 0;
+window.keypress_item_seach_term = '';
+window.keypress_item_seach_buffer_timeout = undefined;
+window.first_visit_animation = false;
+window.show_twitter_link = true;
+window.animate_window_opening = true;
+window.animate_window_closing = true;
+window.desktop_loading_fade_delay = (window.first_visit_ever && first_visit_animation ? 6000 : 1000);
+window.watchItems = [];
+window.appdata_signatures = {};
+window.appCallbackFunctions = [];
+
+// 'Launch' apps
+window.launch_apps = [];
+window.launch_apps.recent = []
+window.launch_apps.recommended = []
+
+// Is puter being loaded inside an iframe?
+if (window.location !== window.parent.location) {
+    window.is_embedded = true;
+    // taskbar is not needed in embedded mode
+    window.taskbar_height = 0;
+} else {
+    window.is_embedded = false;
+}
+
+// calculate desktop height and width
+window.desktop_height = window.innerHeight - window.toolbar_height - window.taskbar_height;
+window.desktop_width = window.innerWidth;
+
+// recalculate desktop height and width on window resize
+$( window ).on( "resize", function() {
+    window.desktop_height = window.innerHeight - window.toolbar_height - window.taskbar_height;
+    window.desktop_width = window.innerWidth;
+});
+  
+// for now `active_element` is basically the last element that was clicked,
+// later on though (todo) `active_element` will also be set by keyboard movements 
+// such as arrow keys, tab key, ... and when creating new windows...
+window.active_element = null;
+
+// The number of recent apps to show in the launch menu
+window.launch_recent_apps_count = 10;
+
+// indicated if the mouse is in one of the window snap zones or not
+// if yes, which one?
+window.current_active_snap_zone = undefined;
+
+// 
+window.is_fullpage_mode = false;
+
+window.window_border_radius = 4;
+
+window.sites = [];
+
+window.feature_flags = {
+    // if true, the user will be able to create shortcuts to files and directories
+    create_shortcut: true,
+    // if true, the user will be asked to confirm before navigating away from Puter only if there is at least one window open
+    prompt_user_when_navigation_away_from_puter: false,
+    // if true, the user will be able to zip and download directories
+    download_directory: true,
+}

src/helpers/content_type_to_icon.js

@@ -0,0 +1,55 @@
+/**
+ * Maps a MIME/Content type to the appropriate icon.
+ * 
+ * @param {*} type 
+ * @returns 
+ */
+const content_type_to_icon = (type)=>{
+    let icon;
+    if(type === null)
+        icon = 'file.svg';
+    else if(type.startsWith('text/plain'))
+        icon = 'file-text.svg'
+    else if(type.startsWith('text/html'))
+        icon = 'file-html.svg'
+    else if(type.startsWith('text/markdown'))
+        icon = 'file-md.svg'
+    else if(type.startsWith('text/xml'))
+        icon = 'file-xml.svg'
+    else if(type.startsWith('application/json'))
+        icon = 'file-json.svg'
+    else if(type.startsWith('application/javascript'))
+        icon = 'file-js.svg'
+    else if(type.startsWith('application/pdf'))
+        icon = 'file-pdf.svg'
+    else if(type.startsWith('application/xml'))
+        icon = 'file-xml.svg'
+    else if(type.startsWith('application/x-httpd-php'))
+        icon = 'file-php.svg'
+    else if(type.startsWith('application/zip'))
+        icon = 'file-zip.svg'
+    else if(type.startsWith('text/css'))
+        icon = 'file-css.svg'
+	else if(type.startsWith('font/ttf'))
+        icon = 'file-ttf.svg'
+	else if(type.startsWith('font/otf'))
+        icon = 'file-otf.svg'
+	else if(type.startsWith('text/csv'))
+        icon = 'file-csv.svg'
+    else if(type.startsWith('image/svg'))
+        icon = 'file-svg.svg'
+    else if(type.startsWith('image/vnd.adobe.photoshop'))
+        icon = 'file-psd.svg'
+    else if(type.startsWith('image'))
+        icon = 'file-image.svg'
+    else if(type.startsWith('audio/'))
+        icon = 'file-audio.svg'
+    else if(type.startsWith('video'))
+        icon = 'file-video.svg'
+    else
+        icon = 'file.svg';
+
+    return window.icons[icon];
+}
+
+export default content_type_to_icon;

src/helpers/download.js

@@ -0,0 +1,115 @@
+/**
+ * Launches a download process for an item, tracking its progress and handling success or error states.
+ * The function returns a promise that resolves with the downloaded item or rejects in case of an error.
+ * It uses XMLHttpRequest to manage the download and tracks progress both for the individual item and the entire batch it belongs to.
+ *
+ * @param {Object} options - Configuration options for the download process.
+ * @param {string} options.url - The URL from which the item will be downloaded.
+ * @param {string} options.operation_id - Unique identifier for the download operation, used for progress tracking.
+ * @param {string} options.item_upload_id - Identifier for the specific item being downloaded, used for individual progress tracking.
+ * @param {string} [options.name] - Optional name for the item being downloaded.
+ * @param {string} [options.dest_path] - Destination path for the downloaded item.
+ * @param {string} [options.shortcut_to] - Optional shortcut path for the item.
+ * @param {boolean} [options.dedupe_name=false] - Flag to enable or disable deduplication of item names.
+ * @param {boolean} [options.overwrite=false] - Flag to enable or disable overwriting of existing items.
+ * @param {function} [options.success] - Optional callback function that is executed on successful download.
+ * @param {function} [options.error] - Optional callback function that is executed in case of an error.
+ * @param {number} [options.return_timeout=500] - Optional timeout in milliseconds before resolving the download.
+ * @returns {Promise<Object>} A promise that resolves with the downloaded item or rejects with an error.
+ */
+const download = function(options){
+    return new Promise((resolve, reject) => {
+        // The item that is being downloaded and will be returned to the caller at the end of the process
+        let item;
+        // Intervals that check for progress and cancel every few milliseconds
+        let progress_check_interval, cancel_check_interval;
+        // Progress tracker for the entire batch to which this item belongs
+        let batch_download_progress = window.progress_tracker[options.operation_id];
+        // Tracker for this specific item's download progress
+        let item_download_progress = batch_download_progress[options.item_upload_id];
+
+        let xhr = new XMLHttpRequest();
+        xhr.open("post", (api_origin + '/download'), true);
+        xhr.setRequestHeader("Authorization", "Bearer " + auth_token);
+        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+
+        xhr.addEventListener('load', function(e){
+            // error
+            if(this.status !== 200){
+                if(options.error && typeof options.error === 'function')
+                    options.error(JSON.parse(this.responseText))
+                return reject(JSON.parse(this.responseText))
+            }
+            // success
+            else{
+                item = JSON.parse(this.responseText);
+            }
+        });
+
+        // error
+        xhr.addEventListener('error', function(e){
+            if(options.error && typeof options.error === 'function')
+                options.error(e)
+            return reject(e)
+        })
+
+        xhr.send(JSON.stringify({
+            url: options.url,
+            operation_id: options.operation_id,
+            socket_id: window.socket ? window.socket.id : null,
+            item_upload_id: options.item_upload_id,
+            // original_client_socket_id: window.socket.id,
+            name: options.name,
+            path: options.dest_path,
+            shortcut_to: options.shortcut_to,
+            dedupe_name: options.dedupe_name ?? false,
+            overwrite: options.overwrite ?? false,
+        }));
+
+        //----------------------------------------------
+        // Regularly check if this operation has been cancelled by the user
+        //----------------------------------------------
+        cancel_check_interval = setInterval(() => {
+            if(operation_cancelled[options.operation_id]){
+                xhr.abort();
+                clearInterval(cancel_check_interval);
+                clearInterval(progress_check_interval);
+            }
+        }, 100);
+
+        //----------------------------------------------
+        // Regularly check the progress of the cloud-write operation
+        //----------------------------------------------
+        progress_check_interval = setInterval(function() {
+            // Individual item progress
+            let item_progress = 1;
+            if(item_download_progress.total)
+                item_progress = (item_download_progress.cloud_uploaded + item_download_progress.downloaded) / item_download_progress.total;
+
+            // Entire batch progress
+            let batch_progress = ((batch_download_progress[0].cloud_uploaded + batch_download_progress[0].downloaded)/batch_download_progress[0].total * 100).toFixed(0);
+            batch_progress = batch_progress > 100 ? 100 : batch_progress;
+
+            // Update the progress bar
+            $(`[data-download-operation-id="${options.operation_id}"]`).find('.download-progress-bar').css( 'width', batch_progress+'%');
+
+            // If download is finished resolve promise
+            if((item_progress >= 1 || item_progress === 0) && item){
+                // For a better UX, resolve 0.5 second after operation is finished.
+                setTimeout(function() {
+                    clearInterval(progress_check_interval);
+                    clearInterval(cancel_check_interval);
+                    if(options.success && typeof options.success === 'function'){
+                        options.success(item)
+                    }
+                    resolve(item);
+                }, options.return_timeout ?? 500);
+                // Stop and clear the the cloud progress check interval
+                clearInterval(progress_check_interval)
+            }
+        }, 200);
+        return xhr;
+    })
+}
+
+export default download;

src/helpers/update_last_touch_coordinates.js

@@ -0,0 +1,19 @@
+/**
+ * Updates the last touch coordinates based on the event type.
+ * If the event is 'touchstart', it takes the coordinates from the touch object.
+ * If the event is 'mousedown', it takes the coordinates directly from the event object.
+ *
+ * @param {Event} e - The event object containing information about the touch or mouse event.
+ */
+const update_last_touch_coordinates = (e)=>{
+    if(e.type == 'touchstart'){
+        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+        window.last_touch_x = touch.pageX;
+        window.last_touch_y = touch.pageY;
+    } else if (e.type == 'mousedown') {
+        window.last_touch_x = e.clientX;
+        window.last_touch_y = e.clientY;
+    }
+}
+
+export default update_last_touch_coordinates;

src/helpers/update_title_based_on_uploads.js

@@ -0,0 +1,17 @@
+const update_title_based_on_uploads = function(){
+    const active_uploads_count = _.size(active_uploads);
+    if(active_uploads_count === 1 && !isNaN(Object.values(active_uploads)[0])){
+        document.title = Math.round(Object.values(active_uploads)[0]) + '% Uploading';
+    }else if(active_uploads_count > 1){
+        // get the average progress
+        let total_progress = 0;
+        for (const [key, value] of Object.entries(active_uploads)) {
+            total_progress += Math.round(value);
+        }
+        const avgprog = Math.round(total_progress / active_uploads_count)
+        if(!isNaN(avgprog))
+            document.title = avgprog + '% Uploading';
+    }
+}
+
+export default update_title_based_on_uploads;

src/helpers/update_username_in_gui.js

@@ -0,0 +1,67 @@
+const update_username_in_gui = function(new_username){
+    // ------------------------------------------------------------
+    // Update all item/window/... paths, with the new username
+    // ------------------------------------------------------------
+    $(':not([data-path=""]),:not([data-item-path=""])').each((i, el)=>{
+        const $el = $(el);
+        const attr_path = $el.attr('data-path');
+        const attr_item_path = $el.attr('data-item-path');
+        const attr_shortcut_to_path = $el.attr('data-shortcut_to_path');
+        // data-path
+        if(attr_path && attr_path !== 'null' && attr_path !== 'undefined'){
+            // /[username]
+            if(attr_path === '/' + window.user.username)
+                $el.attr('data-path', '/' + new_username);
+            // /[username]/...
+            else if (attr_path.startsWith('/' + window.user.username + '/'))
+                $el.attr('data-path',  attr_path.replace('/' + window.user.username + '/', '/' + new_username + '/'));
+
+            // .window-navbar-path-dirname
+            if($el.hasClass('window-navbar-path-dirname') && attr_path === '/' + window.user.username)
+                $el.text(new_username)
+
+            // .window-navbar-path-input value
+            else if($el.hasClass('window-navbar-path-input')){
+                // /[username]
+                if(attr_path === '/' + window.user.username)
+                    $el.val('/' + new_username);
+                // /[username]/...
+                else if (attr_path.startsWith('/' + window.user.username + '/'))
+                    $el.val(attr_path.replace('/' + window.user.username + '/', '/' + new_username + '/'));
+            }
+        }
+        // data-shortcut_to_path
+        if(attr_shortcut_to_path && attr_shortcut_to_path !== '' && attr_shortcut_to_path !== 'null' && attr_shortcut_to_path !== 'undefined'){
+            // home dir
+            if(attr_shortcut_to_path === '/' + window.user.username)
+                $el.attr('data-shortcut_to_path', '/' + new_username);
+            // every other paths
+            else if(attr_shortcut_to_path.startsWith('/' + window.user.username + '/'))
+                $el.attr('data-shortcut_to_path', attr_shortcut_to_path.replace('/' + window.user.username + '/', '/' + new_username + '/'));
+        }
+        // data-item-path
+        if(attr_item_path && attr_item_path !== 'null' && attr_item_path !== 'undefined'){
+            // /[username]
+            if(attr_item_path === '/' + window.user.username)
+                $el.attr('data-item-path', '/' + new_username);
+            // /[username]/...
+            else if (attr_item_path.startsWith('/' + window.user.username + '/'))
+                $el.attr('data-item-path',  attr_item_path.replace('/' + window.user.username + '/', '/' + new_username + '/'));
+        }
+    })
+
+    // todo update all window paths
+    $('.window').each((i, el)=>{
+    })
+
+    window.desktop_path = '/' + new_username + '/Desktop';
+    window.trash_path = '/' + new_username + '/Trash';
+    window.appdata_path = '/' + new_username + '/AppData';
+    window.docs_path = '/' + new_username + '/Documents';
+    window.pictures_path = '/' + new_username + '/Pictures';
+    window.videos_path = '/' + new_username + '/Videos';
+    window.desktop_path = '/' + new_username + '/Desktop';
+    window.home_path = '/' + new_username;
+}
+
+export default update_username_in_gui;

src/icons/app-icon-uploader.svg

@@ -0,0 +1,22 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+	<title>app-icon-uploader-svg</title>
+	<defs>
+		<linearGradient id="grd1" gradientUnits="userSpaceOnUse"  x1="48.009" y1="30.691" x2="0" y2="7.276">
+			<stop offset="0" stop-color="#6cc4f5"  />
+			<stop offset="1" stop-color="#b6ddf2"  />
+		</linearGradient>
+		<linearGradient id="grd2" gradientUnits="userSpaceOnUse"  x1="32" y1="35.912" x2="16" y2="28.109">
+			<stop offset="0" stop-color="#0c2330"  />
+			<stop offset="1" stop-color="#36505f"  />
+		</linearGradient>
+	</defs>
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: url(#grd1) } 
+		.shp1 { fill: url(#grd2) } 
+	</style>
+	<g id="Layer">
+		<path id="Layer" class="shp0" d="M39.79 16.16C42.25 16.61 44.45 17.95 45.97 19.94C47.48 21.93 48.19 24.41 47.97 26.9C47.74 29.39 46.6 31.7 44.75 33.39C42.91 35.07 40.5 36 38 36L10 36C7.69 36.01 5.46 35.21 3.67 33.75C1.88 32.29 0.65 30.26 0.2 28C-0.26 25.74 0.08 23.39 1.16 21.35C2.25 19.31 4 17.71 6.13 16.82C6.65 12.77 8.6 9.05 11.64 6.32C14.68 3.59 18.59 2.05 22.67 1.97C26.75 1.89 30.73 3.28 33.87 5.88C37.01 8.49 39.11 12.14 39.79 16.16L39.79 16.16Z" />
+		<path id="Layer" class="shp1" d="M31.99 27.9C32.01 28.08 31.98 28.27 31.9 28.44C31.82 28.61 31.69 28.75 31.53 28.85C31.37 28.95 31.19 29 31 29L26 29L26 44C26 44.53 25.79 45.04 25.41 45.41C25.04 45.79 24.53 46 24 46C23.47 46 22.96 45.79 22.59 45.41C22.21 45.04 22 44.53 22 44L22 29L17 29C16.81 29 16.63 28.95 16.47 28.85C16.31 28.75 16.18 28.61 16.1 28.44C16.02 28.27 15.99 28.08 16.01 27.9C16.02 27.71 16.1 27.53 16.21 27.39L23.21 18.39C23.22 18.38 23.23 18.36 23.24 18.35C23.25 18.34 23.26 18.33 23.27 18.32C23.28 18.31 23.29 18.3 23.3 18.3C23.31 18.29 23.32 18.28 23.33 18.27C23.43 18.18 23.55 18.11 23.68 18.07C23.81 18.03 23.95 18.01 24.08 18.02C24.22 18.04 24.35 18.07 24.47 18.14C24.59 18.2 24.7 18.28 24.79 18.39L31.79 27.39C31.9 27.53 31.98 27.71 31.99 27.9Z" />
+	</g>
+</svg>

src/icons/app.svg

@@ -0,0 +1,295 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="48"
+   height="48"
+   id="svg6649"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs6651">
+    <linearGradient
+       xlink:href="#linearGradient121303"
+       id="linearGradient121764"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.0059184,0,0,0.85710999,-0.12782287,8.1064751)"
+       x1="25.086039"
+       y1="-1.3623691"
+       x2="25.086039"
+       y2="18.299334" />
+    <linearGradient
+       id="linearGradient121303">
+      <stop
+         id="stop121295"
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop121297"
+         style="stop-color:#ffffff;stop-opacity:0.23529412"
+         offset="0.11419468" />
+      <stop
+         id="stop121299"
+         style="stop-color:#ffffff;stop-opacity:0.15686275"
+         offset="0.93896598" />
+      <stop
+         id="stop121301"
+         style="stop-color:#ffffff;stop-opacity:0.39215687"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient3924-2-2-5-8"
+       id="linearGradient121760"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.0000003,0,0,0.83783813,-1.248146e-5,7.8918853)"
+       x1="23.99999"
+       y1="6.0445275"
+       x2="23.99999"
+       y2="41.763222" />
+    <linearGradient
+       id="linearGradient3924-2-2-5-8">
+      <stop
+         id="stop3926-9-4-9-6"
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3928-9-8-6-5"
+         style="stop-color:#ffffff;stop-opacity:0.23529412"
+         offset="0.09302325" />
+      <stop
+         id="stop3930-3-5-1-7"
+         style="stop-color:#ffffff;stop-opacity:0.15686275"
+         offset="0.9069767" />
+      <stop
+         id="stop3932-8-0-4-8"
+         style="stop-color:#ffffff;stop-opacity:0.39215687"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#d"
+       id="linearGradient121758"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2122903,0,0,1.1145514,-4.499903,-2.7612533)"
+       x1="23.452"
+       y1="30.555"
+       x2="43.007"
+       y2="45.933998" />
+    <linearGradient
+       id="d">
+      <stop
+         offset="0"
+         stop-color="#fff"
+         stop-opacity="0"
+         id="stop65" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0"
+         id="stop67" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient106305"
+       id="linearGradient121756"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2196365,0,0,1.3203708,40.785915,-13.338744)"
+       x1="-5.8870335"
+       y1="19.341915"
+       x2="-5.8870335"
+       y2="43.375748" />
+    <linearGradient
+       id="linearGradient106305">
+      <stop
+         offset="0"
+         stop-color="#dac197"
+         id="stop106301"
+         style="stop-color:#e7c591;stop-opacity:1" />
+      <stop
+         offset="1"
+         stop-color="#b19974"
+         id="stop106303"
+         style="stop-color:#cfa25e;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient106305"
+       id="linearGradient1703"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2196365,0,0,1.3154165,40.800338,-12.983422)"
+       x1="-5.8870335"
+       y1="11.482978"
+       x2="-5.8870335"
+       y2="22.148865" />
+    <radialGradient
+       cx="5"
+       cy="41.5"
+       fx="5"
+       fy="41.5"
+       gradientTransform="matrix(1.0028871,0,0,1.6,-18.167138,-111.98289)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#g"
+       id="k-0-7-3-9-3"
+       r="5" />
+    <linearGradient
+       id="g">
+      <stop
+         offset="0"
+         id="stop13" />
+      <stop
+         offset="1"
+         stop-opacity="0"
+         id="stop15" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#h"
+       id="linearGradient121754"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.1304332,0,0,1.45455,-87.719018,-13.32711)"
+       x1="17.554001"
+       y1="46"
+       x2="17.554001"
+       y2="35" />
+    <linearGradient
+       id="h">
+      <stop
+         offset="0"
+         stop-opacity="0"
+         id="stop54" />
+      <stop
+         offset=".5"
+         id="stop56" />
+      <stop
+         offset="1"
+         stop-opacity="0"
+         id="stop58" />
+    </linearGradient>
+    <radialGradient
+       cx="5"
+       cy="41.5"
+       fx="5"
+       fy="41.5"
+       gradientTransform="matrix(1.0028871,0,0,1.6,57.139048,-111.98289)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#g"
+       id="i-6-9-7-8-9"
+       r="5" />
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#c-3"
+       id="n"
+       x1="26"
+       x2="26"
+       y1="22"
+       y2="8"
+       gradientTransform="translate(0,-3)" />
+    <linearGradient
+       id="c-3">
+      <stop
+         offset="0"
+         stop-color="#fff"
+         id="stop36-6" />
+      <stop
+         offset="0.42818305"
+         stop-color="#fff"
+         id="stop38-7" />
+      <stop
+         offset="0.50093317"
+         stop-color="#fff"
+         stop-opacity=".643"
+         id="stop40-5" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity=".391"
+         id="stop42-3" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata6654">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g1210"
+     transform="matrix(0.71186438,0,0,0.75,50.804562,6.8128328)"
+     style="stroke-width:1.36858">
+    <rect
+       fill="url(#i)"
+       height="16"
+       opacity="0.4"
+       transform="scale(-1)"
+       width="5"
+       x="62.15403"
+       y="-53.58289"
+       id="rect77-9-90-2-7-8"
+       style="fill:url(#i-6-9-7-8-9);stroke-width:1.36858" />
+    <rect
+       fill="url(#j)"
+       height="16"
+       opacity="0.4"
+       width="49"
+       x="-62.15403"
+       y="37.58289"
+       id="rect79-7-2-0-1-4"
+       style="fill:url(#linearGradient121754);stroke-width:1.36858" />
+    <rect
+       fill="url(#k)"
+       height="16"
+       opacity="0.4"
+       transform="scale(1,-1)"
+       width="5"
+       x="-13.154028"
+       y="-53.58289"
+       id="rect81-3-8-6-7-8"
+       style="fill:url(#k-0-7-3-9-3);stroke-width:1.36858" />
+  </g>
+  <path
+     id="rect5505-21-1-5-0-6-5-1-2-5-10"
+     style="color:#000000;font-variation-settings:normal;display:inline;overflow:visible;visibility:visible;vector-effect:none;fill:url(#linearGradient1703);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.3;-inkscape-stroke:none;marker:none;enable-background:accumulate;stop-color:#000000"
+     d="M 11.590923,5.5 C 9.233905,5.5 8.29365,6.8965183 7.336378,9.0580252 6.602625,10.710457 5.7489,12.420162 5.070613,14.03926 4.709869,14.666994 4.500014,15.394506 4.500014,16.174075 h 39.000003 c 0,-0.779569 -0.209855,-1.507081 -0.570598,-2.134815 C 42.232744,12.428361 41.41792,10.701192 40.663653,9.0580252 39.677379,6.9096877 38.766126,5.5 36.409108,5.5 Z" />
+  <path
+     id="rect5505-21-1-5-0-6-5-1-2-3"
+     style="color:#000000;font-variation-settings:normal;display:inline;overflow:visible;visibility:visible;vector-effect:none;fill:url(#linearGradient121756);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.3;-inkscape-stroke:none;marker:none;enable-background:accumulate;stop-color:#000000"
+     d="M 8.754545,12 C 6.981818,12 4.5,13.556457 4.5,17.357139 v 22.857126 c 0,0.180002 0.01454,0.356244 0.03602,0.530134 0.005,0.04032 0.01198,0.08001 0.01801,0.119976 0.02142,0.140443 0.0485,0.278843 0.0831,0.414342 0.0089,0.03497 0.01667,0.07002 0.02631,0.104631 0.09713,0.343837 0.233773,0.670898 0.407174,0.973772 5.1e-4,9.29e-4 7.09e-4,0.0018 0.0014,0.0028 0.73415,1.280259 2.103419,2.14007 3.682515,2.14007 h 30.490912 c 1.579096,0 2.948365,-0.859811 3.682565,-2.140066 3.96e-4,-9.29e-4 7.09e-4,-0.0019 0.0014,-0.0028 0.173401,-0.302874 0.31005,-0.629935 0.407175,-0.973772 0.0096,-0.03461 0.01752,-0.06966 0.02631,-0.104631 0.0346,-0.135499 0.06169,-0.273898 0.0831,-0.414341 0.0057,-0.03997 0.01312,-0.07965 0.01801,-0.119977 0.02149,-0.173894 0.03596,-0.350136 0.03596,-0.530138 V 17.714282 c 0,-2.675475 -1.063637,-5.714281 -4.254546,-5.714281 z" />
+  <path
+     d="m 10.644861,11.296505 h 26.144185 c 1.526673,0 2.471182,0.528011 3.110782,1.979685 l 2.201727,6.091339 v 21.95942 c 0,1.385495 -0.774327,2.08358 -2.300291,2.08358 H 7.90777 c -1.525964,0 -2.148546,-0.767822 -2.148546,-2.153317 V 19.366105 l 2.130819,-6.221562 c 0.425455,-1.124336 1.228855,-1.84875 2.754818,-1.84875 z"
+     display="block"
+     fill="none"
+     opacity="0.505"
+     overflow="visible"
+     stroke="url(#m)"
+     stroke-width="0.741998"
+     style="stroke:url(#linearGradient121758);marker:none"
+     id="path85-1-8-5-7-0" />
+  <rect
+     style="opacity:0.3;fill:none;stroke:url(#linearGradient121760);stroke-width:0.999984;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect6741-5-0-2-3-4-2-4"
+     y="12.499992"
+     x="5.4999943"
+     ry="3.5"
+     height="31.000017"
+     width="37"
+     rx="3.5" />
+  <path
+     id="rect5505-21-1-5-0-6-5-1-2-5-1-4"
+     style="color:#000000;font-variation-settings:normal;display:inline;overflow:visible;visibility:visible;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#804b00;stroke-width:0.999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.5;-inkscape-stroke:none;marker:none;enable-background:accumulate;stop-color:#000000"
+     d="m 11.590923,5.4999995 c -2.357018,0 -3.297273,1.3915844 -4.254545,3.5454546 C 6.602625,10.692048 5.7489,12.395713 5.070613,14.009091 4.709869,14.634607 4.500014,15.359549 4.500014,16.136363 v 24.109092 c 0,2.357018 1.897527,4.254546 4.254545,4.254546 h 30.490913 c 2.357018,0 4.254545,-1.897528 4.254545,-4.254546 V 16.136363 c 0,-0.776814 -0.209855,-1.501756 -0.570598,-2.127272 C 42.232744,12.403883 41.41792,10.682816 40.663653,9.0454541 39.677379,6.9047068 38.766126,5.4999995 36.409108,5.4999995 Z" />
+  <path
+     id="rect5505-21-1-5-0-6-5-1-2-5-1-7-7"
+     style="color:#000000;font-variation-settings:normal;display:inline;overflow:visible;visibility:visible;opacity:0.15;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient121764);stroke-width:0.999991;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;marker:none;enable-background:accumulate;stop-color:#000000"
+     d="M 41.559097,13.18 39.846261,9.6011007 C 39.368173,8.5596761 38.922829,7.7593749 38.404755,7.261163 37.886674,6.7629512 37.313172,6.4999945 36.28979,6.4999945 H 11.711218 c -1.02473,0 -1.608821,0.2626032 -2.1286804,0.7584158 C 9.0626805,7.7542228 8.620631,8.5487423 8.1588488,9.5914677 v 0.00141 L 6.5978603,13.256725" />
+  <path
+     d="m 22,5 h 4 V 19 C 25.606,19 25.213,18.229 24.819,18.229 24.416,18.229 24.013,19 23.609,19 23.285,19 22.96,18.325 22.636,18.325 22.424,18.325 22.212,19 22,19 Z"
+     fill="url(#n)"
+     opacity="0.3"
+     overflow="visible"
+     style="fill:url(#n);marker:none"
+     id="path87" />
+</svg>

src/icons/arrow-left.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" viewBox="0 0 24 24" stroke-width="1.9" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 12L3 12M3 12L11.5 3.5M3 12L11.5 20.5" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/arrow-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" viewBox="0 0 24 24" stroke-width="1.9" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M3 12L21 12M21 12L12.5 3.5M21 12L12.5 20.5" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/arrow-up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" viewBox="0 0 24 24" stroke-width="1.9" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/c-check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1.1">
+ <circle style="fill:#4caf50" cx="24" cy="24" r="20"/>
+ <path style="fill:#ffffff" d="M 35,14 22,27 14,19 10,23 22,35 39,18 Z"/>
+</svg>

src/icons/chevron-right-active.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg" color="#ffffff">
+    <path d="M9 6L15 12L9 18" stroke="#ffffff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

src/icons/chevron-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M9 6L15 12L9 18" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/cog.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/down-arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6 9L12 15L18 9" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/file-audio.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
+ <path style="opacity:0.2" d="M 10,5 C 8.892,5 8,5.892 8,7 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 17 L 29,16 28,5 Z"/>
+ <path style="fill:#fe9700" d="M 10,4 C 8.892,4 8,4.892 8,6 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 16 L 29,15 28,4 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 10,4 C 8.892,4 8,4.892 8,6 V 7 C 8,5.892 8.892,5 10,5 h 18 l 11,11 h 1 L 28,4 Z"/>
+ <path style="opacity:0.2" d="m 28,5 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path style="fill:#ffbd63" d="m 28,4 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path style="opacity:0.2" d="m 20.021421,20.992705 h -0.0192 c 0.0381,4.1874 -7.3e-4,7.375 0,11.562 -1.8438,-1.1725 -4.5316,-0.41497 -5.5172,1.5309 -1.1469,1.9742 -0.16651,4.7651 1.9602,5.5923 2.0774,0.95043 4.7614,-0.2976 5.3772,-2.4962 0.30759,-1.2005 0.13601,-2.4536 0.18418,-3.6809 0.005,-2.8362 0.01,-4.6724 0.0149,-7.5086 h 9 c -0.006,2.5208 -0.0128,4.0417 -0.0192,6.5625 -1.8438,-1.1725 -4.5316,-0.41497 -5.5172,1.5309 -1.1469,1.9742 -0.16651,4.7651 1.9602,5.5923 2.2491,1.0177 5.4228,-0.5127 5.5925,-3.0831 -0.0756,-2.33 -0.01,-4.6677 -0.0263,-7.001 0.003,-2.8672 0.0105,-5.7344 0.01,-8.6016 h -13 z"/>
+ <path style="fill:#ffffff" d="m 20.021421,19.992705 h -0.0192 c 0.0381,4.1874 -7.3e-4,7.375 0,11.562 -1.8438,-1.1725 -4.5316,-0.41497 -5.5172,1.5309 -1.1469,1.9742 -0.16651,4.7651 1.9602,5.5923 2.0774,0.95043 4.7614,-0.2976 5.3772,-2.4962 0.30759,-1.2005 0.13601,-2.4536 0.18418,-3.6809 0.005,-2.8362 0.01,-4.6724 0.0149,-7.5086 h 9 c -0.006,2.5208 -0.0128,4.0417 -0.0192,6.5625 -1.8438,-1.1725 -4.5316,-0.41497 -5.5172,1.5309 -1.1469,1.9742 -0.16651,4.7651 1.9602,5.5923 2.2491,1.0177 5.4228,-0.5127 5.5925,-3.0831 -0.0756,-2.33 -0.01,-4.6677 -0.0263,-7.001 0.003,-2.8672 0.0105,-5.7344 0.01,-8.6016 h -13 z"/>
+</svg>

src/icons/file-cpp.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
+ <path style="opacity:0.2" d="M 10,5 C 8.892,5 8,5.892 8,7 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 17 L 29,16 28,5 Z"/>
+ <path fill="#e4e4e4" d="m10 4c-1.108 0-2 0.892-2 2v36c0 1.108 0.892 2 2 2h28c1.108 0 2-0.892 2-2v-26l-11-1-1-11z"/>
+ <path fill="#fff" opacity=".2" d="m10 4c-1.108 0-2 0.892-2 2v1c0-1.108 0.892-2 2-2h18l11 11h1l-12-12z"/>
+ <path style="opacity:0.2" d="m 28,5 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path fill="#fafafa" d="m28 4v10c0 1.1046 0.89543 2 2 2h10l-12-12z"/>
+ <path style="fill:#0180cd" d="m 23,21 a 9,9 0 0 0 -9,9 9,9 0 0 0 9,9 9,9 0 0 0 1,-0.06055 v -3.0254 a 6,6 0 0 1 -1,0.08594 6,6 0 0 1 -6,-6 6,6 0 0 1 6,-6 6,6 0 0 1 1,0.08984 v -3.0234 a 9,9 0 0 0 -1,-0.0664 z"/>
+ <path style="fill:#01559d" d="m 29,22 v 2 h -2 v 2 h 2 v 2 h 2 v -2 h 2 v -2 h -2 v -2 z"/>
+ <path style="fill:#01559d" d="m 29,32 v 2 h -2 v 2 h 2 v 2 h 2 v -2 h 2 v -2 h -2 v -2 z"/>
+</svg>

src/icons/file-css.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
+ <path style="opacity:0.2" d="M 10,5 C 8.892,5 8,5.892 8,7 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 17 L 29,16 28,5 Z"/>
+ <path opacity=".1" transform="translate(-135.61 -237.72)" d="m163.22 242.45v11c0 1.1046 0.89543 2 2 2h10l-1-1-10-9z"/>
+ <path fill="#e4e4e4" d="m10 4c-1.108 0-2 0.892-2 2v36c0 1.108 0.892 2 2 2h28c1.108 0 2-0.892 2-2v-26l-11-1-1-11z"/>
+ <path fill="#fff" opacity=".2" d="m10 4c-1.108 0-2 0.892-2 2v1c0-1.108 0.892-2 2-2h18l11 11h1l-12-12z"/>
+ <path style="opacity:0.2" d="m 28,5 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path fill="#fafafa" d="m28 4v10c0 1.1046 0.89543 2 2 2h10l-12-12z"/>
+ <path fill-rule="evenodd" opacity=".5" d="m19.064 21.482a1.0001 1.0001 0 0 0 -0.095 0.002 1.0001 1.0001 0 0 0 -0.264 0.055s-0.626 0.206-1.351 0.588c-0.726 0.382-1.607 0.916-2.174 1.834-0.631 1.021-0.392 2.114-0.196 2.768 0.197 0.653 0.305 0.939 0.123 1.376-0.088 0.214-0.631 0.682-1.224 0.973-0.594 0.291-1.133 0.443-1.133 0.443a1.0001 1.0001 0 0 0 -0.715 1.229 1.0001 1.0001 0 0 0 0.715 1.201s0.539 0.153 1.133 0.444c0.593 0.29 1.136 0.758 1.224 0.972 0.182 0.438 0.074 0.723-0.123 1.377-0.196 0.654-0.435 1.746 0.196 2.768 0.567 0.917 1.448 1.452 2.174 1.834 0.725 0.381 1.351 0.588 1.351 0.588a1.0001 1.0001 0 1 0 0.629 -1.897s-0.476-0.159-1.049-0.461c-0.573-0.301-1.186-0.766-1.402-1.117-0.245-0.397-0.165-0.534 0.017-1.141 0.183-0.607 0.512-1.614 0.055-2.716-0.404-0.976-1.211-1.493-1.934-1.866 0.723-0.372 1.53-0.889 1.934-1.865 0.457-1.102 0.128-2.11-0.055-2.717-0.182-0.607-0.262-0.744-0.017-1.14 0.216-0.351 0.829-0.816 1.402-1.118 0.573-0.301 1.049-0.46 1.049-0.46a1.0001 1.0001 0 0 0 -0.27 -1.954zm9.932 0a1.0001 1.0001 0 0 0 -0.266 1.954s0.476 0.159 1.049 0.46c0.573 0.302 1.186 0.767 1.403 1.118 0.245 0.396 0.164 0.533-0.018 1.14s-0.511 1.615-0.055 2.717c0.405 0.976 1.211 1.493 1.934 1.865-0.723 0.373-1.529 0.89-1.934 1.866-0.456 1.102-0.127 2.109 0.055 2.716s0.263 0.744 0.018 1.141c-0.217 0.351-0.83 0.816-1.403 1.117-0.573 0.302-1.049 0.461-1.049 0.461a1.0001 1.0001 0 1 0 0.629 1.897s0.627-0.207 1.352-0.588c0.725-0.382 1.607-0.917 2.174-1.834 0.631-1.022 0.391-2.114 0.195-2.768s-0.304-0.939-0.123-1.377c0.089-0.214 0.631-0.682 1.225-0.972 0.593-0.291 1.132-0.444 1.132-0.444a1.0001 1.0001 0 0 0 0.715 -1.201 1.0001 1.0001 0 0 0 -0.715 -1.229s-0.539-0.152-1.132-0.443c-0.594-0.291-1.136-0.759-1.225-0.973-0.181-0.437-0.073-0.723 0.123-1.376 0.196-0.654 0.436-1.747-0.195-2.768-0.567-0.918-1.449-1.452-2.174-1.834s-1.352-0.588-1.352-0.588a1.0001 1.0001 0 0 0 -0.263 -0.055 1.0001 1.0001 0 0 0 -0.096 -0.002 1.0001 1.0001 0 0 0 -0.004 0zm-4.996 4.518a2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2 2 2 0 0 0 -2 -2zm0 6c-1.105 0-2 0.895-2 2s0.895 2 2 2c0.707 0 1 2 1 2s1-3.602 1-4c0-1.105-0.895-2-2-2z"/>
+</svg>

src/icons/file-csv.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
+ <path style="opacity:0.2" d="M 10,5 C 8.892,5 8,5.892 8,7 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 17 L 29,16 28,5 Z"/>
+ <path fill="#e4e4e4" d="m10 4c-1.108 0-2 0.892-2 2v36c0 1.108 0.892 2 2 2h28c1.108 0 2-0.892 2-2v-26l-11-1-1-11z"/>
+ <path fill="#fff" opacity=".2" d="m10 4c-1.108 0-2 0.892-2 2v1c0-1.108 0.892-2 2-2h18l11 11h1l-12-12z"/>
+ <path style="opacity:0.2" d="m 28,5 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path fill="#fafafa" d="m28 4v10c0 1.1046 0.89543 2 2 2h10l-12-12z"/>
+ <path style="opacity:0.5" d="m 15,37 v -2 h 11 v 2 z m 0,-4 v -2 h 18 v 2 z m 0,-4 v -2 h 18 v 2 z m 0,-4 v -2 h 18 v 2 z"/>
+</svg>

src/icons/file-doc.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
+ <path style="opacity:0.2" d="M 10,5 C 8.892,5 8,5.892 8,7 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 17 L 29,16 28,5 Z"/>
+ <path style="fill:#1b83d4" d="M 10,4 C 8.892,4 8,4.892 8,6 V 42 C 8,43.108 8.892,44 10,44 H 38 C 39.108,44 40,43.108 40,42 V 16 L 29,15 28,4 Z"/>
+ <path fill="#fff" opacity=".1" d="m10 4c-1.108 0-2 0.892-2 2v1c0-1.108 0.892-2 2-2h18l11 11h1l-12-12z"/>
+ <path style="opacity:0.2" d="m 28,5 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path style="fill:#3b9ce6" d="M 28,4 V 14 C 28,15.105 28.895,16 30,16 H 40 Z"/>
+ <g style="opacity:0.2" transform="translate(0,4)">
+  <rect width="11" height="8" x="25" y="18" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="18" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="21" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="24" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="34" rx="1" ry="1"/>
+  <rect width="24" height="2" x="12" y="31" rx="1" ry="1"/>
+  <rect width="24" height="2" x="12" y="28" rx="1" ry=".949"/>
+ </g>
+ <rect style="fill:#7ad2f9" width="11" height="8" x="25" y="21" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="21" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="24" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="27" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="37" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="24" height="2" x="12" y="34" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="24" height="2" x="12" y="31" rx="1" ry=".949"/>
+ <circle style="fill:#1b83d4" cx="34" cy="23" r="1"/>
+ <path style="fill:#1b83d4" d="M 26,28 29,24 33,28 Z"/>
+</svg>

src/icons/file-docx.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" version="1">
+ <path style="opacity:0.2" d="M 10,5 C 8.892,5 8,5.892 8,7 v 36 c 0,1.108 0.892,2 2,2 h 28 c 1.108,0 2,-0.892 2,-2 V 17 L 29,16 28,5 Z"/>
+ <path style="fill:#1b83d4" d="M 10,4 C 8.892,4 8,4.892 8,6 V 42 C 8,43.108 8.892,44 10,44 H 38 C 39.108,44 40,43.108 40,42 V 16 L 29,15 28,4 Z"/>
+ <path fill="#fff" opacity=".1" d="m10 4c-1.108 0-2 0.892-2 2v1c0-1.108 0.892-2 2-2h18l11 11h1l-12-12z"/>
+ <path style="opacity:0.2" d="m 28,5 v 10 c 0,1.1046 0.89543,2 2,2 h 10 z"/>
+ <path style="fill:#3b9ce6" d="M 28,4 V 14 C 28,15.105 28.895,16 30,16 H 40 Z"/>
+ <g style="opacity:0.2" transform="translate(0,4)">
+  <rect width="11" height="8" x="25" y="18" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="18" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="21" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="24" rx="1" ry="1"/>
+  <rect width="10" height="2" x="12" y="34" rx="1" ry="1"/>
+  <rect width="24" height="2" x="12" y="31" rx="1" ry="1"/>
+  <rect width="24" height="2" x="12" y="28" rx="1" ry=".949"/>
+ </g>
+ <rect style="fill:#7ad2f9" width="11" height="8" x="25" y="21" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="21" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="24" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="27" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="10" height="2" x="12" y="37" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="24" height="2" x="12" y="34" rx="1" ry="1"/>
+ <rect style="fill:#ffffff" width="24" height="2" x="12" y="31" rx="1" ry=".949"/>
+ <circle style="fill:#1b83d4" cx="34" cy="23" r="1"/>
+ <path style="fill:#1b83d4" d="M 26,28 29,24 33,28 Z"/>
+</svg>

src/icons/file-exe.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g transform="translate(0, 0)"><polygon fill="#76B5B5" points="44,27 4,27 1,23 5,19 43,19 47,23 "></polygon>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"></path>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"></path>
+<path fill="#9BCED3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"></path>
+<path fill="#FFFFFF" d="M19.496,36h-4.662v-7.853h4.662v1.702h-2.54v1.236h2.353v1.702h-2.353v1.482h2.54V36z"></path>
+<path fill="#FFFFFF" d="M27.945,36H25.49l-1.53-2.455L22.445,36h-2.4l2.604-4.018L20.2,28.147h2.353l1.418,2.428l1.364-2.428h2.423
+	l-2.487,4.001L27.945,36z"></path>
+<path fill="#FFFFFF" d="M33.488,36h-4.662v-7.853h4.662v1.702h-2.541v1.236h2.354v1.702h-2.354v1.482h2.541V36z"></path></g></svg>