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

@@ -10,7 +10,7 @@ export default class FinderWindow{
     /** @type {Finder} */
     #finder
     /**
-     * @deprecated move to this.#finder.WDE()
+     * @deprecated
      * @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(newWindow.querySelector(".FileTileView"))
+        // console.log(this.#wde)
         
         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(".scrollbar-place"), newWindow.querySelector(".FileTileView"))
+            let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
             
             this.windowElem = newWindow
             this.RenderDir(args[0])

front/src/apps/finder/finder.less

@@ -1,34 +1,34 @@
-@import "../../theme.less";
+.FinderContent {
-@import "../../wde/effects.less";
-
-.finder-content {
     width: 100%;
     height: 100%;
 
     /* Auto layout */
     display: flex;
     flex-direction: column;
-    justify-content: start;
+    justify-content: center;
     align-items: flex-start;
     padding: 0px;
 }
 
-.finder-content > .tool-bar{
+.FinderContent .ToolBar{
     width: 100%;
-    min-height: 20px;
+    height: 20px;
-    border-bottom: @eff-border-grey;
+    border-bottom: 1px solid #555555;
+    background-color: #EEEEEE;
 }
 
-.window-frame.Focused .tool-bar{
+.Focused .FinderContent .ToolBar{
     border-bottom: 1px solid #000000;
-    box-shadow: @eff-box-shadow-convex;
+    background-color: #DDDDDD;
 }
 
-.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,11 +1,8 @@
 @import "./wde/primitives.less";
 @import "./wde/widgets/file-view/file-view.less";
-@import "./wde/widgets/scrollbar/scrollbar.less";
+@import "./wde/legacy-ui.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";
@@ -29,8 +26,6 @@
 .Click {
     pointer-events: all;
 }
-.DragArea
-
 *{
     font-family: Verdana, Geneva, sans-serif;
     font-size: 11px;
@@ -44,14 +39,12 @@
 }
 
 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

@@ -0,0 +1,339 @@
+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

@@ -0,0 +1,64 @@
+// 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

@@ -0,0 +1,39 @@
+.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

@@ -0,0 +1,79 @@
+@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

@@ -0,0 +1,339 @@
+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

@@ -0,0 +1,64 @@
+// 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

@@ -0,0 +1,39 @@
+.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

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

front/src/src/apps/mobile.less

@@ -0,0 +1,54 @@
+@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

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

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,232 @@
+.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

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

front/src/src/apps/wde/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(".scroll-element") //TODO Refactor classes
+        let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
         // console.log(handler)
     
         handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'

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

@@ -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;
-// }
+}
 
-.scrollbar-place{
+.ScrollbarPlace{
     overflow: hidden;
 
-    border-left: @eff-border-grey;
+    border-left: 1px solid #555555;
     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 .active .scrollbar-place{
+.Focused .ScrollbarPlace{
-    border-left: @eff-border-black;
+    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),
@@ -44,7 +44,7 @@
                 inset 2px 2px 0px rgba(0, 0, 0, 0.19);
 }
 
-.scroll-element{
+.ScrollBarScrollElement{
     position: relative;
     visibility: hidden;
     width: 14px;
@@ -69,11 +69,11 @@
     padding: 0px;
 }
 
-.Focused .active .scroll-element{
+.Focused .ScrollBarScrollElement{
     visibility: visible;
 }
 
-.drag-element{
+.ScrollBarScrollElementDrag{
     pointer-events: none;
     /* background-color: #0A4C95; */
     width: 7px;

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,61 @@
+@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

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,60 @@
+.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

@@ -0,0 +1,134 @@
+
+
+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

@@ -0,0 +1,86 @@
+.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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,79 @@
+@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

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

front/src/src/mobile.less

@@ -0,0 +1,54 @@
+@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

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

front/src/src/wde/application.js

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,232 @@
+.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

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

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,110 @@
+.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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,61 @@
+@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

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,60 @@
+.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

@@ -0,0 +1,134 @@
+
+
+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

@@ -0,0 +1,86 @@
+.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

@@ -0,0 +1,131 @@
+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,10 +1,2 @@
 @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,6 +17,7 @@ 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('.window-frame')
+            let window = event.target.closest('.WindowFrame')
             this.bringWindowToFront(window)
             if (event.target.classList.contains("DragArea")){
                 let xPosInit = event.offsetX
@@ -56,8 +56,7 @@ 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

@@ -1,44 +0,0 @@
-.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,11 +1,3 @@
-.WdePrimitives {
+.WdePrimitives.AdjectiveElement {
-
-    .adjective{
     border: 1px solid #555555;
-    }
-
-    .black-border{
-        border: 1px solid #000000;
-    }
-    
 }

front/src/wde/scrollbar/scrollbar.js

@@ -0,0 +1,54 @@
+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/wde/scrollbar/wde-scrollbar.css

@@ -0,0 +1,110 @@
+.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 "./widgets/scrollbar/scrollbar.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";
@@ -36,8 +36,6 @@ 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] == 'file-view')
+            if (event.target.classList[0] == 'FileTileView')
             {   
                 this.DeselectAll()
                 return

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

@@ -1,10 +1,7 @@
-@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/title-bar/title-bar.less

@@ -1,66 +0,0 @@
-@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

@@ -1,50 +0,0 @@
-@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,5 +1,4 @@
 <!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

@@ -1,31 +0,0 @@
-{{ 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

@@ -0,0 +1,32 @@
+{{ 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.tmpl

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

templates/finder/mobile-app.html

@@ -1,22 +0,0 @@
-{{ 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

@@ -0,0 +1,8 @@
+{{ 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="title-bar DragArea">
+	<div class="TitleBar DragArea">
 		<button id="closeWindowButton" class="Button" title="Close Window"></button>
-		<div id="Drag" class="visual-drag-area"></div>
+		<div id="Drag" class="VisualDragArea"></div>
 		<div class="Lable">About me</div>
-		<div id="Drag" class="visual-drag-area"></div>
+		<div id="Drag" class="VisualDragArea"></div>
 	</div>
-	<div class="content-border">
+	<div class="ContentBorder AdjectiveElement">
 		<div class="PersPropsContent">
 			<div class="PropsView">
 				<div class="PropertiesList">

templates/wde-widgets/scrollbar.html

@@ -1,8 +0,0 @@
-{{ 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

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