fixes

front/src/apps/finder/finder-window.js

@@ -10,7 +10,7 @@ export default class FinderWindow{
     /** @type {Finder} */
     #finder
     /**
-     * @deprecated
+     * @deprecated move to this.#finder.WDE()
      * @type {AbstractWebDesktopEnvironment} 
      */
     #wde
@@ -31,7 +31,7 @@ export default class FinderWindow{
      * @returns 
      */
     async Init(finder, args, runContext){
-        console.log(args)
+        // console.log(args)
         this.#finder = finder
         if (runContext.isMobile){
             console.log("Mobile Finder!")
@@ -88,7 +88,7 @@ export default class FinderWindow{
         let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
         newWindow.innerHTML = html
         
-        // console.log(this.#wde)
+        console.log(newWindow.querySelector(".FileTileView"))
         
         this.fileView = new this.#wde.FileView(
             newWindow.querySelector(".FileTileView"),
@@ -98,19 +98,19 @@ export default class FinderWindow{
             () => { this.ReRenderDir() },
             this.#wde)
             
-            newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
+            // newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
-                this.#wde.Decorat.CloseWindow(newWindow)
+            //     this.#wde.Decorat.CloseWindow(newWindow)
-            })
+            // })
             
-            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
+            // newWindow.querySelector("#RootButton").addEventListener('click', () =>{
-                this.RenderDir('/')
+            //     this.RenderDir('/')
-            })
+            // })
             
-            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
+            // newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
-                this.RenderDir('/home/user')
+            //     this.RenderDir('/home/user')
-            })
+            // })
             
-            let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
+            // let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".scrollbar-place"), newWindow.querySelector(".FileTileView"))
             
             this.windowElem = newWindow
             this.RenderDir(args[0])

front/src/apps/finder/finder.less

@@ -1,34 +1,34 @@
-.FinderContent {
+@import "../../theme.less";
+@import "../../wde/effects.less";
+
+.finder-content {
     width: 100%;
     height: 100%;
 
     /* Auto layout */
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     align-items: flex-start;
     padding: 0px;
 }
 
-.FinderContent .ToolBar{
+.finder-content > .tool-bar{
     width: 100%;
-    height: 20px;
+    min-height: 20px;
-    border-bottom: 1px solid #555555;
+    border-bottom: @eff-border-grey;
-    background-color: #EEEEEE;
 }
 
-.Focused .FinderContent .ToolBar{
+.window-frame.Focused .tool-bar{
     border-bottom: 1px solid #000000;
-    background-color: #DDDDDD;
+    box-shadow: @eff-box-shadow-convex;
 }
 
-
+.finder-content > .file-view-container{
-
-.FinderContent .FinderFileView{
     width: 100%;
     height: 100%;
 
-    background-color: #FFFFFF;
+    // background-color: #FFFFFF;
 
     /* Auto layout */
     display: flex;

front/src/desktop.less

@@ -1,8 +1,11 @@
 @import "./wde/primitives.less";
 @import "./wde/widgets/file-view/file-view.less";
-@import "./wde/legacy-ui.less";
+@import "./wde/widgets/scrollbar/scrollbar.less";
+// @import "./wde/legacy-ui.less";
 @import "./wde/widgets/basic-widgets.less";
 @import "./theme.less";
+@import "./wde/window-frame.less";
+@import "./wde/widgets/title-bar/title-bar.less";
 
 // @font-face{
 //     font-family: "Virtue";
@@ -26,6 +29,8 @@
 .Click {
     pointer-events: all;
 }
+.DragArea
+
 *{
     font-family: Verdana, Geneva, sans-serif;
     font-size: 11px;
@@ -39,12 +44,14 @@
 }
 
 body{
-    zoom: var(--zoom);
+    // zoom: var(--zoom);
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0px;
 
+    font-size: 11px;
+
     /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */

front/src/src/apps copy/finder/finder-window.js

@@ -1,339 +0,0 @@
-import AbstractWebDesktopEnvironment from "../../wde/wde.js"
-import Finder from "./finder.js"
-
-
-export default class FinderWindow{
-    #appId = "Finder" //FIXME
-    curPath = ""
-    fileView = undefined
-    windowElem = undefined
-    /** @type {Finder} */
-    #finder
-    /** @type {AbstractWebDesktopEnvironment} */
-    #wde
-    
-    /**
-     * @constructor
-     * @param {Finder}
-     * @param {AbstractWebDesktopEnvironment} wde
-     */
-    constructor(finder, wde){
-        this.#finder = finder
-        this.#wde = wde
-    }
-    /**
-     * @param {Finder} finder
-     * @param {*} args 
-     * @param {import("../../wde/wde.js").runContext} runContext 
-     * @returns 
-     */
-    async Init(finder, args, runContext){
-        this.#finder = finder
-        if (runContext.isMobile){
-            console.log("Mobile Finder!")
-            this.CreateMobileView(args, runContext)
-            return
-        }
-        if (args[1] == "--desktop"){
-            let desktopNode = document.body.querySelector(`#${args[2]}`)
-            if (desktopNode == null){
-               this.#wde.Alert("Desktop node not found")
-                return
-            }
-
-            const params = new URLSearchParams({
-                path: args[0]
-            })
-            const response = await fetch(`/app/${this.#appId}/renderDesktop?` + params,
-            {
-                method: "POST",
-                body: JSON.stringify(runContext)
-            })
-            if (response.status != 200){
-                console.log(response.status)
-                // this.#wde.Alert("Error in render desktop") //TODO
-                return
-            }
-            const html = await response.text()
-            desktopNode.innerHTML = html
-
-            // console.log(this.#wde)
-
-            this.fileView = new this.#wde.FileView(
-                desktopNode.querySelector(".FileTileView"), (event) =>{this.Click(event)},
-                (event) => { this.RightClick(event) },
-                (event, draggedElem) => { this.DropEvent(event, draggedElem)},
-                () => { this.ReRenderDir() }
-                )
-                this.RenderDir(args[0])
-                return
-        }
-        const params = new URLSearchParams({isMobile: false}) //FIXME
-        const response = await fetch(`/app/${this.#appId}/render?` + params,  
-        {
-            method: "POST",
-            body: JSON.stringify(runContext)
-        })
-        if (response.status != 200){
-            const error = await response.json()
-           this.#wde.Alert(error.message)
-            return
-        }
-        const html = await response.text()
-        
-        let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
-        newWindow.innerHTML = html
-        
-        // console.log(this.#wde)
-        
-        this.fileView = new this.#wde.FileView(
-            newWindow.querySelector(".FileTileView"),
-            (event) => { this.Click(event) },
-            (event) => { this.RightClick(event) },
-            (event, draggedElem) => { this.DropEvent(event, draggedElem)},
-            () => { this.ReRenderDir() }
-            )
-            
-            newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
-                this.#wde.Decorat.CloseWindow(newWindow)
-            })
-            
-            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
-                this.RenderDir('/')
-            })
-            
-            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
-                this.RenderDir('/home/user')
-            })
-            
-            let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
-            
-            this.windowElem = newWindow
-            this.RenderDir(args[0])
-        }
-    
-    CreateDesktopWindow(){
-
-    }
-
-    /**
-     * @param {*} args 
-     * @param {import("../../wde/wde-desktop.js").runContext} runContext 
-     * @returns 
-     */
-    async CreateMobileView(args, runContext){
-        
-        const params = new URLSearchParams({isMobile: false}) //FIXME
-        const response = await fetch(`/app/${this.#appId}/render?` + params,  
-        {
-            method: "POST",
-            body: JSON.stringify(runContext)
-        })
-        if (response.status != 200){
-            const error = await response.json()
-           this.#wde.Alert(error.message)
-            return
-        }
-        const html = await response.text()
-        console.log(this.#wde)
-        let newView = this.#wde.Decorat.CreateNewView(this.#appId,)
-        newView.innerHTML = html
-    }
-    /**
-    * @param {string} path
-    */
-    RenderDir(path){
-        this.curPath = path
-        this.fileView.OpenFolder(path)
-    }
-    
-    ReRenderDir(){
-        this.RenderDir(this.curPath)
-    }
-    
-    /**
-     * @param {DragEvent} event
-     * @param {HTMLElement} draggedElem
-    */
-    async DropEvent(event){
-        // console.log(event.dataTransfer.getData("dropType"))
-        if (event.dataTransfer.getData("dropType") == "move"){
-            const sourcePath= event.dataTransfer.getData("filePath")
-            const targetPath = this.curPath + "/" + event.dataTransfer.getData("fileName")
-            const res = await WebFS.MoveFile(sourcePath, targetPath)
-            if (res){
-                this.ReRenderDir()
-            } else {
-               this.#wde.Alert("UWAGA TODO MOVE FILE ERROR") //TODO
-            }
-        } else {
-            console.log(event, this.curPath)
-            let files = event.dataTransfer.files
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
-                console.log("file:" + file.name)
-                
-                const res = await WebFS.UploadFile(file, this.curPath)
-                if (res){
-                    this.ReRenderDir()
-                }
-            }
-
-            const params = new URLSearchParams({
-                parentPath: this.curPath,
-            })
-            const response = await fetch('/fs/upload/?' + params, 
-            {
-                method: "POST",  //TODO Change to PUT?
-                body: formData
-            })
-            if (response.status != 200){
-               this.#wde.Alert("ERROR IN UPLOADING FILE")//TODO
-            } else {
-                this.ReRenderDir()
-            }
-               
-        }
-    }
-
-    /**
-    * @param {MouseEvent} event
-    */
-    Click(event){
-        this.OpenFile(this.curPath, event.target.getAttribute("name"), event.target.getAttribute("filetype"))
-    }
-
-    /**
-    * @param {string} filePath
-    */
-    async OpenFile(parentPath, fileName, fileType){
-        // console.log(parentPath, fileName, fileType)
-        // const splittedPath = filePath.split("/")
-        // const fileName = splittedPath[splittedPath.length - 1]
-        const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
-
-        switch (true) {
-            case fileType == "objectlink":
-               this.#wde.Alert("Links not supported yet")
-                break
-            case fileType == "pathlink":
-                let res = await WebFS.ReadPathLink(`${parentPath}/${fileName}`)
-                console.log(res)
-                this.OpenFile(res.parentPath, res.name, res.filetype)
-                break
-            case fileExtension == "app":
-                this.#wde.Open(`${parentPath}/${fileName}`, [])
-                break
-            case fileExtension == "blog":
-                this.#wde.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
-                break
-            case fileType == "directory":
-                this.#wde.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
-                break
-            case fileExtension == "blog":
-                this.#wde.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
-                break
-            case fileExtension == "jpeg" | fileExtension == "png":
-                this.#wde.Open("img-viewer", [`${parentPath}/${fileName}`])
-                break;
-            default:
-               this.#wde.Alert("Unsupported file type")
-                break;
-        }
-    }
-
-    /**
-    * @param {MouseEvent} event
-    */
-    RightClick(event){
-        this.CreateContextMenu(event.target, [event.clientY, event.clientX])
-    }
-
-    /**
-    * @param {HTMLElement} target
-    * @param {string[]} pos
-    */
-    async CreateContextMenu(target, pos){
-        let context = ""
-        const fileName = target.getAttribute("name") //TODO check for null
-        const fileType = target.getAttribute("fileType")
-        if (target.classList.contains("FileTileView"))
-        {
-            context = "FileTileView"
-        } else {
-            context = fileType
-        }
-        let path = ""
-        if (fileName === null){
-            path = this.curPath
-        } else {
-            path = `${this.curPath}/${fileName}`
-        }
-        const params = new URLSearchParams({context: context, path: path})
-        const response = await fetch(`/app/${this.#appId}/contextMenu?` + params) 
-        if (response.status != 200){
-           this.#wde.Alert("ERROR in Context menu TODO"); //TODO
-            return
-        }
-        const html = await response.text()
-        let overlay = document.createElement("div") //TODO Move to WDE.CreateOverlay()
-        overlay.setAttribute('id', 'finder-context-menu-overlay')
-        overlay.style.position = 'absolute'
-        overlay.style.width = "100%"
-        overlay.style.height = "100%"
-
-        let menu = document.createElement("div")
-        menu.setAttribute('class', 'ContextMenu  WindowFrameShadow')
-        menu.style.position = 'absolute';
-        menu.style.top = pos[0] + "px";
-        menu.style.left = pos[1] + "px";
-        
-        menu.innerHTML = html
-        // menu.children[0].firstElementChild.remove()
-        menu.children[0].lastElementChild.remove() //FIXME Can't ommit rendering of horLine in end of menu on backend
-        
-        overlay.appendChild(menu)
-        document.body.appendChild(overlay)
-
-        overlay.addEventListener('click', async (event) => {
-            if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
-                let res = false
-                switch (event.target.children[0].getAttribute("action")) {
-                    case "createPathLink":
-                        res = await WebFS.CreatePathLink(`${this.curPath}/${fileName}`, `${this.curPath}/Link to ${fileName}` )
-                        if (res){
-                            this.ReRenderDir()
-                        }
-                        break
-                    case "createDir":
-                        res = await WebFS.CreateDirectory(`${this.curPath}`)
-                        console.log(res)
-                        if (res){
-                            this.ReRenderDir()
-                        }
-                        break
-                    case "deleteFile":
-                        res = await WebFS.DeleteFile(`${this.curPath}/${fileName}`)
-                        console.log(res)
-                        if (res){
-                            this.ReRenderDir()
-                        }
-                        break
-                    case "getInfo":
-                        Finder.RenderProperites(path)
-                        break
-                    case "openAsDir":
-                        this.#wde.Open(`/Applications/${this.#appId}.app`,[`${this.curPath}/${fileName}`])
-                        break
-                    default:
-                        break;
-                } 
-            }
-            overlay.remove()
-        })
-        overlay.addEventListener('contextmenu', (event) => {
-            event.preventDefault();
-            overlay.remove()
-        })
-    }
-}

front/src/src/apps copy/finder/finder.js

@@ -1,64 +0,0 @@
-// require("./finder.less")
-
-import WDEApplication from "../../wde/application.js"
-import AbstractWebDesktopEnvironment from "../../wde/wde.js"
-import FinderWindow from "./finder-window.js"
-
-export default class Finder extends WDEApplication{
-    /** @deprecated */
-    static AppId = "Finder" 
-
-    /**
-     * @constructor
-     * @param {AbstractWebDesktopEnvironment} wde 
-     */
-    constructor(wde){
-        super(wde, "Finder")
-    }
-
-    /**
-    * @param {string[]} args
-    * @param {import("../../wde/wde.js").runContext} runContext
-    */
-    async NewWindow(args, runContext){
-        
-        let newFinder = new FinderWindow(this, super.WDE())
-        await newFinder.Init(this, args, runContext)
-    }
-
-    /**
-    * @param {string[]} args
-    * @param {import("../../wde/wde.js").runContext} runContext
-    */
-    async NewView(args, runContext){
-        // console.log(super.WDE())
-        let newFinderView = new FinderWindow(this, super.WDE())
-        await newFinderView.Init(this, args, runContext)
-    }
-    
-    /**
-     * @param {string} path
-     * @returns {boolean}
-    */
-    async RenderProperites(path){
-        // return
-        if (path == null || path ==""){
-            return
-        }
-        const params = new URLSearchParams({
-            path: path
-        })
-        const response = await fetch(`/app/${Finder.AppId}/renderProps?` + params)
-        if (response.status != 200){
-            // WebDesktopEnvironment.Alert("Error in properties render") //TODO
-            return false
-        }
-        const html = await response.text()
-        
-        let newWindow = super.WDE().Decorat.CreateNewWindow(Finder.AppId, 350, 500 )
-        newWindow.innerHTML = html
-        newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
-            // WebDesktopEnvironment.CloseWindow(newWindow)
-        })
-    }
-}

front/src/src/apps copy/finder/finder.less

@@ -1,39 +0,0 @@
-.FinderContent {
-    width: 100%;
-    height: 100%;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}
-
-.FinderContent .ToolBar{
-    width: 100%;
-    height: 20px;
-    border-bottom: 1px solid #555555;
-    background-color: #EEEEEE;
-}
-
-.Focused .FinderContent .ToolBar{
-    border-bottom: 1px solid #000000;
-    background-color: #DDDDDD;
-}
-
-
-
-.FinderContent .FinderFileView{
-    width: 100%;
-    height: 100%;
-
-    background-color: #FFFFFF;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}

front/src/src/apps/desktop.less

@@ -1,79 +0,0 @@
-@import "./wde/primitives.less";
-@import "./wde/widgets/file-view/file-view.less";
-@import "./wde/legacy-ui.less";
-@import "./wde/widgets/basic-widgets.less";
-@import "./theme.less";
-
-// @font-face{
-//     font-family: "Virtue";
-//     src:url("/res/dev-fs/fonts/virtue.ttf");
-// }
-
-/* @font-face{
-    font-family: "Virtue";
-    src:url("/res/dev-fs/fonts/virtue.ttf")
-} */
-
-/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
-    html {
-      zoom: 3
-    }
-  } */
-
-.NoClick {
-    pointer-events: none;
-}
-.Click {
-    pointer-events: all;
-}
-*{
-    font-family: Verdana, Geneva, sans-serif;
-    font-size: 11px;
-    font-style: normal;
-    font-weight:initial;
-}
-
-*::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}
-
-body{
-    zoom: var(--zoom);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-
-    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-    touch-action: manipulation;
-}
-
-#applications{
-    position: static;
-    width: 0px;
-    height: 0px;
-    visibility: hidden;
-}
-
-#windows-layer {
-    width: 0px;
-    height: 0px;
-    /* position: fixed; */
-    position: static;
-}
-
-#desktop-layer{
-    position: fixed;
-    /* margin: 0px; */
-    width: 100%;
-    height: 100%;
-    background-color: @col-ceil;
-}

front/src/src/apps/finder/finder-window.js

@@ -1,339 +0,0 @@
-import AbstractWebDesktopEnvironment from "../../wde/wde.js"
-import Finder from "./finder.js"
-
-
-export default class FinderWindow{
-    #appId = "Finder" //FIXME
-    curPath = ""
-    fileView = undefined
-    windowElem = undefined
-    /** @type {Finder} */
-    #finder
-    /** @type {AbstractWebDesktopEnvironment} */
-    #wde
-    
-    /**
-     * @constructor
-     * @param {Finder}
-     * @param {AbstractWebDesktopEnvironment} wde
-     */
-    constructor(finder, wde){
-        this.#finder = finder
-        this.#wde = wde
-    }
-    /**
-     * @param {Finder} finder
-     * @param {*} args 
-     * @param {import("../../wde/wde.js").runContext} runContext 
-     * @returns 
-     */
-    async Init(finder, args, runContext){
-        this.#finder = finder
-        if (runContext.isMobile){
-            console.log("Mobile Finder!")
-            this.CreateMobileView(args, runContext)
-            return
-        }
-        if (args[1] == "--desktop"){
-            let desktopNode = document.body.querySelector(`#${args[2]}`)
-            if (desktopNode == null){
-               this.#wde.Alert("Desktop node not found")
-                return
-            }
-
-            const params = new URLSearchParams({
-                path: args[0]
-            })
-            const response = await fetch(`/app/${this.#appId}/renderDesktop?` + params,
-            {
-                method: "POST",
-                body: JSON.stringify(runContext)
-            })
-            if (response.status != 200){
-                console.log(response.status)
-                // this.#wde.Alert("Error in render desktop") //TODO
-                return
-            }
-            const html = await response.text()
-            desktopNode.innerHTML = html
-
-            // console.log(this.#wde)
-
-            this.fileView = new this.#wde.FileView(
-                desktopNode.querySelector(".FileTileView"), (event) =>{this.Click(event)},
-                (event) => { this.RightClick(event) },
-                (event, draggedElem) => { this.DropEvent(event, draggedElem)},
-                () => { this.ReRenderDir() }
-                )
-                this.RenderDir(args[0])
-                return
-        }
-        const params = new URLSearchParams({isMobile: false}) //FIXME
-        const response = await fetch(`/app/${this.#appId}/render?` + params,  
-        {
-            method: "POST",
-            body: JSON.stringify(runContext)
-        })
-        if (response.status != 200){
-            const error = await response.json()
-           this.#wde.Alert(error.message)
-            return
-        }
-        const html = await response.text()
-        
-        let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
-        newWindow.innerHTML = html
-        
-        // console.log(this.#wde)
-        
-        this.fileView = new this.#wde.FileView(
-            newWindow.querySelector(".FileTileView"),
-            (event) => { this.Click(event) },
-            (event) => { this.RightClick(event) },
-            (event, draggedElem) => { this.DropEvent(event, draggedElem)},
-            () => { this.ReRenderDir() }
-            )
-            
-            newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
-                this.#wde.Decorat.CloseWindow(newWindow)
-            })
-            
-            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
-                this.RenderDir('/')
-            })
-            
-            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
-                this.RenderDir('/home/user')
-            })
-            
-            let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
-            
-            this.windowElem = newWindow
-            this.RenderDir(args[0])
-        }
-    
-    CreateDesktopWindow(){
-
-    }
-
-    /**
-     * @param {*} args 
-     * @param {import("../../wde/wde-desktop").runContext} runContext 
-     * @returns 
-     */
-    async CreateMobileView(args, runContext){
-        
-        const params = new URLSearchParams({isMobile: false}) //FIXME
-        const response = await fetch(`/app/${this.#appId}/render?` + params,  
-        {
-            method: "POST",
-            body: JSON.stringify(runContext)
-        })
-        if (response.status != 200){
-            const error = await response.json()
-           this.#wde.Alert(error.message)
-            return
-        }
-        const html = await response.text()
-        console.log(this.#wde)
-        let newView = this.#wde.Decorat.CreateNewView(this.#appId,)
-        newView.innerHTML = html
-    }
-    /**
-    * @param {string} path
-    */
-    RenderDir(path){
-        this.curPath = path
-        this.fileView.OpenFolder(path)
-    }
-    
-    ReRenderDir(){
-        this.RenderDir(this.curPath)
-    }
-    
-    /**
-     * @param {DragEvent} event
-     * @param {HTMLElement} draggedElem
-    */
-    async DropEvent(event){
-        // console.log(event.dataTransfer.getData("dropType"))
-        if (event.dataTransfer.getData("dropType") == "move"){
-            const sourcePath= event.dataTransfer.getData("filePath")
-            const targetPath = this.curPath + "/" + event.dataTransfer.getData("fileName")
-            const res = await WebFS.MoveFile(sourcePath, targetPath)
-            if (res){
-                this.ReRenderDir()
-            } else {
-               this.#wde.Alert("UWAGA TODO MOVE FILE ERROR") //TODO
-            }
-        } else {
-            console.log(event, this.curPath)
-            let files = event.dataTransfer.files
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
-                console.log("file:" + file.name)
-                
-                const res = await WebFS.UploadFile(file, this.curPath)
-                if (res){
-                    this.ReRenderDir()
-                }
-            }
-
-            const params = new URLSearchParams({
-                parentPath: this.curPath,
-            })
-            const response = await fetch('/fs/upload/?' + params, 
-            {
-                method: "POST",  //TODO Change to PUT?
-                body: formData
-            })
-            if (response.status != 200){
-               this.#wde.Alert("ERROR IN UPLOADING FILE")//TODO
-            } else {
-                this.ReRenderDir()
-            }
-               
-        }
-    }
-
-    /**
-    * @param {MouseEvent} event
-    */
-    Click(event){
-        this.OpenFile(this.curPath, event.target.getAttribute("name"), event.target.getAttribute("filetype"))
-    }
-
-    /**
-    * @param {string} filePath
-    */
-    async OpenFile(parentPath, fileName, fileType){
-        // console.log(parentPath, fileName, fileType)
-        // const splittedPath = filePath.split("/")
-        // const fileName = splittedPath[splittedPath.length - 1]
-        const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
-
-        switch (true) {
-            case fileType == "objectlink":
-               this.#wde.Alert("Links not supported yet")
-                break
-            case fileType == "pathlink":
-                let res = await WebFS.ReadPathLink(`${parentPath}/${fileName}`)
-                console.log(res)
-                this.OpenFile(res.parentPath, res.name, res.filetype)
-                break
-            case fileExtension == "app":
-                this.#wde.Open(`${parentPath}/${fileName}`, [])
-                break
-            case fileExtension == "blog":
-                this.#wde.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
-                break
-            case fileType == "directory":
-                this.#wde.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
-                break
-            case fileExtension == "blog":
-                this.#wde.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
-                break
-            case fileExtension == "jpeg" | fileExtension == "png":
-                this.#wde.Open("img-viewer", [`${parentPath}/${fileName}`])
-                break;
-            default:
-               this.#wde.Alert("Unsupported file type")
-                break;
-        }
-    }
-
-    /**
-    * @param {MouseEvent} event
-    */
-    RightClick(event){
-        this.CreateContextMenu(event.target, [event.clientY, event.clientX])
-    }
-
-    /**
-    * @param {HTMLElement} target
-    * @param {string[]} pos
-    */
-    async CreateContextMenu(target, pos){
-        let context = ""
-        const fileName = target.getAttribute("name") //TODO check for null
-        const fileType = target.getAttribute("fileType")
-        if (target.classList.contains("FileTileView"))
-        {
-            context = "FileTileView"
-        } else {
-            context = fileType
-        }
-        let path = ""
-        if (fileName === null){
-            path = this.curPath
-        } else {
-            path = `${this.curPath}/${fileName}`
-        }
-        const params = new URLSearchParams({context: context, path: path})
-        const response = await fetch(`/app/${this.#appId}/contextMenu?` + params) 
-        if (response.status != 200){
-           this.#wde.Alert("ERROR in Context menu TODO"); //TODO
-            return
-        }
-        const html = await response.text()
-        let overlay = document.createElement("div") //TODO Move to WDE.CreateOverlay()
-        overlay.setAttribute('id', 'finder-context-menu-overlay')
-        overlay.style.position = 'absolute'
-        overlay.style.width = "100%"
-        overlay.style.height = "100%"
-
-        let menu = document.createElement("div")
-        menu.setAttribute('class', 'ContextMenu  WindowFrameShadow')
-        menu.style.position = 'absolute';
-        menu.style.top = pos[0] + "px";
-        menu.style.left = pos[1] + "px";
-        
-        menu.innerHTML = html
-        // menu.children[0].firstElementChild.remove()
-        menu.children[0].lastElementChild.remove() //FIXME Can't ommit rendering of horLine in end of menu on backend
-        
-        overlay.appendChild(menu)
-        document.body.appendChild(overlay)
-
-        overlay.addEventListener('click', async (event) => {
-            if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
-                let res = false
-                switch (event.target.children[0].getAttribute("action")) {
-                    case "createPathLink":
-                        res = await WebFS.CreatePathLink(`${this.curPath}/${fileName}`, `${this.curPath}/Link to ${fileName}` )
-                        if (res){
-                            this.ReRenderDir()
-                        }
-                        break
-                    case "createDir":
-                        res = await WebFS.CreateDirectory(`${this.curPath}`)
-                        console.log(res)
-                        if (res){
-                            this.ReRenderDir()
-                        }
-                        break
-                    case "deleteFile":
-                        res = await WebFS.DeleteFile(`${this.curPath}/${fileName}`)
-                        console.log(res)
-                        if (res){
-                            this.ReRenderDir()
-                        }
-                        break
-                    case "getInfo":
-                        Finder.RenderProperites(path)
-                        break
-                    case "openAsDir":
-                        this.#wde.Open(`/Applications/${this.#appId}.app`,[`${this.curPath}/${fileName}`])
-                        break
-                    default:
-                        break;
-                } 
-            }
-            overlay.remove()
-        })
-        overlay.addEventListener('contextmenu', (event) => {
-            event.preventDefault();
-            overlay.remove()
-        })
-    }
-}

front/src/src/apps/finder/finder.js

@@ -1,64 +0,0 @@
-// require("./finder.less")
-
-import WDEApplication from "../../wde/application.js"
-import AbstractWebDesktopEnvironment from "../../wde/wde.js"
-import FinderWindow from "./finder-window.js"
-
-export default class Finder extends WDEApplication{
-    /** @deprecated */
-    static AppId = "Finder" 
-
-    /**
-     * @constructor
-     * @param {AbstractWebDesktopEnvironment} wde 
-     */
-    constructor(wde){
-        super(wde, "Finder")
-    }
-
-    /**
-    * @param {string[]} args
-    * @param {import("../../wde/wde.js").runContext} runContext
-    */
-    async NewWindow(args, runContext){
-        
-        let newFinder = new FinderWindow(this, super.WDE())
-        await newFinder.Init(this, args, runContext)
-    }
-
-    /**
-    * @param {string[]} args
-    * @param {import("../../wde/wde.js").runContext} runContext
-    */
-    async NewView(args, runContext){
-        // console.log(super.WDE())
-        let newFinderView = new FinderWindow(this, super.WDE())
-        await newFinderView.Init(this, args, runContext)
-    }
-    
-    /**
-     * @param {string} path
-     * @returns {boolean}
-    */
-    async RenderProperites(path){
-        // return
-        if (path == null || path ==""){
-            return
-        }
-        const params = new URLSearchParams({
-            path: path
-        })
-        const response = await fetch(`/app/${Finder.AppId}/renderProps?` + params)
-        if (response.status != 200){
-            // WebDesktopEnvironment.Alert("Error in properties render") //TODO
-            return false
-        }
-        const html = await response.text()
-        
-        let newWindow = super.WDE().Decorat.CreateNewWindow(Finder.AppId, 350, 500 )
-        newWindow.innerHTML = html
-        newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
-            // WebDesktopEnvironment.CloseWindow(newWindow)
-        })
-    }
-}

front/src/src/apps/finder/finder.less

@@ -1,39 +0,0 @@
-.FinderContent {
-    width: 100%;
-    height: 100%;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}
-
-.FinderContent .ToolBar{
-    width: 100%;
-    height: 20px;
-    border-bottom: 1px solid #555555;
-    background-color: #EEEEEE;
-}
-
-.Focused .FinderContent .ToolBar{
-    border-bottom: 1px solid #000000;
-    background-color: #DDDDDD;
-}
-
-
-
-.FinderContent .FinderFileView{
-    width: 100%;
-    height: 100%;
-
-    background-color: #FFFFFF;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}

front/src/src/apps/init.mjs

@@ -1,3 +0,0 @@
-export default class Kek{
-    
-}

front/src/src/apps/mobile.less

@@ -1,54 +0,0 @@
-@import "./wde/sunboard/sunboard-mobile.less";
-
-body{
-    zoom: 2;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-
-    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-    touch-action: manipulation;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-#mobile-app-views{
-    width: 100%;
-    height: 100%;
-    // padding: 64px;
-    // border-radius: 50px;
-    // overflow:hidden
-    // background-color: @col-ceil;
-}
-
-#controls-bar{
-    &:extend(.WdePrimitives.AdjectiveElement);
-    width: 100%;
-    height: 150px;
-    background-color: @col-argent;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.mobile-app-view{
-    // background-color: burlywood;
-    width: 100%;
-    height: 100%;
-    // position: absolute;
-}

front/src/src/apps/theme.less

@@ -1,2 +0,0 @@
-@col-ceil: #9999CC;
-@col-argent: #C0C0C0;

front/src/src/apps/wde/application.js

@@ -1,32 +0,0 @@
-import AbstractWebDesktopEnvironment from "./wde.js"
-
-export default class WDEApplication{
-    /** @type {AbstractWebDesktopEnvironment} */
-    #wde
-    /** @type {string} */
-    AppId
-
-    /**
-     * @constructor
-     * @param {AbstractWebDesktopEnvironment} wde 
-     */
-    constructor(wde, AppId){
-        this.#wde = wde
-        // console.log(wde)
-        this.AppId = AppId
-    }
-
-    /** @returns {AbstractWebDesktopEnvironment} */
-    WDE(){
-        return this.#wde
-    }
-
-    async NewWindow(){
-        
-    }
-
-    /** @returns {Element} */
-    async NewView(){
-        return this.#wde.Decorat.CreateNewView(this.AppId)
-    }
-}

front/src/src/apps/wde/decorat/desktop-decorat.js

@@ -1,104 +0,0 @@
-export default class DesktopDecorat{
-    /** @type {Element} */
-    #windowsLayer
-
-    constructor(){
-        this.windowLayer = document.body.querySelector('#windows-layer')
-        // this.#windowsLayer = document.body.querySelector('#windows-layer')
-        this.#windowsLayer = document.body.querySelector('#windows-layer')
-        let startDrag = (event) => {
-            let window = event.target.closest('.WindowFrame')
-            this.bringWindowToFront(window)
-            if (event.target.classList.contains("DragArea")){
-                let xPosInit = event.offsetX
-                let yPosInit = event.offsetY
-                let dragWindow = function(event){
-                    window.style.left = `${event.clientX - xPosInit}px`
-                    window.style.top = `${event.clientY - yPosInit}px`
-                }
-                let stopDrag = function(){
-                    removeEventListener('mousemove', dragWindow)
-                    removeEventListener('mouseup', stopDrag)
-                }
-
-                addEventListener('mousemove', dragWindow)
-                addEventListener('mouseup', stopDrag)
-            }
-        }
-        this.#windowsLayer.addEventListener('mousedown', startDrag)
-    }
-    
-    
-    /**
-     * @param {HTMLElement} window
-    */
-    bringWindowToFront(window){ //FIXME
-        let previousWindow = this.#windowsLayer.lastChild
-        if (window == null || window == undefined){
-            return
-        }
-        if (window != previousWindow){
-            this.#windowsLayer.insertBefore(window, previousWindow.nextSibling)
-            previousWindow.classList.remove("Focused")
-            window.classList.add("Focused")
-        } else {
-            window.classList.add("Focused")
-        }
-        return
-    }
-
-     /**
-    * @param {string} appId
-    * @param {number} width
-    * @param {number} height
-    * @returns {HTMLElement}
-    */
-    CreateNewWindow(appId, width, height) {    
-        let newWindow = document.createElement("div")
-        newWindow.setAttribute('appid', appId)
-
-        newWindow.setAttribute("class", "WindowFrame ConvexElement")
-        newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
-
-        newWindow.style.width = width.toString() + "px"
-        newWindow.style.height = height.toString() + "px"
-
-        document.body.querySelector('#windows-layer').appendChild(newWindow)
-        return newWindow
-        
-    }
-
-    /**
-    * @param {HTMLElement} window
-    */
-    CloseWindow(window) {
-        window.remove()
-    }
-
-    CloseFocusedWindow() {
-        if (document.body.querySelector('#windows-layer').childElementCount > 1){
-            document.body.querySelector('#windows-layer').lastElementChild.remove()
-        }
-    }
-
-
-    static ChangeURL(appWindow){
-        let appId = appWindow.getAttribute('appid')
-        window.history.replaceState(null, "", `/${appId}/`);
-    }
-
-    /**
-    * @param {num} length
-    */
-    #makeid(length) {
-        let result = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        let counter = 0;
-        while (counter < length) {
-          result += characters.charAt(Math.floor(Math.random() * charactersLength));
-          counter += 1;
-        }
-        return result;
-    }
-}

front/src/src/apps/wde/decorat/mobile-decorat.js

@@ -1,27 +0,0 @@
-export default class MobileDecorat {
-    /** @type {Element} */
-    #applicationsNode
-    constructor(){
-        this.#applicationsNode = document.body.querySelector("#mobile-app-views") //TODO validate
-    }
-
-    /**
-     * @param {string} appId
-     * @returns {Element}
-     */
-    CreateNewView(appId){
-        let newView = document.createElement("div")
-        newView.setAttribute("class", "mobile-app-view")
-        newView.setAttribute("appId", appId)
-        this.#applicationsNode.appendChild(newView)
-        return newView
-    }
-    Open(){
-        
-    }
-    BackAction(){
-        // console.log(this.#applicationsNode.childNodes.length)
-        if (this.#applicationsNode.childNodes.length <= 1) return
-        this.#applicationsNode.lastChild.remove()
-    }
-}

front/src/src/apps/wde/legacy-ui.less

@@ -1,232 +0,0 @@
-.WindowFrame {
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 4px;
-    padding-top: 2px;
-    padding-right: 6px;
-    gap: 4px;
-
-    position: absolute;
-
-    background: #DDDDDD;
-    border: 1px solid #555555;
-    
-
-    /* Inside auto layout */
-    flex: none;
-    order: 1;
-    align-self: stretch;
-    flex-grow: 1;
-}
-
-/* TODO Add shadows to windows */
-.WindowFrame.Focused{
-    border: 1px solid #000000;
-    background-color: #CCCCCC;
-}
-
-.WindowFrameShadow {
-    box-shadow: 2px 2px 0px #555555;
-}
-
-/* FIXME Not work on context menu  */
-.WindowFrameShadow.Focused  { 
-    box-shadow: 2px 2px 0px #000000;
-}
-
-.ConvexElement.Focused  {
-    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
-                inset 1px 1px 0px #FFFFFF;
-}
-
-.AdjectiveElement {
-    border: 1px solid #555555;
-}
-
-.Focused .AdjectiveElement  {
-    border: 1px solid #000000;
-    box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
-                1px 1px 0px #FFFFFF;
-                /* inset -1px -1px 0px rgba(0, 0, 0, 0.27), */
-                /* inset 1px 1px 0px #FFFFFF;*/
-}
-
-.AdjectiveHorizontalLine {
-    border-top: 1px solid rgba(0, 0, 0, 0.25);
-    border-bottom: 1px solid #FFFFFF;
-    width: 100%;
-    height: 0px;
-}
-
-.AdjectiveHorizontalLine:last-child {
-    height: 0%;
-    visibility: hidden;
-}
-
-
-.WindowFrame .TitleBar {
-    width: 100%;
-    height: 13px;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    padding: 0px;
-
-
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 0;
-}
-
-.WindowFrame .TitleBar .Lable {
-    position: relative;
-    top: 1px;
-    /* font-size: 13px; */
-    color:#777777;
-    pointer-events: none;
-    white-space: nowrap;
-
-    font-family: "Virtue";
-    letter-spacing: 0.35px;
-}
-
-.WindowFrame.Focused .TitleBar .Lable {
-    color:#000000;
-}
-
-
-.WindowFrame .TitleBar .Button {
-    width: 11px;
-    height: 11px;
-    padding: 0%;
-    position: relative;
-    top: 1px;
-    visibility: hidden;
-    
-    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
-    border: 1px solid #222222;
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
-        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
-        inset 1px 1px 0px rgba(255, 255, 255, 0.5),
-        inset -1px -1px 0px rgba(0, 0, 0, 0.27);
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-}
-
-.WindowFrame.Focused .TitleBar .Button {
-    visibility: visible;
-}
-
-.WindowFrame .TitleBar .Button:active {
-    background-color: rgba(0, 0, 0, 0.4);
-    /* Green */
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
-        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
-}
-
-.Focused .VisualDragArea {
-    pointer-events: none;
-    width: 100%;
-    height: 11px;
-    background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
-    background-size: 2px 2px;
-    filter: drop-shadow(1px 1px 0px #777777);
-}
-
-.MobileContentBorder {
-    width: 100%;
-    height: 100%;
-    background-color: #DDDDDD;
-    /* border: 1px solid #000000; */
-
-    /* box-shadow:   -1px -1px 0px rgba(0, 0, 0, 0.25),
-                1px 1px 0px #FFFFFF,
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
-                inset 1px 1px 0px #FFFFFF; */
-
-    overflow: hidden;
-    overflow-x: hidden;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}
-
-.MobileApplicationWindow {
-    width: 100%;
-    height: 100%;
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-
-.MobileWindowFrameBottomBar {
-    width: 100%;
-    height: 20px;
-    /* 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 5px;
-    padding: 0px; */
-
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 0;
-}
-
-.MobileWindowFrameBottomBarButton {
-    min-width: 11px;
-    width: auto;
-    height: 15px;
-    padding: 0px 4px 0px 4px;
-    position: absolute;
-    right: 4px;
-
-    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
-    border: 1px solid #222222;
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
-        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
-        inset 1px 1px 0px rgba(255, 255, 255, 0.5),
-        inset -1px -1px 0px rgba(0, 0, 0, 0.27);
-
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-}
-
-.MobileWindowFrameBottomBar .MobileLable {
-    position: absolute;
-    /* top:1px; */
-    /* font-size: 13px; */
-    left: 50%;
-    pointer-events: none;
-    white-space: nowrap;
-
-    font-family: "Virtue";
-    letter-spacing: 0.35px;
-
-}

front/src/src/apps/wde/primitives.less

@@ -1,3 +0,0 @@
-.WdePrimitives.AdjectiveElement {
-    border: 1px solid #555555;
-}

front/src/src/apps/wde/scrollbar/scrollbar.js

@@ -1,54 +0,0 @@
-export default class WdeScrollBar{
-    /**
-    * @param {HTMLElement} scrollBarContainer
-    * @param {HTMLElement} content
-    */
-    constructor(scrollBarContainer, content){
-        let nonNativeScroll = false
-        // console.log(scrollBarContainer, content)
-        // let handler = scrollBarContainer.children[0]
-        //TODO On scroll move focus on window?
-        let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
-        // console.log(handler)
-    
-        handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
-    
-        let max = handler.parentElement.clientHeight - handler.clientHeight
-        let yPosInit = 0
-    
-        handler.addEventListener('mousedown', (event) => {
-            nonNativeScroll = true
-            yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
-
-            document.addEventListener('mousemove', drag);
-            document.addEventListener('mouseup', stop)
-        })
-
-        content.addEventListener('scroll', (event) =>{
-            if (!this.nonNativeScroll){
-                let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
-                let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
-                handler.style.top = content.scrollTop/coefficient + 'px'
-            }
-        })
-
-        function drag() {
-            // console.log(event.clientY - yPosInit,  Number(handler.style.top.replace('px','' )))
-            let pos = event.clientY - yPosInit
-            let clampPos = Math.min(Math.max(pos, 0), max)
-            handler.style.top = clampPos + "px";
-
-            let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
-            let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
-            // console.log(clampPos, coefficient, content.clientHeight, clampPos* coefficient)
-
-            content.scrollTop = clampPos* coefficient
-        }
-        function stop() {
-            // console.log("stop")
-            document.removeEventListener('mousemove', drag);
-            document.removeEventListener('mouseup', stop)
-            nonNativeScroll = false
-        }
-    }
-}

front/src/src/apps/wde/sunboard/sunboard-mobile.js

@@ -1,50 +0,0 @@
-import MobileWebDesktopEnvironment from "../wde-mobile.js"
-
-export default class MobileDesktop{
-    /**@type {Element} */
-    #icons
-    /** @type {MobileWebDesktopEnvironment} */
-    #wde
-    constructor(wde){
-        this.#wde = wde
-        this.load()
-    }
-    
-    async load(){
-        let view = this.#createDesktopView()
-    }
-    
-    async #createDesktopView(){
-        let view = await this.#wde.Decorat.CreateNewView("Sunboard") //FIXME
-
-        const params = new URLSearchParams({
-            // path: args[0] //FIXME
-            path: "/" //FIXME
-        })
-        const response = await fetch(`/app/Sunboard/render?` + params,
-        {
-            method: "POST",
-            // body: JSON.stringify(runContext)
-        })
-        if (response.status != 200){
-            console.log(response.status)
-            return
-        }
-        const html = await response.text()
-        view.innerHTML = html
-
-        let iconsList = view.querySelectorAll(".app-icon")
-        iconsList.forEach(element => {
-            let appId = element.getAttribute('appId')
-            element.addEventListener('click', () => {
-                // console.log(appId)
-                // this.#wde.Decorat.CreateNewView(appId)
-                this.#wde.Open("/Applications/Finder.app", [""], "")
-            })
-        });      
-    }
-
-    async createFileView(){
-        
-    }
-}

front/src/src/apps/wde/sunboard/sunboard-mobile.less

@@ -1,61 +0,0 @@
-@import "../../theme.less";
-@import "../primitives.less";
-
-#mobile-sunboard{
-    width: 100%;
-    height: 100%;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-#icons{
-    width: 100%;
-    height: 100%;
-    background-color: @col-ceil;
-}
-
-// #down-bar{
-//     &:extend(.WdePrimitives.AdjectiveElement);
-//     width: 100%;
-//     height: 150px;
-//     background-color: @col-argent;
-// }
-
-.apps-list{
-    /* Auto layout */
-    display: flex;
-    padding: 64px 32px;
-    align-items: flex-start;
-    align-content: flex-start;
-    gap: 103px 18px;
-    flex: 1 0 0;
-    align-self: stretch;
-    flex-wrap: wrap;
-}
-
-.app-icon{
-    width: 100px;
-    height: 100px;
-
-     /* Auto layout */
-    display: flex;
-    padding: 4px 8px;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-}
-
-.app-icon .icon{
-    width: 64px;
-    height: 64px;
-    background-color: beige;
-}
-
-.app-icon .lable{
-
-}
-

front/src/src/apps/wde/wde-desktop.js

@@ -1,173 +0,0 @@
-import DesktopDecorat from "./decorat/desktop-decorat.js";
-import WDEScrollBar from "./scrollbar/scrollbar.js";
-import WebFS from "../web-fs/web-fs.js";
-import WDEApplication from "./application.js";
-import WDEFileView from "./widgets/file-view/file-view.js";
-import AbstractWebDesktopEnvironment from "./wde.js";
-
-// import DesktopSunBoard from "./sunboard/sunboard-desktop.js";
-export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment{
-    /** @type {string} */
-    test = ""
-    /** @type {WDEFileView} */
-    FileView = WDEFileView
-    /** @type {WDEScrollBar} */
-    ScrollBar = WDEScrollBar
-    /**@type {DesktopDecorat} */
-    Decorat
-    /** @type {Object<string, WDEApplication>} */
-    static Applications = {};
-    /** Deprecated */
-    static isMobile = false
-    // static decorat
-    static webFs
-    
-    constructor(){
-        super()
-        super._SetWDE(this)
-        document.body.style.setProperty('--zoom', 1)
-        this.Decorat = new DesktopDecorat()
-
-        WebDesktopEnvironment.webFs = new WebFS()
-        this.FileView = WDEFileView
-        this.loadWDE()
-        // this.#devLoadSunboard()
-    }
-
-    async loadWDE(){
-        let autoStart = document.body.querySelector("wde-autostart")
-        if (autoStart == null){
-            WebDesktopEnvironment.Alert("Error in loading DE")
-            return
-        }
-        for (const child of autoStart.children) {
-            if (child.nodeName != "APP") continue
-            let appPath = child.getAttribute("app-path")
-            if (appPath == null) continue
-
-            let args = []
-            let argsRaw = child.querySelector("args")
-            if (argsRaw == null) continue
-
-            for (const argRaw of argsRaw.children) {
-                let arg = argRaw.getAttribute("string")
-                if (arg == null) continue
-                args.push(arg)
-            }
-            
-            // console.log(appPath, args)
-            await this.Open(appPath, args)
-        }
-        autoStart.remove()
-    }
-
-    /**
-    * @param {string} appPath
-    * @param {string[]} args
-    * @param {string} runPath
-    */
-    async Open(appPath, args, runPath){
-        const runContext = {
-            isMobile: false,
-            bundlePath: appPath,
-            runPath: runPath
-        }
-
-        super._Open(appPath, args, runPath, (appManifest) =>{
-            super._GetApp(appManifest.appId).NewWindow(args, runContext)
-        })
-    }
-    
-    /**
-    * @param {string} appManifest
-    * @param {function} onload callback after script loading
-    */
-    static async load2(appManifest, onload){
-        // import(window.location.origin + appManifest.js[0]).then((app) => {
-        // console.log(window.location.origin + appManifest.js[0] == 'http://localhost:8080/res/dev-fs/wde/dist/finder.js')
-        // let kek = 'http://localhost:8080/res/dev-fs/wde/dist/finder.js'
-        import('http://localhost:8080/res/dev-fs/dist/finder.js').then((app) => {
-            let newApp = new app.default()
-            // if newApp //TODO Validate
-            WebDesktopEnvironment.Applications[appManifest.appId] = newApp;
-            onload()
-        })
-
-        return //TODO return result
-    }
-
-    /**
-    * @param {string} path
-    * @returns {Object | undefined} //FIXME
-    */
-    static async fetchApp(path){
-        // console.log("path: " + path )
-        const params = new URLSearchParams({path: path, mode: "json"})
-        const response = await fetch(`/system/loadApp?` + params)
-        if (response.status != 200){
-            const error = await response.json()
-            WebDesktopEnvironment.Alert(error.message)
-            return undefined
-        }
-        //TODO Validate manifest
-        const appManifest = response.json()
-        return appManifest
-    }
-
-   
-
-
-    /**
-    * @param {string} html
-    */
-    static SetBasicWindow(html){
-        this.basicWindow = html
-    }
-
-    /**
-    * @returns {string}
-    */
-    static GetBasicWindow(){
-        return this.basicWindow
-    }
-
-    /**
-    * @param {string} alertText
-    */
-    static Alert(alertText){
-        WebDesktopEnvironment.CreateAlertWindow(alertText)
-        console.log(alertText)
-    }
-
-    /**
-    * @param {string} alertText
-    */
-    static CreateAlertWindow(alertText){
-        let newWindow = document.createElement("div")
-        newWindow.setAttribute("class", "WindowFrameless")
-        newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:
-        newWindow.style.cssText = "position:absolute;width:450px;height:116px; margin-left: -225px; margin-top:-58px;left: 50%;top: 50%;background-color:#FFFFFF;border: 1px solid #000000;box-shadow: 2px 2px 0px #000000;"
-        
-        let alertImage = document.createElement("img")
-        alertImage.setAttribute("src", "/res/sys/wde/icons/ohno.png")
-        alertImage.style.cssText = "position:absolute; width:64px;height:64px;top:15px;left:25px"
-        newWindow.appendChild(alertImage)
-
-        let errorText = document.createElement("div")
-        errorText.style.cssText = "position:absolute; width: 300px; left:128px; top:30px;font-family: 'Virtue';"
-        errorText.innerHTML = alertText
-        newWindow.appendChild(errorText)
-
-        let closeButton = document.createElement("button")
-        closeButton.style.cssText = "position:absolute; left: 382px; bottom: 10px; background-color:#FFFFFF; width: 55px; height:18px; font-family: 'Virtue'; border-radius:4px;border: 1px solid #000000;"
-        closeButton.innerHTML = "Close"
-        closeButton.addEventListener('click', () => { newWindow.remove()})
-        newWindow.appendChild(closeButton)
-
-        document.body.querySelector('#windows-layer').appendChild(newWindow)
-    }
-    
-    
-    
-}
-

front/src/src/apps/wde/wde-mobile.js

@@ -1,52 +0,0 @@
-import MobileDecorat from "./decorat/mobile-decorat.js"
-import MobileSunboard from "./sunboard/sunboard-mobile.js"
-import AbstractWebDesktopEnvironment from "./wde.js"
-import WDEFileView from "./widgets/file-view/file-view.js"
-export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvironment{
-    /** @type {MobileDecorat} */
-    Decorat
-    /** @type {WDEFileView} */
-    FileView
-    /** @type {MobileSunboard} */
-    #sunBoard
-    constructor(){
-        super()
-        super._SetWDE(this)
-        document.body.style.setProperty('--zoom', 3)
-        this.Decorat = new MobileDecorat()
-        this.FileView = WDEFileView
-        this.#sunBoard = new MobileSunboard(this)
-        // this.loadWDE()
-        
-    }
-
-    loadWDE(){
-        this.#initControlsBar()
-    }
-
-    /**
-    * @param {string} appPath
-    * @param {string[]} args
-    * @param {string} runPath
-    */
-    async Open(appPath, args, runPath){
-        const runContext = {
-            isMobile: true,
-            bundlePath: appPath,
-            runPath: runPath
-        }
-        
-        super._Open(appPath, args, runPath, (appManifest) =>{
-            super._GetApp(appManifest.appId).NewView(args, runContext)
-        }, this)
-
-    }
-
-    #initControlsBar(){
-        let barNode = document.body.querySelector("#controls-bar")//TODO Validate
-
-        barNode.querySelector("#back").addEventListener('click', () => {
-                this.Decorat.BackAction()
-        })
-    }
-}

front/src/src/apps/wde/wde.js

@@ -1,94 +0,0 @@
-import WDEApplication from "./application.js"
-
-export default class AbstractWebDesktopEnvironment{
-    /** @type {Object<string, WDEApplication>} */
-    _applications = {}
-    /** @type {AbstractWebDesktopEnvironment} */
-    #wde
-
-    /** @type {AbstractWebDesktopEnvironment} */
-    _SetWDE(wde){
-        this.#wde = wde
-    }
-    
-    /**
-    * @param {string} path
-    * @returns {Object | undefined} //FIXME
-    */
-    async _FetchAppManifest(path){
-        // console.log("path: " + path )
-        const params = new URLSearchParams({path: path, mode: "json"})
-        const response = await fetch(`/system/loadApp?` + params)
-        if (response.status != 200){
-            const error = await response.json()
-            // WebDesktopEnvironment.Alert(error.message) //FIXME
-            return undefined
-        }
-        //TODO Validate manifest
-        const appManifest = response.json()
-        return appManifest
-    }
-
-    /**
-    * @param {string} appPath
-    * @param {runContext} runContext
-    * @param {string} runPath
-    * @param {function} callback
-    */
-    async _Open(appPath, runContext, runPath, callback){
-        const appManifest = await this._FetchAppManifest(appPath)
-        
-        if (appManifest === undefined) return //TODO return err
-        
-        if (this._applications[appManifest.appId] === undefined){
-            this.#loadApp(appManifest, () => {
-                callback(appManifest)
-            })
-        } else {
-            callback(appManifest)
-        }
-    }
-
-    /**
-    * @param {*} appManifest
-    * @param {function} onload callback after script loading
-    */
-    async #loadApp(appManifest, onload){
-        let newApp
-        await import(/* webpackMode: "eager" */ `${window.location.origin}/res/dev-fs/dist/finder.js`).then((app) => {newApp = app})
-        // let newApp
-        // switch (appManifest.appId) { //FIXME Can't dynamicly load es6 modules withou static pathes
-        //     case 'Finder':
-                      
-        //         break;
-        // }
-        let newAppClass = new newApp.default(this.#wde)
-        this._applications[appManifest.appId] = newAppClass
-        onload()
-        return //TODO return result
-    }
-
-    _GetApp(appId){
-        // console.log(appId)
-        return this._applications[appId]
-    }
-
-    _fetchComp(res) {
-        import(`${window.location.origin}${res}`).then(() => {
-          console.log("Loaded")
-        }, (err)=>{
-          console.log("Error", err)
-        })
-      }
-}
-
-/**
- * @typedef {Object} runContext
- * @property {boolean} isMobile
- * @property {string} appPath 
- * @property {string} runPath //TODO
-*/
-
-/** //TODO
- * @typedef {Object} appManifest
- */

front/src/src/apps/wde/widgets/basic-widgets.less

@@ -1,60 +0,0 @@
-.ContentBorder { /*TODO Delete, deprecated*/
-    width: 100%;
-    height: 100%;
-    /* background-color: #DDDDDD;
-    border: 1px solid #000000; */
-    
-    overflow: hidden;
-    overflow-x: hidden;
-}
-
-.ContextMenu {
-    position: absolute;
-    width: auto;
-    height: auto;
-
-    background-color: #DDDDDD;
-
-    border: 1px solid #000000;
-}
-
-.ContextMenu .Content{
-    position: relative;
-    width: auto;
-    height: auto;
-    
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    /* padding: 4px;
-    padding-top: 2px;
-    padding-right: 6px;
-    gap: 4px; */
-}
-
-.ContextMenu .Row {
-    width: 100%;
-    height: 16px;
-
-}
-
-.ContextMenu .SectionBreaker {
-    
-    /* background-color: rebeccapurple; */
-
-}
-
-.ContextMenu .Row:hover{
-    background-color: #333399;
-    color: #FFFFFF;
-}
-
-.ContextMenu .Row .Lable{
-    margin-left: 20px;
-    margin-right: 12px;
-    font-family: "Virtue";
-    
-    white-space: nowrap;
-}

front/src/src/apps/wde/widgets/file-view/file-view.js

@@ -1,134 +0,0 @@
-
-
-export default class WDEFileView{
-    path = ""
-    parentElem = undefined
-    selected = []
-    /**
-    * @param {HTMLElement} fileViewElem
-    * @param {Function} doubleClickCallback
-    * @param {Function} rightClickCallback
-    * @param {Function} updateFileViewCallback
-    */
-    constructor(fileViewElem, doubleClickCallback, rightClickCallback, fileUploadCallback, updateFileViewCallback){
-        //TODO check all params
-        this.parentElem = fileViewElem
-
-        fileViewElem.addEventListener('click', (event) => {
-            if (event.target.classList[0] == 'FileTileView')
-            {   
-                this.DeselectAll()
-                return
-            }
-            if (event.detail === 1){
-                this.DeselectAll()
-                this.Select([event.target])
-            } else if (event.detail === 2) {
-                doubleClickCallback(event)
-            }
-        })
-
-        fileViewElem.addEventListener('contextmenu', (event) => {
-            event.preventDefault();
-            if (event.target.classList.contains("Tile")){
-                this.DeselectAll()
-                this.Select([event.target])
-            }
-            this.Select([event.target])
-            rightClickCallback(event)
-        })
-
-        if (fileUploadCallback !== undefined) {
-            let counter = 0
-            let draggedElem = undefined
-            
-            fileViewElem.addEventListener('dragstart', (event) => {
-                // console.log(event.target)
-                // console.log(this.path)
-                //  draggedElem = event.target
-                event.dataTransfer.setData("fileName", event.target.getAttribute("name"))
-                event.dataTransfer.setData("filePath", this.path + "/" + event.target.getAttribute("name"))
-                event.dataTransfer.setData("dropType", "move")
-                // console.log(updateFileViewCallback)
-                // event.dataTransfer.setData("updateCallback", updateFileViewCallback)
-                // event.dataTransfer.setData("fileName", )
-                // console.log(draggedElem)
-            })
-
-            fileViewElem.addEventListener('dragenter', function(event) {
-                event.preventDefault();
-                counter++
-                fileViewElem.classList.add("DragDropBorder")
-            })
-            
-            fileViewElem.addEventListener('dragend', function(event) {
-                // console.log(fileViewElem)
-                event.preventDefault();
-                counter--
-                if (counter === 0){
-                    fileViewElem.classList.remove("DragDropBorder")
-                }
-                // updateFileViewCallback()
-                // draggedElem = undefined
-            })
-            
-            fileViewElem.addEventListener('dragleave', function(event) {
-                // console.log(fileViewElem)
-                event.preventDefault();
-                counter--
-                if (counter === 0){
-                    fileViewElem.classList.remove("DragDropBorder")
-                }
-                // draggedElem = undefined
-            })
-
-            fileViewElem.addEventListener('dragover', function(event) {
-                event.preventDefault();
-            })
-
-            fileViewElem.addEventListener("drop", (event) => {
-                event.preventDefault();
-                fileUploadCallback(event)
-                fileViewElem.classList.remove("DragDropBorder")
-                // updateFileViewCallback()
-                // this.OpenFolder(this.path)
-                // draggedElem = undefined
-            })
-        }
-    }
-
-    /** 
-    * @param {[]Element} elements
-    */
-    Select(elements){
-        elements.forEach(element => {
-            this.selected.push(element)
-            element.classList.add("Selected")
-        });
-    }
-
-    DeselectAll(){
-        this.selected.forEach(element => {
-            element.classList.remove("Selected")    
-        });
-        this.selected = []
-    }
-
-    /** Get html of folder by path
-    * @param {string} path
-    */
-    async OpenFolder(path){
-        this.path = path
-        const params = new URLSearchParams({
-            path: path
-        })
-        const response = await fetch(`/system/wde/widgets/file-tile-view?` + params)
-        if (response.status != 200){
-            //TODO Error text message
-            WebDesktopEnvironment.Alert("TODO") 
-            return
-        }
-        let html = await response.text()
-        this.parentElem.innerHTML = html
-    }
-}

front/src/src/apps/wde/widgets/file-view/file-view.less

@@ -1,86 +0,0 @@
-.FileTileView{
-    width: 100%;
-    height: 100%;
-
-    
-    
-    /* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */
-}
-
-.FileTileView.DragDropBorder{
-    box-shadow: inset 0px 0px 0px 4px #9999CC;
-    /* background-color: blue; */
-}
-
-.FileTileView .FlexContainer{
-    width: 100%;
-    height: auto;
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 50px;
-    row-gap: 20px;
-    /* padding: 15px; Shit fix TODO: */
-    margin: 15px;
-    flex-wrap: wrap;
-    align-content: flex-start;
-
-    /* overflow: scroll; */
-    /* overflow-x: hidden; */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-}
-
-.FileTileView::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}
-
-.FileTileView .Tile{
-    width: 50px; 
-    height: 50px; 
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 2px;
-    padding: 0px;
-    flex-wrap: nowrap;
-}
-
-.FileTileView .Selected{
-    /* inherits: ; */
-    /* background-color: black; */
-}
-
-.FileTileView .Icon{
-    width: 32px; 
-    height: 32px; 
-    /* background-image: url("./icons/folder.png"); */
-    background-size: cover;
-
-    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
-    image-rendering: -moz-crisp-edges;          /* Firefox                        */
-    image-rendering: -o-crisp-edges;            /* Opera                          */
-    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
-    image-rendering: pixelated;                 /* Universal support since 2021   */
-    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
-    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
-}
-
-.FileTileView .Selected .Icon{
-    filter: brightness(0.4);
-}
-
-.FileTileView .Lable{
-    white-space: nowrap;
-}
-
-.FileTileView .Selected .Lable{
-    white-space: nowrap;
-    color: white;
-    background-color: black;
-}

front/src/src/apps/web-fs/web-fs.js

@@ -1,131 +0,0 @@
-export default class WebFS{
-     /**
-    * @param {string} path
-    * @returns {boolean}
-    */
-     static async CreateDirectory(path){
-        if (path == undefined){
-            WebDesktopEnvironment.Alert("Path is undefined")
-            return false
-        }
-        const params = new URLSearchParams({
-            path: `${path}/New Directory`
-        })
-        const response = await fetch(`/system/fs/createDir?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("DIRCTORY CREATION ERROR") //TODO
-            return false
-        }
-        return true
-    }
-
-    /**
-    * @param {string} path
-    * @returns {boolean}
-    */
-    static async DeleteFile(path){
-        const params = new URLSearchParams({
-            path: path
-        })
-        const response = await fetch(`/system/fs/delete?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("DELETE ERROR") //TODO
-            return false
-        }
-        return true
-    }
-
-    /**
-    * @param {string} path
-    * @returns {boolean}
-    */
-    static async MoveFile(sourcePath, targetPath){
-        const params = new URLSearchParams({
-            sourcePath: sourcePath,
-            targetPath: targetPath
-        })
-        const response = await fetch(`/system/fs/move?` + params)
-        if (response.status != 200){
-            // WebDesktopEnvironment.Alert("Move ERROR") //TODO
-            return false
-        }
-        return true
-    }
-
-    /**
-    * @param {string} linkPath
-    * @returns {string}
-    */
-    static async ReadObjectLink(linkPath){
-        const params = new URLSearchParams({
-            linkPath: linkPath,
-        })
-        const response = await fetch(`/system/fs/readObjectLink?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("TODO") //TODO
-            return ""
-        }
-        const path = await response.text()
-        //TODO Validate
-        return path 
-    }
-
-    /**
-    * @param {string} sourcePath
-    * @param {string} linkPath
-    * @returns {string}
-    */
-    static async CreatePathLink(sourcePath, linkPath){
-        const params = new URLSearchParams({
-            sourcePath: sourcePath,
-            linkPath: linkPath,
-        })
-        const response = await fetch(`/system/fs/createPathLink?` + params)
-        return response.status == 200
-    }
-
-    /**
-    * @param {string} linkPath
-    * @returns {string}
-    */
-    static async ReadPathLink(linkPath){
-        const params = new URLSearchParams({
-            linkPath: linkPath,
-        })
-        const response = await fetch(`/system/fs/readPathLink?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("TODO") //TODO
-            return ""
-        }
-        // console.log(response)
-        const file = await response.json()
-        //TODO Validate
-        return file
-    }
-
-    /**
-    * @param {File} file
-    * @param {string} parentPath
-    * @returns {boolean}
-    */
-    static async UploadFile(file, parentPath){
-        console.log('here')
-        let formData = new FormData()
-        formData.append("file", file) //FIXME Conn reset
-        const params = new URLSearchParams({
-            parentPath: parentPath,
-        })
-        const response = await fetch(`/system/fs/upload?` + params,
-        {
-            method: "POST",  //TODO Change to PUT?
-            body: formData
-        })
-        console.log(response.status)
-        if (response.status != 201){
-            const error = await response.json()
-            WebDesktopEnvironment.Alert(error.message) 
-            return false
-        }
-        return true
-    }
-}

front/src/src/desktop.less

@@ -1,79 +0,0 @@
-@import "./wde/primitives.less";
-@import "./wde/widgets/file-view/file-view.less";
-@import "./wde/legacy-ui.less";
-@import "./wde/widgets/basic-widgets.less";
-@import "./theme.less";
-
-// @font-face{
-//     font-family: "Virtue";
-//     src:url("/res/dev-fs/fonts/virtue.ttf");
-// }
-
-/* @font-face{
-    font-family: "Virtue";
-    src:url("/res/dev-fs/fonts/virtue.ttf")
-} */
-
-/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
-    html {
-      zoom: 3
-    }
-  } */
-
-.NoClick {
-    pointer-events: none;
-}
-.Click {
-    pointer-events: all;
-}
-*{
-    font-family: Verdana, Geneva, sans-serif;
-    font-size: 11px;
-    font-style: normal;
-    font-weight:initial;
-}
-
-*::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}
-
-body{
-    zoom: var(--zoom);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-
-    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-    touch-action: manipulation;
-}
-
-#applications{
-    position: static;
-    width: 0px;
-    height: 0px;
-    visibility: hidden;
-}
-
-#windows-layer {
-    width: 0px;
-    height: 0px;
-    /* position: fixed; */
-    position: static;
-}
-
-#desktop-layer{
-    position: fixed;
-    /* margin: 0px; */
-    width: 100%;
-    height: 100%;
-    background-color: @col-ceil;
-}

front/src/src/init.mjs

@@ -1,3 +0,0 @@
-export default class Kek{
-    
-}

front/src/src/mobile.less

@@ -1,54 +0,0 @@
-@import "./wde/sunboard/sunboard-mobile.less";
-
-body{
-    zoom: 2;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-
-    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-    touch-action: manipulation;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-#mobile-app-views{
-    width: 100%;
-    height: 100%;
-    // padding: 64px;
-    // border-radius: 50px;
-    // overflow:hidden
-    // background-color: @col-ceil;
-}
-
-#controls-bar{
-    &:extend(.WdePrimitives.AdjectiveElement);
-    width: 100%;
-    height: 150px;
-    background-color: @col-argent;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.mobile-app-view{
-    // background-color: burlywood;
-    width: 100%;
-    height: 100%;
-    // position: absolute;
-}

front/src/src/theme.less

@@ -1,2 +0,0 @@
-@col-ceil: #9999CC;
-@col-argent: #C0C0C0;

front/src/src/wde/application.js

@@ -1,32 +0,0 @@
-import AbstractWebDesktopEnvironment from "./wde.js"
-
-export default class WDEApplication{
-    /** @type {AbstractWebDesktopEnvironment} */
-    #wde
-    /** @type {string} */
-    AppId
-
-    /**
-     * @constructor
-     * @param {AbstractWebDesktopEnvironment} wde 
-     */
-    constructor(wde, AppId){
-        this.#wde = wde
-        // console.log(wde)
-        this.AppId = AppId
-    }
-
-    /** @returns {AbstractWebDesktopEnvironment} */
-    WDE(){
-        return this.#wde
-    }
-
-    async NewWindow(){
-        
-    }
-
-    /** @returns {Element} */
-    async NewView(){
-        return this.#wde.Decorat.CreateNewView(this.AppId)
-    }
-}

front/src/src/wde/decorat/desktop-decorat.js

@@ -1,104 +0,0 @@
-export default class DesktopDecorat{
-    /** @type {Element} */
-    #windowsLayer
-
-    constructor(){
-        this.windowLayer = document.body.querySelector('#windows-layer')
-        // this.#windowsLayer = document.body.querySelector('#windows-layer')
-        this.#windowsLayer = document.body.querySelector('#windows-layer')
-        let startDrag = (event) => {
-            let window = event.target.closest('.WindowFrame')
-            this.bringWindowToFront(window)
-            if (event.target.classList.contains("DragArea")){
-                let xPosInit = event.offsetX
-                let yPosInit = event.offsetY
-                let dragWindow = function(event){
-                    window.style.left = `${event.clientX - xPosInit}px`
-                    window.style.top = `${event.clientY - yPosInit}px`
-                }
-                let stopDrag = function(){
-                    removeEventListener('mousemove', dragWindow)
-                    removeEventListener('mouseup', stopDrag)
-                }
-
-                addEventListener('mousemove', dragWindow)
-                addEventListener('mouseup', stopDrag)
-            }
-        }
-        this.#windowsLayer.addEventListener('mousedown', startDrag)
-    }
-    
-    
-    /**
-     * @param {HTMLElement} window
-    */
-    bringWindowToFront(window){ //FIXME
-        let previousWindow = this.#windowsLayer.lastChild
-        if (window == null || window == undefined){
-            return
-        }
-        if (window != previousWindow){
-            this.#windowsLayer.insertBefore(window, previousWindow.nextSibling)
-            previousWindow.classList.remove("Focused")
-            window.classList.add("Focused")
-        } else {
-            window.classList.add("Focused")
-        }
-        return
-    }
-
-     /**
-    * @param {string} appId
-    * @param {number} width
-    * @param {number} height
-    * @returns {HTMLElement}
-    */
-    CreateNewWindow(appId, width, height) {    
-        let newWindow = document.createElement("div")
-        newWindow.setAttribute('appid', appId)
-
-        newWindow.setAttribute("class", "WindowFrame ConvexElement")
-        newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
-
-        newWindow.style.width = width.toString() + "px"
-        newWindow.style.height = height.toString() + "px"
-
-        document.body.querySelector('#windows-layer').appendChild(newWindow)
-        return newWindow
-        
-    }
-
-    /**
-    * @param {HTMLElement} window
-    */
-    CloseWindow(window) {
-        window.remove()
-    }
-
-    CloseFocusedWindow() {
-        if (document.body.querySelector('#windows-layer').childElementCount > 1){
-            document.body.querySelector('#windows-layer').lastElementChild.remove()
-        }
-    }
-
-
-    static ChangeURL(appWindow){
-        let appId = appWindow.getAttribute('appid')
-        window.history.replaceState(null, "", `/${appId}/`);
-    }
-
-    /**
-    * @param {num} length
-    */
-    #makeid(length) {
-        let result = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        let counter = 0;
-        while (counter < length) {
-          result += characters.charAt(Math.floor(Math.random() * charactersLength));
-          counter += 1;
-        }
-        return result;
-    }
-}

front/src/src/wde/decorat/mobile-decorat.js

@@ -1,27 +0,0 @@
-export default class MobileDecorat {
-    /** @type {Element} */
-    #applicationsNode
-    constructor(){
-        this.#applicationsNode = document.body.querySelector("#mobile-app-views") //TODO validate
-    }
-
-    /**
-     * @param {string} appId
-     * @returns {Element}
-     */
-    CreateNewView(appId){
-        let newView = document.createElement("div")
-        newView.setAttribute("class", "mobile-app-view")
-        newView.setAttribute("appId", appId)
-        this.#applicationsNode.appendChild(newView)
-        return newView
-    }
-    Open(){
-        
-    }
-    BackAction(){
-        // console.log(this.#applicationsNode.childNodes.length)
-        if (this.#applicationsNode.childNodes.length <= 1) return
-        this.#applicationsNode.lastChild.remove()
-    }
-}

front/src/src/wde/legacy-ui.less

@@ -1,232 +0,0 @@
-.WindowFrame {
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 4px;
-    padding-top: 2px;
-    padding-right: 6px;
-    gap: 4px;
-
-    position: absolute;
-
-    background: #DDDDDD;
-    border: 1px solid #555555;
-    
-
-    /* Inside auto layout */
-    flex: none;
-    order: 1;
-    align-self: stretch;
-    flex-grow: 1;
-}
-
-/* TODO Add shadows to windows */
-.WindowFrame.Focused{
-    border: 1px solid #000000;
-    background-color: #CCCCCC;
-}
-
-.WindowFrameShadow {
-    box-shadow: 2px 2px 0px #555555;
-}
-
-/* FIXME Not work on context menu  */
-.WindowFrameShadow.Focused  { 
-    box-shadow: 2px 2px 0px #000000;
-}
-
-.ConvexElement.Focused  {
-    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
-                inset 1px 1px 0px #FFFFFF;
-}
-
-.AdjectiveElement {
-    border: 1px solid #555555;
-}
-
-.Focused .AdjectiveElement  {
-    border: 1px solid #000000;
-    box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
-                1px 1px 0px #FFFFFF;
-                /* inset -1px -1px 0px rgba(0, 0, 0, 0.27), */
-                /* inset 1px 1px 0px #FFFFFF;*/
-}
-
-.AdjectiveHorizontalLine {
-    border-top: 1px solid rgba(0, 0, 0, 0.25);
-    border-bottom: 1px solid #FFFFFF;
-    width: 100%;
-    height: 0px;
-}
-
-.AdjectiveHorizontalLine:last-child {
-    height: 0%;
-    visibility: hidden;
-}
-
-
-.WindowFrame .TitleBar {
-    width: 100%;
-    height: 13px;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    padding: 0px;
-
-
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 0;
-}
-
-.WindowFrame .TitleBar .Lable {
-    position: relative;
-    top: 1px;
-    /* font-size: 13px; */
-    color:#777777;
-    pointer-events: none;
-    white-space: nowrap;
-
-    font-family: "Virtue";
-    letter-spacing: 0.35px;
-}
-
-.WindowFrame.Focused .TitleBar .Lable {
-    color:#000000;
-}
-
-
-.WindowFrame .TitleBar .Button {
-    width: 11px;
-    height: 11px;
-    padding: 0%;
-    position: relative;
-    top: 1px;
-    visibility: hidden;
-    
-    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
-    border: 1px solid #222222;
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
-        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
-        inset 1px 1px 0px rgba(255, 255, 255, 0.5),
-        inset -1px -1px 0px rgba(0, 0, 0, 0.27);
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-}
-
-.WindowFrame.Focused .TitleBar .Button {
-    visibility: visible;
-}
-
-.WindowFrame .TitleBar .Button:active {
-    background-color: rgba(0, 0, 0, 0.4);
-    /* Green */
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
-        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
-}
-
-.Focused .VisualDragArea {
-    pointer-events: none;
-    width: 100%;
-    height: 11px;
-    background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
-    background-size: 2px 2px;
-    filter: drop-shadow(1px 1px 0px #777777);
-}
-
-.MobileContentBorder {
-    width: 100%;
-    height: 100%;
-    background-color: #DDDDDD;
-    /* border: 1px solid #000000; */
-
-    /* box-shadow:   -1px -1px 0px rgba(0, 0, 0, 0.25),
-                1px 1px 0px #FFFFFF,
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
-                inset 1px 1px 0px #FFFFFF; */
-
-    overflow: hidden;
-    overflow-x: hidden;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}
-
-.MobileApplicationWindow {
-    width: 100%;
-    height: 100%;
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-
-.MobileWindowFrameBottomBar {
-    width: 100%;
-    height: 20px;
-    /* 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 5px;
-    padding: 0px; */
-
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 0;
-}
-
-.MobileWindowFrameBottomBarButton {
-    min-width: 11px;
-    width: auto;
-    height: 15px;
-    padding: 0px 4px 0px 4px;
-    position: absolute;
-    right: 4px;
-
-    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
-    border: 1px solid #222222;
-    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
-        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
-        inset 1px 1px 0px rgba(255, 255, 255, 0.5),
-        inset -1px -1px 0px rgba(0, 0, 0, 0.27);
-
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-}
-
-.MobileWindowFrameBottomBar .MobileLable {
-    position: absolute;
-    /* top:1px; */
-    /* font-size: 13px; */
-    left: 50%;
-    pointer-events: none;
-    white-space: nowrap;
-
-    font-family: "Virtue";
-    letter-spacing: 0.35px;
-
-}

front/src/src/wde/primitives.less

@@ -1,3 +0,0 @@
-.WdePrimitives.AdjectiveElement {
-    border: 1px solid #555555;
-}

front/src/src/wde/scrollbar/scrollbar.js

@@ -1,54 +0,0 @@
-export default class WdeScrollBar{
-    /**
-    * @param {HTMLElement} scrollBarContainer
-    * @param {HTMLElement} content
-    */
-    constructor(scrollBarContainer, content){
-        let nonNativeScroll = false
-        // console.log(scrollBarContainer, content)
-        // let handler = scrollBarContainer.children[0]
-        //TODO On scroll move focus on window?
-        let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
-        // console.log(handler)
-    
-        handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
-    
-        let max = handler.parentElement.clientHeight - handler.clientHeight
-        let yPosInit = 0
-    
-        handler.addEventListener('mousedown', (event) => {
-            nonNativeScroll = true
-            yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
-
-            document.addEventListener('mousemove', drag);
-            document.addEventListener('mouseup', stop)
-        })
-
-        content.addEventListener('scroll', (event) =>{
-            if (!this.nonNativeScroll){
-                let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
-                let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
-                handler.style.top = content.scrollTop/coefficient + 'px'
-            }
-        })
-
-        function drag() {
-            // console.log(event.clientY - yPosInit,  Number(handler.style.top.replace('px','' )))
-            let pos = event.clientY - yPosInit
-            let clampPos = Math.min(Math.max(pos, 0), max)
-            handler.style.top = clampPos + "px";
-
-            let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
-            let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
-            // console.log(clampPos, coefficient, content.clientHeight, clampPos* coefficient)
-
-            content.scrollTop = clampPos* coefficient
-        }
-        function stop() {
-            // console.log("stop")
-            document.removeEventListener('mousemove', drag);
-            document.removeEventListener('mouseup', stop)
-            nonNativeScroll = false
-        }
-    }
-}

front/src/src/wde/scrollbar/wde-scrollbar.css

@@ -1,110 +0,0 @@
-.scroller {
-    overflow-y: scroll;
-    scrollbar-color: #0A4C95 #C2D2E4;
-    border-radius: 0px;
-  }
-
-.scroll_content {
-    position: relative;
-    width: 400px;
-    height: 414px;
-    top: -17px;
-    padding: 20px 10px 20px 10px;
-    overflow-y: auto;
-}
-
-.ScrollbarPlace{
-    overflow: hidden;
-
-    border-left: 1px solid #555555;
-    width: 14px;
-    height: 100%;
-
-    bottom: 0px;
-    right: 0px;
-    width: 14px;
-    height: 100%;
-
-    background-color: #EEEEEE;
-    
-    
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 1;
-}
-
-.Focused .ScrollbarPlace{
-    border-left: 1px solid #000000;
-    background-color: #AAAAAA;
-    box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29),
-                inset -2px 0px 0px rgba(255, 255, 255, 0.19),
-                inset 1px 1px 0px rgba(0, 0, 0, 0.14), 
-                inset 2px 2px 0px rgba(0, 0, 0, 0.19);
-}
-
-.ScrollBarScrollElement{
-    position: relative;
-    visibility: hidden;
-    width: 14px;
-    height: 31px;
-    
-    background: #9999FF;
-    
-    box-shadow: 0px -1px 0px #000000,
-                0px 1px 0px #000000,
-                0px 2px 0px rgba(0, 0, 0, 0.13),
-                0px 3px 0px rgba(0, 0, 0, 0.19),
-                inset 0px 1px 0px rgba(255, 255, 255, 0.5),
-                inset 1px 0px 0px rgba(255, 255, 255, 0.5),
-                inset -1px -1px 0px rgba(102, 102, 204, 0.91);
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    gap: 5px;
-    padding: 0px;
-}
-
-.Focused .ScrollBarScrollElement{
-    visibility: visible;
-}
-
-.ScrollBarScrollElementDrag{
-    pointer-events: none;
-    /* background-color: #0A4C95; */
-    width: 7px;
-    height: 7px;
-    margin-left: -1px;
-
-    background: linear-gradient(transparent 0%,#CCCCFF 0%, #CCCCFF 50%, transparent 50%);
-    background-size: 2px 2px;
-
-    /* TODO white pixels in rows start */
-    filter: drop-shadow(1px 1px 0px #333399);
-}
-
-/* TODO to wde css */
-.ScrollContent {
-    /* width: 100%;
-    height: 100%; */
-    overflow: scroll;
-    overflow-x: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-
-    /* Auto layout */
-    /* display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px; */
-}
-
-.ScrollContent::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}

front/src/src/wde/sunboard/sunboard-mobile.js

@@ -1,50 +0,0 @@
-import MobileWebDesktopEnvironment from "../wde-mobile.js"
-
-export default class MobileDesktop{
-    /**@type {Element} */
-    #icons
-    /** @type {MobileWebDesktopEnvironment} */
-    #wde
-    constructor(wde){
-        this.#wde = wde
-        this.load()
-    }
-    
-    async load(){
-        let view = this.#createDesktopView()
-    }
-    
-    async #createDesktopView(){
-        let view = await this.#wde.Decorat.CreateNewView("Sunboard") //FIXME
-
-        const params = new URLSearchParams({
-            // path: args[0] //FIXME
-            path: "/" //FIXME
-        })
-        const response = await fetch(`/app/Sunboard/render?` + params,
-        {
-            method: "POST",
-            // body: JSON.stringify(runContext)
-        })
-        if (response.status != 200){
-            console.log(response.status)
-            return
-        }
-        const html = await response.text()
-        view.innerHTML = html
-
-        let iconsList = view.querySelectorAll(".app-icon")
-        iconsList.forEach(element => {
-            let appId = element.getAttribute('appId')
-            element.addEventListener('click', () => {
-                // console.log(appId)
-                // this.#wde.Decorat.CreateNewView(appId)
-                this.#wde.Open("/Applications/Finder.app", [""], "")
-            })
-        });      
-    }
-
-    async createFileView(){
-        
-    }
-}

front/src/src/wde/sunboard/sunboard-mobile.less

@@ -1,61 +0,0 @@
-@import "../../theme.less";
-@import "../primitives.less";
-
-#mobile-sunboard{
-    width: 100%;
-    height: 100%;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-#icons{
-    width: 100%;
-    height: 100%;
-    background-color: @col-ceil;
-}
-
-// #down-bar{
-//     &:extend(.WdePrimitives.AdjectiveElement);
-//     width: 100%;
-//     height: 150px;
-//     background-color: @col-argent;
-// }
-
-.apps-list{
-    /* Auto layout */
-    display: flex;
-    padding: 64px 32px;
-    align-items: flex-start;
-    align-content: flex-start;
-    gap: 103px 18px;
-    flex: 1 0 0;
-    align-self: stretch;
-    flex-wrap: wrap;
-}
-
-.app-icon{
-    width: 100px;
-    height: 100px;
-
-     /* Auto layout */
-    display: flex;
-    padding: 4px 8px;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-}
-
-.app-icon .icon{
-    width: 64px;
-    height: 64px;
-    background-color: beige;
-}
-
-.app-icon .lable{
-
-}
-

front/src/src/wde/wde-desktop.js

@@ -1,173 +0,0 @@
-import DesktopDecorat from "./decorat/desktop-decorat.js";
-import WDEScrollBar from "./scrollbar/scrollbar.js";
-import WebFS from "../web-fs/web-fs.js";
-import WDEApplication from "./application.js";
-import WDEFileView from "./widgets/file-view/file-view.js";
-import AbstractWebDesktopEnvironment from "./wde.js";
-
-// import DesktopSunBoard from "./sunboard/sunboard-desktop.js";
-export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment{
-    /** @type {string} */
-    test = ""
-    /** @type {WDEFileView} */
-    FileView = WDEFileView
-    /** @type {WDEScrollBar} */
-    ScrollBar = WDEScrollBar
-    /**@type {DesktopDecorat} */
-    Decorat
-    /** @type {Object<string, WDEApplication>} */
-    static Applications = {};
-    /** Deprecated */
-    static isMobile = false
-    // static decorat
-    static webFs
-    
-    constructor(){
-        super()
-        super._SetWDE(this)
-        document.body.style.setProperty('--zoom', 1)
-        this.Decorat = new DesktopDecorat()
-
-        WebDesktopEnvironment.webFs = new WebFS()
-        this.FileView = WDEFileView
-        this.loadWDE()
-        // this.#devLoadSunboard()
-    }
-
-    async loadWDE(){
-        let autoStart = document.body.querySelector("wde-autostart")
-        if (autoStart == null){
-            WebDesktopEnvironment.Alert("Error in loading DE")
-            return
-        }
-        for (const child of autoStart.children) {
-            if (child.nodeName != "APP") continue
-            let appPath = child.getAttribute("app-path")
-            if (appPath == null) continue
-
-            let args = []
-            let argsRaw = child.querySelector("args")
-            if (argsRaw == null) continue
-
-            for (const argRaw of argsRaw.children) {
-                let arg = argRaw.getAttribute("string")
-                if (arg == null) continue
-                args.push(arg)
-            }
-            
-            // console.log(appPath, args)
-            await this.Open(appPath, args)
-        }
-        autoStart.remove()
-    }
-
-    /**
-    * @param {string} appPath
-    * @param {string[]} args
-    * @param {string} runPath
-    */
-    async Open(appPath, args, runPath){
-        const runContext = {
-            isMobile: false,
-            bundlePath: appPath,
-            runPath: runPath
-        }
-
-        super._Open(appPath, args, runPath, (appManifest) =>{
-            super._GetApp(appManifest.appId).NewWindow(args, runContext)
-        })
-    }
-    
-    /**
-    * @param {string} appManifest
-    * @param {function} onload callback after script loading
-    */
-    static async load2(appManifest, onload){
-        // import(window.location.origin + appManifest.js[0]).then((app) => {
-        // console.log(window.location.origin + appManifest.js[0] == 'http://localhost:8080/res/dev-fs/wde/dist/finder.js')
-        // let kek = 'http://localhost:8080/res/dev-fs/wde/dist/finder.js'
-        import('http://localhost:8080/res/dev-fs/dist/finder.js').then((app) => {
-            let newApp = new app.default()
-            // if newApp //TODO Validate
-            WebDesktopEnvironment.Applications[appManifest.appId] = newApp;
-            onload()
-        })
-
-        return //TODO return result
-    }
-
-    /**
-    * @param {string} path
-    * @returns {Object | undefined} //FIXME
-    */
-    static async fetchApp(path){
-        // console.log("path: " + path )
-        const params = new URLSearchParams({path: path, mode: "json"})
-        const response = await fetch(`/system/loadApp?` + params)
-        if (response.status != 200){
-            const error = await response.json()
-            WebDesktopEnvironment.Alert(error.message)
-            return undefined
-        }
-        //TODO Validate manifest
-        const appManifest = response.json()
-        return appManifest
-    }
-
-   
-
-
-    /**
-    * @param {string} html
-    */
-    static SetBasicWindow(html){
-        this.basicWindow = html
-    }
-
-    /**
-    * @returns {string}
-    */
-    static GetBasicWindow(){
-        return this.basicWindow
-    }
-
-    /**
-    * @param {string} alertText
-    */
-    static Alert(alertText){
-        WebDesktopEnvironment.CreateAlertWindow(alertText)
-        console.log(alertText)
-    }
-
-    /**
-    * @param {string} alertText
-    */
-    static CreateAlertWindow(alertText){
-        let newWindow = document.createElement("div")
-        newWindow.setAttribute("class", "WindowFrameless")
-        newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:
-        newWindow.style.cssText = "position:absolute;width:450px;height:116px; margin-left: -225px; margin-top:-58px;left: 50%;top: 50%;background-color:#FFFFFF;border: 1px solid #000000;box-shadow: 2px 2px 0px #000000;"
-        
-        let alertImage = document.createElement("img")
-        alertImage.setAttribute("src", "/res/sys/wde/icons/ohno.png")
-        alertImage.style.cssText = "position:absolute; width:64px;height:64px;top:15px;left:25px"
-        newWindow.appendChild(alertImage)
-
-        let errorText = document.createElement("div")
-        errorText.style.cssText = "position:absolute; width: 300px; left:128px; top:30px;font-family: 'Virtue';"
-        errorText.innerHTML = alertText
-        newWindow.appendChild(errorText)
-
-        let closeButton = document.createElement("button")
-        closeButton.style.cssText = "position:absolute; left: 382px; bottom: 10px; background-color:#FFFFFF; width: 55px; height:18px; font-family: 'Virtue'; border-radius:4px;border: 1px solid #000000;"
-        closeButton.innerHTML = "Close"
-        closeButton.addEventListener('click', () => { newWindow.remove()})
-        newWindow.appendChild(closeButton)
-
-        document.body.querySelector('#windows-layer').appendChild(newWindow)
-    }
-    
-    
-    
-}
-

front/src/src/wde/wde-mobile.js

@@ -1,52 +0,0 @@
-import MobileDecorat from "./decorat/mobile-decorat.js"
-import MobileSunboard from "./sunboard/sunboard-mobile.js"
-import AbstractWebDesktopEnvironment from "./wde.js"
-import WDEFileView from "./widgets/file-view/file-view.js"
-export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvironment{
-    /** @type {MobileDecorat} */
-    Decorat
-    /** @type {WDEFileView} */
-    FileView
-    /** @type {MobileSunboard} */
-    #sunBoard
-    constructor(){
-        super()
-        super._SetWDE(this)
-        document.body.style.setProperty('--zoom', 3)
-        this.Decorat = new MobileDecorat()
-        this.FileView = WDEFileView
-        this.#sunBoard = new MobileSunboard(this)
-        // this.loadWDE()
-        
-    }
-
-    loadWDE(){
-        this.#initControlsBar()
-    }
-
-    /**
-    * @param {string} appPath
-    * @param {string[]} args
-    * @param {string} runPath
-    */
-    async Open(appPath, args, runPath){
-        const runContext = {
-            isMobile: true,
-            bundlePath: appPath,
-            runPath: runPath
-        }
-        
-        super._Open(appPath, args, runPath, (appManifest) =>{
-            super._GetApp(appManifest.appId).NewView(args, runContext)
-        }, this)
-
-    }
-
-    #initControlsBar(){
-        let barNode = document.body.querySelector("#controls-bar")//TODO Validate
-
-        barNode.querySelector("#back").addEventListener('click', () => {
-                this.Decorat.BackAction()
-        })
-    }
-}

front/src/src/wde/wde.js

@@ -1,94 +0,0 @@
-import WDEApplication from "./application.js"
-
-export default class AbstractWebDesktopEnvironment{
-    /** @type {Object<string, WDEApplication>} */
-    _applications = {}
-    /** @type {AbstractWebDesktopEnvironment} */
-    #wde
-
-    /** @type {AbstractWebDesktopEnvironment} */
-    _SetWDE(wde){
-        this.#wde = wde
-    }
-    
-    /**
-    * @param {string} path
-    * @returns {Object | undefined} //FIXME
-    */
-    async _FetchAppManifest(path){
-        // console.log("path: " + path )
-        const params = new URLSearchParams({path: path, mode: "json"})
-        const response = await fetch(`/system/loadApp?` + params)
-        if (response.status != 200){
-            const error = await response.json()
-            // WebDesktopEnvironment.Alert(error.message) //FIXME
-            return undefined
-        }
-        //TODO Validate manifest
-        const appManifest = response.json()
-        return appManifest
-    }
-
-    /**
-    * @param {string} appPath
-    * @param {runContext} runContext
-    * @param {string} runPath
-    * @param {function} callback
-    */
-    async _Open(appPath, runContext, runPath, callback){
-        const appManifest = await this._FetchAppManifest(appPath)
-        
-        if (appManifest === undefined) return //TODO return err
-        
-        if (this._applications[appManifest.appId] === undefined){
-            this.#loadApp(appManifest, () => {
-                callback(appManifest)
-            })
-        } else {
-            callback(appManifest)
-        }
-    }
-
-    /**
-    * @param {*} appManifest
-    * @param {function} onload callback after script loading
-    */
-    async #loadApp(appManifest, onload){
-        let newApp
-        await import(/* webpackMode: "eager" */ `${window.location.origin}/res/dev-fs/dist/finder.js`).then((app) => {newApp = app})
-        // let newApp
-        // switch (appManifest.appId) { //FIXME Can't dynamicly load es6 modules withou static pathes
-        //     case 'Finder':
-                      
-        //         break;
-        // }
-        let newAppClass = new newApp.default(this.#wde)
-        this._applications[appManifest.appId] = newAppClass
-        onload()
-        return //TODO return result
-    }
-
-    _GetApp(appId){
-        // console.log(appId)
-        return this._applications[appId]
-    }
-
-    _fetchComp(res) {
-        import(`${window.location.origin}${res}`).then(() => {
-          console.log("Loaded")
-        }, (err)=>{
-          console.log("Error", err)
-        })
-      }
-}
-
-/**
- * @typedef {Object} runContext
- * @property {boolean} isMobile
- * @property {string} appPath 
- * @property {string} runPath //TODO
-*/
-
-/** //TODO
- * @typedef {Object} appManifest
- */

front/src/src/wde/widgets/basic-widgets.less

@@ -1,60 +0,0 @@
-.ContentBorder { /*TODO Delete, deprecated*/
-    width: 100%;
-    height: 100%;
-    /* background-color: #DDDDDD;
-    border: 1px solid #000000; */
-    
-    overflow: hidden;
-    overflow-x: hidden;
-}
-
-.ContextMenu {
-    position: absolute;
-    width: auto;
-    height: auto;
-
-    background-color: #DDDDDD;
-
-    border: 1px solid #000000;
-}
-
-.ContextMenu .Content{
-    position: relative;
-    width: auto;
-    height: auto;
-    
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    /* padding: 4px;
-    padding-top: 2px;
-    padding-right: 6px;
-    gap: 4px; */
-}
-
-.ContextMenu .Row {
-    width: 100%;
-    height: 16px;
-
-}
-
-.ContextMenu .SectionBreaker {
-    
-    /* background-color: rebeccapurple; */
-
-}
-
-.ContextMenu .Row:hover{
-    background-color: #333399;
-    color: #FFFFFF;
-}
-
-.ContextMenu .Row .Lable{
-    margin-left: 20px;
-    margin-right: 12px;
-    font-family: "Virtue";
-    
-    white-space: nowrap;
-}

front/src/src/wde/widgets/file-view/file-view.js

@@ -1,134 +0,0 @@
-
-
-export default class WDEFileView{
-    path = ""
-    parentElem = undefined
-    selected = []
-    /**
-    * @param {HTMLElement} fileViewElem
-    * @param {Function} doubleClickCallback
-    * @param {Function} rightClickCallback
-    * @param {Function} updateFileViewCallback
-    */
-    constructor(fileViewElem, doubleClickCallback, rightClickCallback, fileUploadCallback, updateFileViewCallback){
-        //TODO check all params
-        this.parentElem = fileViewElem
-
-        fileViewElem.addEventListener('click', (event) => {
-            if (event.target.classList[0] == 'FileTileView')
-            {   
-                this.DeselectAll()
-                return
-            }
-            if (event.detail === 1){
-                this.DeselectAll()
-                this.Select([event.target])
-            } else if (event.detail === 2) {
-                doubleClickCallback(event)
-            }
-        })
-
-        fileViewElem.addEventListener('contextmenu', (event) => {
-            event.preventDefault();
-            if (event.target.classList.contains("Tile")){
-                this.DeselectAll()
-                this.Select([event.target])
-            }
-            this.Select([event.target])
-            rightClickCallback(event)
-        })
-
-        if (fileUploadCallback !== undefined) {
-            let counter = 0
-            let draggedElem = undefined
-            
-            fileViewElem.addEventListener('dragstart', (event) => {
-                // console.log(event.target)
-                // console.log(this.path)
-                //  draggedElem = event.target
-                event.dataTransfer.setData("fileName", event.target.getAttribute("name"))
-                event.dataTransfer.setData("filePath", this.path + "/" + event.target.getAttribute("name"))
-                event.dataTransfer.setData("dropType", "move")
-                // console.log(updateFileViewCallback)
-                // event.dataTransfer.setData("updateCallback", updateFileViewCallback)
-                // event.dataTransfer.setData("fileName", )
-                // console.log(draggedElem)
-            })
-
-            fileViewElem.addEventListener('dragenter', function(event) {
-                event.preventDefault();
-                counter++
-                fileViewElem.classList.add("DragDropBorder")
-            })
-            
-            fileViewElem.addEventListener('dragend', function(event) {
-                // console.log(fileViewElem)
-                event.preventDefault();
-                counter--
-                if (counter === 0){
-                    fileViewElem.classList.remove("DragDropBorder")
-                }
-                // updateFileViewCallback()
-                // draggedElem = undefined
-            })
-            
-            fileViewElem.addEventListener('dragleave', function(event) {
-                // console.log(fileViewElem)
-                event.preventDefault();
-                counter--
-                if (counter === 0){
-                    fileViewElem.classList.remove("DragDropBorder")
-                }
-                // draggedElem = undefined
-            })
-
-            fileViewElem.addEventListener('dragover', function(event) {
-                event.preventDefault();
-            })
-
-            fileViewElem.addEventListener("drop", (event) => {
-                event.preventDefault();
-                fileUploadCallback(event)
-                fileViewElem.classList.remove("DragDropBorder")
-                // updateFileViewCallback()
-                // this.OpenFolder(this.path)
-                // draggedElem = undefined
-            })
-        }
-    }
-
-    /** 
-    * @param {[]Element} elements
-    */
-    Select(elements){
-        elements.forEach(element => {
-            this.selected.push(element)
-            element.classList.add("Selected")
-        });
-    }
-
-    DeselectAll(){
-        this.selected.forEach(element => {
-            element.classList.remove("Selected")    
-        });
-        this.selected = []
-    }
-
-    /** Get html of folder by path
-    * @param {string} path
-    */
-    async OpenFolder(path){
-        this.path = path
-        const params = new URLSearchParams({
-            path: path
-        })
-        const response = await fetch(`/system/wde/widgets/file-tile-view?` + params)
-        if (response.status != 200){
-            //TODO Error text message
-            WebDesktopEnvironment.Alert("TODO") 
-            return
-        }
-        let html = await response.text()
-        this.parentElem.innerHTML = html
-    }
-}

front/src/src/wde/widgets/file-view/file-view.less

@@ -1,86 +0,0 @@
-.FileTileView{
-    width: 100%;
-    height: 100%;
-
-    
-    
-    /* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */
-}
-
-.FileTileView.DragDropBorder{
-    box-shadow: inset 0px 0px 0px 4px #9999CC;
-    /* background-color: blue; */
-}
-
-.FileTileView .FlexContainer{
-    width: 100%;
-    height: auto;
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 50px;
-    row-gap: 20px;
-    /* padding: 15px; Shit fix TODO: */
-    margin: 15px;
-    flex-wrap: wrap;
-    align-content: flex-start;
-
-    /* overflow: scroll; */
-    /* overflow-x: hidden; */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-}
-
-.FileTileView::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}
-
-.FileTileView .Tile{
-    width: 50px; 
-    height: 50px; 
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 2px;
-    padding: 0px;
-    flex-wrap: nowrap;
-}
-
-.FileTileView .Selected{
-    /* inherits: ; */
-    /* background-color: black; */
-}
-
-.FileTileView .Icon{
-    width: 32px; 
-    height: 32px; 
-    /* background-image: url("./icons/folder.png"); */
-    background-size: cover;
-
-    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
-    image-rendering: -moz-crisp-edges;          /* Firefox                        */
-    image-rendering: -o-crisp-edges;            /* Opera                          */
-    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
-    image-rendering: pixelated;                 /* Universal support since 2021   */
-    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
-    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
-}
-
-.FileTileView .Selected .Icon{
-    filter: brightness(0.4);
-}
-
-.FileTileView .Lable{
-    white-space: nowrap;
-}
-
-.FileTileView .Selected .Lable{
-    white-space: nowrap;
-    color: white;
-    background-color: black;
-}

front/src/src/web-fs/web-fs.js

@@ -1,131 +0,0 @@
-export default class WebFS{
-     /**
-    * @param {string} path
-    * @returns {boolean}
-    */
-     static async CreateDirectory(path){
-        if (path == undefined){
-            WebDesktopEnvironment.Alert("Path is undefined")
-            return false
-        }
-        const params = new URLSearchParams({
-            path: `${path}/New Directory`
-        })
-        const response = await fetch(`/system/fs/createDir?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("DIRCTORY CREATION ERROR") //TODO
-            return false
-        }
-        return true
-    }
-
-    /**
-    * @param {string} path
-    * @returns {boolean}
-    */
-    static async DeleteFile(path){
-        const params = new URLSearchParams({
-            path: path
-        })
-        const response = await fetch(`/system/fs/delete?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("DELETE ERROR") //TODO
-            return false
-        }
-        return true
-    }
-
-    /**
-    * @param {string} path
-    * @returns {boolean}
-    */
-    static async MoveFile(sourcePath, targetPath){
-        const params = new URLSearchParams({
-            sourcePath: sourcePath,
-            targetPath: targetPath
-        })
-        const response = await fetch(`/system/fs/move?` + params)
-        if (response.status != 200){
-            // WebDesktopEnvironment.Alert("Move ERROR") //TODO
-            return false
-        }
-        return true
-    }
-
-    /**
-    * @param {string} linkPath
-    * @returns {string}
-    */
-    static async ReadObjectLink(linkPath){
-        const params = new URLSearchParams({
-            linkPath: linkPath,
-        })
-        const response = await fetch(`/system/fs/readObjectLink?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("TODO") //TODO
-            return ""
-        }
-        const path = await response.text()
-        //TODO Validate
-        return path 
-    }
-
-    /**
-    * @param {string} sourcePath
-    * @param {string} linkPath
-    * @returns {string}
-    */
-    static async CreatePathLink(sourcePath, linkPath){
-        const params = new URLSearchParams({
-            sourcePath: sourcePath,
-            linkPath: linkPath,
-        })
-        const response = await fetch(`/system/fs/createPathLink?` + params)
-        return response.status == 200
-    }
-
-    /**
-    * @param {string} linkPath
-    * @returns {string}
-    */
-    static async ReadPathLink(linkPath){
-        const params = new URLSearchParams({
-            linkPath: linkPath,
-        })
-        const response = await fetch(`/system/fs/readPathLink?` + params)
-        if (response.status != 200){
-            WebDesktopEnvironment.Alert("TODO") //TODO
-            return ""
-        }
-        // console.log(response)
-        const file = await response.json()
-        //TODO Validate
-        return file
-    }
-
-    /**
-    * @param {File} file
-    * @param {string} parentPath
-    * @returns {boolean}
-    */
-    static async UploadFile(file, parentPath){
-        console.log('here')
-        let formData = new FormData()
-        formData.append("file", file) //FIXME Conn reset
-        const params = new URLSearchParams({
-            parentPath: parentPath,
-        })
-        const response = await fetch(`/system/fs/upload?` + params,
-        {
-            method: "POST",  //TODO Change to PUT?
-            body: formData
-        })
-        console.log(response.status)
-        if (response.status != 201){
-            const error = await response.json()
-            WebDesktopEnvironment.Alert(error.message) 
-            return false
-        }
-        return true
-    }
-}

front/src/theme.less

@@ -1,2 +1,10 @@
 @col-ceil: #9999CC;
 @col-argent: #C0C0C0;
+@col-chinese-silver: #CCCCCC;
+@col-gainsboro: #DDDDDD;
+@col-davys-grey: #555555;
+@col-grey: #808080;
+@col-bright-grey: #EEEEEE;
+@col-black: #000000;
+@col-white: #FFFFFF;
+@col-raisin-black: #222222;

front/src/wde/application.js

@@ -17,7 +17,6 @@ export default class WDEApplication{
         // console.log(wde)
         this.AppId = AppId //TODO: Validate
         this.AppManifest = manifest
-        console.log("SUKA", this.AppId, AppId)
     }
 
     /** @returns {AbstractWebDesktopEnvironment} */

front/src/wde/decorat/desktop-decorat.js

@@ -6,7 +6,7 @@ export default class DesktopDecorat{
         this.#windowsLayer = document.body.querySelector('#windows-layer') //TODO Validate if null
 
         let startDrag = (event) => {
-            let window = event.target.closest('.WindowFrame')
+            let window = event.target.closest('.window-frame')
             this.bringWindowToFront(window)
             if (event.target.classList.contains("DragArea")){
                 let xPosInit = event.offsetX
@@ -56,7 +56,8 @@ export default class DesktopDecorat{
         let newWindow = document.createElement("div")
         newWindow.setAttribute('appid', appId)
 
-        newWindow.setAttribute("class", "WindowFrame ConvexElement")
+        // newWindow.setAttribute("class", "WindowFrame ConvexElement")
+        newWindow.setAttribute("class", "window-frame")
         newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
 
         newWindow.style.width = width.toString() + "px"

front/src/wde/effects.less

@@ -0,0 +1,44 @@
+.adjective{
+    border: 1px solid #555555;
+}
+
+.convex{
+    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
+    inset -1px -1px 0px rgba(0, 0, 0, 0.27),
+    inset 1px 1px 0px #FFFFFF;
+}
+
+.border{
+    .grey{
+        border: 1px solid @col-davys-grey;
+    }
+    .black{
+        border: 1px solid @col-black;
+    }
+    
+}
+
+.shadow{ //FIXME: shadow must be 2px offset from windows borders
+    .grey{
+        box-shadow: 1px 1px 0px @col-davys-grey;
+    }
+    .black{
+        box-shadow: 1px 1px 0px @col-black;
+    }
+}
+
+
+
+.rows-fill-shadowed{
+    background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
+    background-size: 2px 2px;
+    filter: drop-shadow(1px 1px 0px #777777);
+}
+@eff-border-black: 1px solid @col-black;
+@eff-border-grey: 1px solid @col-davys-grey;
+
+@eff-box-shadow-grey: 1px 1px 0px @col-davys-grey;
+@eff-box-shadow-black: 1px 1px 0px @col-black;
+
+@eff-box-shadow-convex: inset -1px -1px 0px rgba(0, 0, 0, 0.27),inset 1px 1px 0px @col-white;
+@eff-box-shadow-adjective: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF;

front/src/wde/legacy-ui.less

@@ -1,25 +1,25 @@
-.WindowFrame {
+// .WindowFrame {
-    /* Auto layout */
+//     /* Auto layout */
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    align-items: flex-start;
+//     align-items: flex-start;
-    padding: 4px;
+//     padding: 4px;
-    padding-top: 2px;
+//     padding-top: 2px;
-    padding-right: 6px;
+//     padding-right: 6px;
-    gap: 4px;
+//     gap: 4px;
 
-    position: absolute;
+//     position: absolute;
 
-    background: #DDDDDD;
+//     background: #DDDDDD;
-    border: 1px solid #555555;
+//     border: 1px solid #555555;
     
 
-    /* Inside auto layout */
+//     /* Inside auto layout */
-    flex: none;
+//     flex: none;
-    order: 1;
+//     order: 1;
-    align-self: stretch;
+//     align-self: stretch;
-    flex-grow: 1;
+//     flex-grow: 1;
-}
+// }
 
 /* TODO Add shadows to windows */
 .WindowFrame.Focused{

front/src/wde/primitives.less

@@ -1,3 +1,11 @@
-.WdePrimitives.AdjectiveElement {
+.WdePrimitives {
-    border: 1px solid #555555;
+
+    .adjective{
+        border: 1px solid #555555;
+    }
+
+    .black-border{
+        border: 1px solid #000000;
+    }
+    
 }

front/src/wde/scrollbar/wde-scrollbar.css

@@ -1,110 +0,0 @@
-.scroller {
-    overflow-y: scroll;
-    scrollbar-color: #0A4C95 #C2D2E4;
-    border-radius: 0px;
-  }
-
-.scroll_content {
-    position: relative;
-    width: 400px;
-    height: 414px;
-    top: -17px;
-    padding: 20px 10px 20px 10px;
-    overflow-y: auto;
-}
-
-.ScrollbarPlace{
-    overflow: hidden;
-
-    border-left: 1px solid #555555;
-    width: 14px;
-    height: 100%;
-
-    bottom: 0px;
-    right: 0px;
-    width: 14px;
-    height: 100%;
-
-    background-color: #EEEEEE;
-    
-    
-    /* Inside auto layout */
-    flex: none;
-    order: 0;
-    align-self: stretch;
-    flex-grow: 1;
-}
-
-.Focused .ScrollbarPlace{
-    border-left: 1px solid #000000;
-    background-color: #AAAAAA;
-    box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29),
-                inset -2px 0px 0px rgba(255, 255, 255, 0.19),
-                inset 1px 1px 0px rgba(0, 0, 0, 0.14), 
-                inset 2px 2px 0px rgba(0, 0, 0, 0.19);
-}
-
-.ScrollBarScrollElement{
-    position: relative;
-    visibility: hidden;
-    width: 14px;
-    height: 31px;
-    
-    background: #9999FF;
-    
-    box-shadow: 0px -1px 0px #000000,
-                0px 1px 0px #000000,
-                0px 2px 0px rgba(0, 0, 0, 0.13),
-                0px 3px 0px rgba(0, 0, 0, 0.19),
-                inset 0px 1px 0px rgba(255, 255, 255, 0.5),
-                inset 1px 0px 0px rgba(255, 255, 255, 0.5),
-                inset -1px -1px 0px rgba(102, 102, 204, 0.91);
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    gap: 5px;
-    padding: 0px;
-}
-
-.Focused .ScrollBarScrollElement{
-    visibility: visible;
-}
-
-.ScrollBarScrollElementDrag{
-    pointer-events: none;
-    /* background-color: #0A4C95; */
-    width: 7px;
-    height: 7px;
-    margin-left: -1px;
-
-    background: linear-gradient(transparent 0%,#CCCCFF 0%, #CCCCFF 50%, transparent 50%);
-    background-size: 2px 2px;
-
-    /* TODO white pixels in rows start */
-    filter: drop-shadow(1px 1px 0px #333399);
-}
-
-/* TODO to wde css */
-.ScrollContent {
-    /* width: 100%;
-    height: 100%; */
-    overflow: scroll;
-    overflow-x: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-
-    /* Auto layout */
-    /* display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px; */
-}
-
-.ScrollContent::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}

front/src/wde/sunboard/sunboard-mobile.js

@@ -38,7 +38,7 @@ export default class MobileDesktop{
             let path = element.getAttribute('path') //TODO: Validate
 
             element.addEventListener('click', () => {
-                this.#wde.Open(path, [""], "") //FIXME
+                this.#wde.Open(path, ["/"], "") //FIXME
             })
         });      
     }

front/src/wde/wde-desktop.js

@@ -1,5 +1,5 @@
 import DesktopDecorat from "./decorat/desktop-decorat.js";
-import WDEScrollBar from "./scrollbar/scrollbar.js";
+import WDEScrollBar from "./widgets/scrollbar/scrollbar.js";
 import WebFS from "../web-fs/web-fs.js";
 import WDEApplication from "./application.js";
 import WDEFileView from "./widgets/file-view/file-view.js";
@@ -36,6 +36,8 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
 
     async loadWDE(){
         await this.Open("/Applications/Finder.app", ["/","--desktop", "desktop-layer"])
+        // await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
+        await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
         return
         
         let autoStart = document.body.querySelector("wde-autostart")

front/src/wde/widgets/file-view/file-view.js

@@ -19,7 +19,7 @@ export default class WDEFileView{
         this.parentElem = fileViewElem
 
         fileViewElem.addEventListener('click', (event) => {
-            if (event.target.classList[0] == 'FileTileView')
+            if (event.target.classList[0] == 'file-view')
             {   
                 this.DeselectAll()
                 return

front/src/wde/widgets/file-view/file-view.less

@@ -1,7 +1,10 @@
+@import "../../../theme.less";
 .FileTileView{
     width: 100%;
     height: 100%;
 
+    background-color: @col-white;
+
     
     
     /* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */

front/src/wde/widgets/scrollbar/scrollbar.js

@@ -5,10 +5,10 @@ export default class WdeScrollBar{
     */
     constructor(scrollBarContainer, content){
         let nonNativeScroll = false
-        // console.log(scrollBarContainer, content)
+        console.log(scrollBarContainer, content)
         // let handler = scrollBarContainer.children[0]
         //TODO On scroll move focus on window?
-        let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
+        let handler = scrollBarContainer.querySelector(".scroll-element") //TODO Refactor classes
         // console.log(handler)
     
         handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'

front/src/wde/widgets/scrollbar/scrollbar.less

@@ -1,22 +1,22 @@
-.scroller {
+// .scroller {
-    overflow-y: scroll;
+//     overflow-y: scroll;
-    scrollbar-color: #0A4C95 #C2D2E4;
+//     scrollbar-color: #0A4C95 #C2D2E4;
-    border-radius: 0px;
+//     border-radius: 0px;
-  }
+//   }
 
-.scroll_content {
+// .scroll-content {
-    position: relative;
+//     position: relative;
-    width: 400px;
+//     width: 400px;
-    height: 414px;
+//     height: 414px;
-    top: -17px;
+//     top: -17px;
-    padding: 20px 10px 20px 10px;
+//     padding: 20px 10px 20px 10px;
-    overflow-y: auto;
+//     overflow-y: auto;
-}
+// }
 
-.ScrollbarPlace{
+.scrollbar-place{
     overflow: hidden;
 
-    border-left: 1px solid #555555;
+    border-left: @eff-border-grey;
     width: 14px;
     height: 100%;
 
@@ -25,7 +25,7 @@
     width: 14px;
     height: 100%;
 
-    background-color: #EEEEEE;
+    // background-color: #EEEEEE;
     
     
     /* Inside auto layout */
@@ -35,8 +35,8 @@
     flex-grow: 1;
 }
 
-.Focused .ScrollbarPlace{
+.Focused .active .scrollbar-place{
-    border-left: 1px solid #000000;
+    border-left: @eff-border-black;
     background-color: #AAAAAA;
     box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29),
                 inset -2px 0px 0px rgba(255, 255, 255, 0.19),
@@ -44,7 +44,7 @@
                 inset 2px 2px 0px rgba(0, 0, 0, 0.19);
 }
 
-.ScrollBarScrollElement{
+.scroll-element{
     position: relative;
     visibility: hidden;
     width: 14px;
@@ -69,11 +69,11 @@
     padding: 0px;
 }
 
-.Focused .ScrollBarScrollElement{
+.Focused .active .scroll-element{
     visibility: visible;
 }
 
-.ScrollBarScrollElementDrag{
+.drag-element{
     pointer-events: none;
     /* background-color: #0A4C95; */
     width: 7px;

front/src/wde/widgets/title-bar/title-bar.less

@@ -0,0 +1,66 @@
+@import "../../effects.less";
+@import "../../../theme.less";
+
+.title-bar{
+    width: 100%;
+    height: 13px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 0px;
+
+
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 0;
+}
+
+.title-bar .lable{
+    position: relative;
+    top: 1px;
+    /* font-size: 13px; */
+    color: @col-grey;
+    pointer-events: none;
+    white-space: nowrap;
+
+    font-family: "Virtue";
+    letter-spacing: 0.35px;
+}
+
+.window-frame.Focused .title-bar .visual-drag-area{
+    &:extend(.rows-fill-shadowed);
+    pointer-events: none;
+    width: 100%;
+    height: 11px;
+}
+
+
+
+.title-bar .button{
+    width: 11px;
+    height: 11px;
+    padding: 0%;
+    position: relative;
+    top: 1px;
+    visibility: hidden;
+    
+    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
+    border: 1px solid @col-raisin-black;
+    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
+        -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
+        inset 1px 1px 0px rgba(255, 255, 255, 0.5),
+        inset -1px -1px 0px rgba(0, 0, 0, 0.27);
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.Focused .title-bar .button{
+    visibility:visible;
+}

front/src/wde/window-frame.less

@@ -0,0 +1,50 @@
+@import "../theme.less";
+@import "./effects.less";
+
+.window-frame{      
+    position: absolute;
+
+    border: @eff-border-grey;
+    box-shadow: @eff-box-shadow-grey;
+    position: absolute;
+    background-color: @col-gainsboro;
+    
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 4px;
+    padding-top: 2px;
+    padding-right: 6px;
+    gap: 4px;
+
+    /* Inside auto layout */
+    flex: none;
+    order: 1;
+    align-self: stretch;
+    flex-grow: 1;
+}
+
+
+.window-frame.Focused{
+    background-color: @col-chinese-silver;
+    border: @eff-border-black;
+    box-shadow: @eff-box-shadow-grey, @eff-box-shadow-convex;
+}
+
+
+.content-border{
+    border: @eff-border-grey;
+    width: 100%;
+    height: 100%;
+    background-color: @col-bright-grey;
+    
+    overflow: hidden;
+    overflow-x: hidden;
+}
+
+.Focused .content-border{
+    background-color: @col-gainsboro;
+    border: @eff-border-black;
+    box-shadow: @eff-box-shadow-adjective;
+}

templates/base/mobile-desktop.html

@@ -1,4 +1,5 @@
 <!DOCTYPE HTML>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <html lang="en" dir="ltr">
     <title>Greg Brzezinski</title>
     <head>

templates/finder/admin-app.html

@@ -0,0 +1,31 @@
+{{ define "finder/admin-app.tmpl" }}
+    <div class="title-bar DragArea">
+        <button id="closeWindowButton" class="button" title="Close Window"></button>
+        <div id="Drag" class="visual-drag-area"></div>
+        <div class="lable">
+            Admin Finder
+        </div>
+        <div id="Drag" class="visual-drag-area"></div>
+        
+    </div>
+    <div id="ContentBorder" class="content-border AdjectiveElement">
+        <div class="finder-content">
+         
+            <div class="tool-bar">
+                <!-- <button id="BackButton">Back</button>
+                <button id="UpButton">Up</button>
+                <button id="RootButton">/</button>
+                <button id="HomeButton">Home</button>
+                <div class="AddressBar" contentEditable="true">You Favorite Movie</div> -->
+            </div>
+            <div class="file-view-container">
+                <div class="FileTileView">
+
+                </div>
+                {{template "wde-widgets/scrollbar.tmpl" .}}
+            </div>
+        </div>
+    </div>
+{{ end }}
+
+				

templates/finder/admin-app.tmpl

@@ -1,32 +0,0 @@
-{{ define "finder/admin-app.tmpl" }}
-    <div class="TitleBar DragArea">
-        <button id="closeWindowButton" class="Button" title="Close Window"></button>
-        
-            <div id="Drag" class="VisualDragArea"></div>
-            <div class="Lable">
-                Admin Finder
-            </div>
-            <div id="Drag" class="VisualDragArea"></div>
-        
-    </div>
-    <div id="ContentBorder" class="ContentBorder AdjectiveElement">
-        <div class="FinderContent">
-            <!-- TODO Fix ConvexElement  -->
-            <div class="ToolBar ConvexElement">
-                <button id="BackButton">Back</button>
-                <button id="UpButton">Up</button>
-                <button id="RootButton">/</button>
-                <button id="HomeButton">Home</button>
-                <div class="AddressBar" contentEditable="true">You Favorite Movie</div>
-            </div>
-            <div class="FinderFileView">
-                <div class="FileTileView">
-
-                </div>
-                {{template "wde-widgets/scrollbar.tmpl" .}}
-            </div>
-        </div>
-    </div>
-{{ end }}
-
-				

templates/finder/app.html

@@ -10,8 +10,7 @@
         
     </div>
     <div id="ContentBorder" class="ContentBorder AdjectiveElement">
-        <div class="FinderContent">
+        <!-- <div class="FinderContent">
-            <!-- TODO Fix ConvexElement  -->
             <div class="ToolBar ConvexElement">
                Folder info
             </div>
@@ -20,7 +19,7 @@
                 </div>
                 {{template "wde-widgets/scrollbar.tmpl" .}}
             </div>
-        </div>
+        </div> -->
     </div>
 {{ end }}
 

templates/finder/mobile-app.html

@@ -0,0 +1,22 @@
+{{ define "finder/mobile-app.tmpl" }}
+<div id="ContentBorder" class="content-border AdjectiveElement">
+    <div class="finder-content">
+     
+        <div class="tool-bar">
+            <!-- <button id="BackButton">Back</button>
+            <button id="UpButton">Up</button>
+            <button id="RootButton">/</button>
+            <button id="HomeButton">Home</button>
+            <div class="AddressBar" contentEditable="true">You Favorite Movie</div> -->
+        </div>
+        <div class="file-view-container">
+            <div class="FileTileView">
+
+            </div>
+            {{template "wde-widgets/scrollbar.tmpl" .}}
+        </div>
+    </div>
+</div>
+{{ end }}
+
+				

templates/finder/mobile-app.tmpl

@@ -1,8 +0,0 @@
-{{ define "finder/mobile-app.tmpl" }}
-    <div class="MobileContentBorder">
-        <div class="FileTileView">
-        </div>
-    </div>
-{{ end }}
-
-				

templates/personal-properties/app.html

@@ -1,11 +1,11 @@
 {{ define "personal-properties/app.tmpl" }}
-	<div class="TitleBar DragArea">
+	<div class="title-bar DragArea">
 		<button id="closeWindowButton" class="Button" title="Close Window"></button>
-		<div id="Drag" class="VisualDragArea"></div>
+		<div id="Drag" class="visual-drag-area"></div>
 		<div class="Lable">About me</div>
-		<div id="Drag" class="VisualDragArea"></div>
+		<div id="Drag" class="visual-drag-area"></div>
 	</div>
-	<div class="ContentBorder AdjectiveElement">
+	<div class="content-border">
 		<div class="PersPropsContent">
 			<div class="PropsView">
 				<div class="PropertiesList">

templates/wde-widgets/scrollbar.html

@@ -0,0 +1,8 @@
+{{ define "wde-widgets/scrollbar.tmpl" }}
+    <div class="scrollbar-place">
+        <div class="scroll-element">
+            <div class="drag-element">	
+            </div>
+        </div>
+    </div>
+{{ end }}

templates/wde-widgets/scrollbar.tmpl

@@ -1,8 +0,0 @@
-{{ define "wde-widgets/scrollbar.tmpl" }}
-    <div class="ScrollbarPlace">
-        <div class="ScrollBarScrollElement">
-            <div class="ScrollBarScrollElementDrag">	
-            </div>
-        </div>
-    </div>
-{{ end }}