more work

apps/BlogWriter/blogwriter.go

@@ -1,6 +1,7 @@
 package blogwriter
 
 import (
+	"personalwebsite/apps"
 	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
@@ -9,6 +10,8 @@ import (
 type BlogWriterApplication struct {
 	fs       *webfilesystem.WebFileSystem
 	appID    string
+	path     string
+	manifest apps.ApplicationManifest
 }
 
 func NewBlogWriterApp(webfs *webfilesystem.WebFileSystem) *BlogWriterApplication {
@@ -17,11 +20,17 @@ func NewBlogWriterApp(webfs *webfilesystem.WebFileSystem) *BlogWriterApplication
 		appID: "BlogWriter",
 	}
 }
-
+func (bw *BlogWriterApplication) GetManifest() apps.ApplicationManifest {
+	return bw.manifest
+}
 func (bw *BlogWriterApplication) GetAppID() string {
 	return bw.appID
 }
 
+func (bw *BlogWriterApplication) GetPath() string {
+	return bw.path
+}
+
 func (bw *BlogWriterApplication) PublicRoutes(routes *gin.RouterGroup) {}
 func (bw *BlogWriterApplication) PrivateRoutes(routes *gin.RouterGroup) {
 

apps/aboutme/personalprops.go

@@ -5,9 +5,11 @@ import (
 	"html/template"
 	"net/http"
 	"path"
+	"personalwebsite/apps"
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"
 	"personalwebsite/libs"
+	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
@@ -18,16 +20,35 @@ type AboutMeApp struct {
 	fs             *webfilesystem.WebFileSystem
 	appID          string
 	mLib           libs.MarkdownLib
+	titleBarConfig wde.TitleBarConfig //TODO to app manifest?
+	path           string
+	manifest       apps.ApplicationManifest
 }
 
 func NewAboutMeApp(webFs *webfilesystem.WebFileSystem) *AboutMeApp {
+	manifest := apps.ApplicationManifest{}
+	_, err := webFs.Read(path.Join("/Applications/AboutMe.app", ".appmanifest"), &manifest)
+	if err != nil {
+		panic(err)
+	}
 	newApp := AboutMeApp{
 		fs:    webFs,
 		appID: "AboutMe",
+		path:  "/Applications/AboutMe.app",
+		titleBarConfig: wde.TitleBarConfig{
+			Lable:       "About Me",
+			CloseButton: true,
+		},
+		manifest: manifest,
 	}
 	return &newApp
 }
-
+func (p *AboutMeApp) GetPath() string {
+	return p.path
+}
+func (p *AboutMeApp) GetManifest() apps.ApplicationManifest {
+	return p.manifest
+}
 func (p *AboutMeApp) PublicRoutes(route *gin.RouterGroup) {
 	route.POST("render", func(ctx *gin.Context) {
 		filePath := ctx.Query("path")
@@ -253,6 +274,7 @@ func (p *AboutMeApp) Render(appCtx appCtx.AppContext, filePath string) (gin.H, e
 	}
 
 	return gin.H{
+		"TitleBarConfig": p.titleBarConfig,
 		"HeaderProps":    propsData.Header,
 		"Links":          absoluteLinks,
 		"Islands":        renderedIslands,

apps/blogviewer/blogviewer.go

@@ -4,6 +4,7 @@ import (
 	"errors"
 	"net/http"
 	"path"
+	"personalwebsite/apps"
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"
 	"personalwebsite/libs"
@@ -17,6 +18,8 @@ type BlogViewerApplication struct {
 	fs       *webfilesystem.WebFileSystem
 	appID    string
 	mLib     libs.MarkdownLib
+	path     string
+	manifest apps.ApplicationManifest
 }
 
 func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication {
@@ -26,10 +29,18 @@ func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication
 		mLib:  libs.MarkdownLib{},
 	}
 }
+func (b *BlogViewerApplication) GetManifest() apps.ApplicationManifest {
+	return b.manifest
+}
 
 func (b *BlogViewerApplication) GetAppID() string {
 	return b.appID
 }
+
+func (b *BlogViewerApplication) GetPath() string {
+	return b.path
+}
+
 func (b *BlogViewerApplication) PrivateRoutes(route *gin.RouterGroup) {
 	b.PublicRoutes(route)
 

apps/finder/finder.go

@@ -1,6 +1,8 @@
 package finder
 
 import (
+	"path"
+	"personalwebsite/apps"
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
@@ -11,22 +13,44 @@ import (
 type FinderApplication struct {
 	fs             *webfilesystem.WebFileSystem
 	appID          string
+	titleBarConfig wde.TitleBarConfig
+	path           string
+	manifest       apps.ApplicationManifest
 	// manifest apps.ApplicationManifest
 }
 
 func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication {
+	manifest := apps.ApplicationManifest{}
+	_, err := webFs.Read(path.Join("/Applications/Finder.app", ".appmanifest"), &manifest)
+	if err != nil {
+		panic(err)
+	}
 	return &FinderApplication{
 		fs:    webFs,
+		path:  "/Applications/Finder.app",
 		appID: "Finder",
+		titleBarConfig: wde.TitleBarConfig{
+			Lable:       "Finder",
+			CloseButton: true,
+		},
+		manifest: manifest,
 	}
 }
-
+func (f *FinderApplication) GetManifest() apps.ApplicationManifest {
+	return f.manifest
+}
 func (f *FinderApplication) GetAppID() string {
 	return f.appID
 }
 
+func (f *FinderApplication) GetPath() string {
+	return f.path
+}
+
 func (f *FinderApplication) Render(appCtx appCtx.AppContext) gin.H {
-	return gin.H{}
+	return gin.H{
+		"TitleBarConfig": f.titleBarConfig,
+	}
 }
 
 func (f *FinderApplication) RenderPublicContextMenu(context string, filePath string, data string) gin.H {

apps/finder/routes.go

@@ -5,6 +5,7 @@ import (
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"
 
+	mobile "github.com/floresj/go-contrib-mobile"
 	"github.com/gin-gonic/gin"
 )
 
@@ -18,7 +19,15 @@ func (f *FinderApplication) PublicRoutes(routes *gin.RouterGroup) {
 			})
 			return
 		}
+		d := mobile.GetDevice(ctx)
+		switch {
+		case d.Mobile():
+			ctx.HTML(http.StatusOK, "templates/finder/mobile-app.tmpl", gin.H{
+				// "autostart": autostart,
+			})
+		default:
 			ctx.HTML(http.StatusOK, "finder/app.tmpl", f.Render(appCtx))
+		}
 	})
 
 	//Obsolete
@@ -68,7 +77,13 @@ func (f *FinderApplication) PrivateRoutes(routes *gin.RouterGroup) {
 			})
 			return
 		}
+		d := mobile.GetDevice(ctx)
+		switch {
+		case d.Mobile():
+			ctx.HTML(http.StatusOK, "finder/mobile-app.tmpl", f.Render(appCtx))
+		default:
 			ctx.HTML(http.StatusOK, "finder/admin-app.tmpl", f.Render(appCtx))
+		}
 	})
 
 	routes.GET("renderMobileDesktop", func(ctx *gin.Context) {

apps/img-viewer/imgviewer.go

@@ -2,6 +2,7 @@ package imgviewer
 
 import (
 	"net/http"
+	"personalwebsite/apps"
 	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
@@ -10,6 +11,8 @@ import (
 type ImgViewerApp struct {
 	fs       *webfilesystem.WebFileSystem
 	appID    string
+	path     string
+	manifest apps.ApplicationManifest
 }
 
 func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) *ImgViewerApp {
@@ -22,6 +25,9 @@ func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) *ImgViewerApp {
 func (p *ImgViewerApp) PrivateRoutes(route *gin.RouterGroup) {
 	p.PublicRoutes(route)
 }
+func (i *ImgViewerApp) GetManifest() apps.ApplicationManifest {
+	return i.manifest
+}
 func (p *ImgViewerApp) PublicRoutes(route *gin.RouterGroup) {
 	route.GET("render", func(ctx *gin.Context) {
 		isMobileParam := ctx.Query("isMobile")
@@ -44,6 +50,10 @@ func (p *ImgViewerApp) PublicRoutes(route *gin.RouterGroup) {
 	})
 }
 
+func (p *ImgViewerApp) GetPath() string {
+	return p.path
+}
+
 func (p *ImgViewerApp) GetAppID() string {
 	return p.appID
 }

apps/sunboard/sunboard.go

@@ -2,7 +2,9 @@ package sunboard
 
 import (
 	"net/http"
+	"path"
 	"personalwebsite/apps"
+	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
@@ -10,15 +12,26 @@ import (
 
 type SunboardApp struct {
 	fs         *webfilesystem.WebFileSystem
+	wde        *wde.WDE
 	appID      string
 	appStorage *apps.ApplicationsStorage
+	path       string
+	manifest   apps.ApplicationManifest
 }
 
-func NewSunboardApp(webFs *webfilesystem.WebFileSystem, appStorage *apps.ApplicationsStorage) *SunboardApp {
+func NewSunboardApp(webFs *webfilesystem.WebFileSystem, wde *wde.WDE, appStorage *apps.ApplicationsStorage) *SunboardApp {
+	manifest := apps.ApplicationManifest{}
+	_, err := webFs.Read(path.Join("/Applications/Sunboard.app", ".appmanifest"), &manifest)
+	if err != nil {
+		panic(err)
+	}
 	newApp := SunboardApp{
 		fs:         webFs,
+		wde:        wde,
 		appID:      "Sunboard",
 		appStorage: appStorage,
+		path:       "/Applications/Sunboard.app",
+		manifest:   manifest,
 	}
 	return &newApp
 }
@@ -30,21 +43,32 @@ func (a *SunboardApp) GetAppID() string {
 func (a *SunboardApp) PublicRoutes(route *gin.RouterGroup) {
 }
 
-func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
+func (a *SunboardApp) GetPath() string {
+	return a.path
+}
+func (a *SunboardApp) GetManifest() apps.ApplicationManifest {
+	return a.manifest
+}
 
+func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
 	router.POST("render", func(ctx *gin.Context) {
 		appIcons := []appIcon{}
 		for _, app := range a.appStorage.Apps {
-			if app.GetAppID() == "Sunboard" {
+			if app.GetAppID() == "Sunboard" { //FIXME
 				continue
 			}
 
+			if app.GetManifest().Iconpath == "" {
+				continue
+			}
+			println(app.GetAppID() + " : " + app.GetPath())
+			// iconPath := path.Join(, "icon.icn")
 			appIcons = append(appIcons, appIcon{
 				Type:  "Icon",
-				Icon:  "",
+				Icon:  "/system/libs/img/icon/get?path=" + app.GetManifest().Iconpath + "&size=32",
 				Lable: app.GetAppID(),
 				AppId: app.GetAppID(),
-				Path:  "/Applications/" + app.GetAppID() + ".app", //FIXME
+				Path:  app.GetPath(),
 			})
 		}
 		ctx.HTML(http.StatusOK, "sunboard/sunboard.html", gin.H{

apps/websiteapp.go

@@ -15,7 +15,8 @@ type WebDEApplication interface {
 	GetAppID() string
 	PublicRoutes(*gin.RouterGroup)
 	PrivateRoutes(*gin.RouterGroup)
-	// GetManifest() ApplicationManifest //TODO: Delete
+	GetPath() string
+	GetManifest() ApplicationManifest
 	// GEtHtml()
 	// GetId() string
 }
@@ -24,6 +25,7 @@ type ApplicationManifest struct {
 	AppId    string   `bson:"appid" json:"appId"`
 	Js       []string `bson:"js" json:"js"`
 	Css      []string `bson:"css" json:"css"`
+	Iconpath string   `bson:"iconpath" json:"iconpath"`
 }
 
 func NewApplicationsStorage(apps map[string]WebDEApplication, webfs *webfilesystem.WebFileSystem) *ApplicationsStorage {

front/src/apps/about-me/about-me.less

@@ -1,27 +1,5 @@
-/* TODO Move this to body? */
+@import "../../theme.less";
-/*.ScrollContent {
-    width: 100%;
-    height: 100%;
-    overflow: scroll;
-    overflow-x: hidden;
-    /* Firefox */
-    /* scrollbar-width: none;  */
-    /* Internet Explorer 10+ */
-    /* -ms-overflow-style: none;   */
 
-    /* Auto layout */
-    /*display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}*/
-
-/* WebKit */
-/* .ScrollContent::-webkit-scrollbar { 
-    width: 0;
-    height: 0;
-} */
 .PersPropsContent{
     width: 100%;
     height: 100%;
@@ -101,10 +79,9 @@
     gap:1px;
 }
 
-.ShortBio .Name{
+.ShortBio > .Text > .Name{
-    font-family: "Virtue";
+    &:extend(.large-system-font);
-    /* FIXME */
+    // background-color: aqua;
-    letter-spacing: 0.35px; 
 }
 
 .PropertiesList .Links {
@@ -115,12 +92,28 @@
     height: auto;
     width: auto;
 
+    // background-color: aqua;
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    justify-content: center;
+    padding: 0px;
+    // gap:4px;
+}
+.Links > a{
     /* Auto layout */
     display: flex;
     flex-direction: row;
-    align-items: left;
+    align-items: end;
+    justify-content: center;
     padding: 0px;
-    gap:4px;
+    gap: 2px;
+}
+.Links > a > .link-lable{
+    // background-color: aqua;
+    // line-height: 60px;
+    // display:table
 }
 
 .PropertiesList .Links .Link {
@@ -145,9 +138,8 @@
 }
 
 .Island .Title {
-    font-family: "Virtue";
+    //FIXME
-    /* FIXME */
+    &:extend(.large-system-font);
-    letter-spacing: 0.35px; 
     position:relative;
     display: inline-block;
     max-width: 100%;
@@ -156,10 +148,6 @@
     top: -9px;
 }
 
-.Focused .Island .Title{
-    background-color: #CCCCCC;
-}
-
 .Island .Content{
     width: 100%;
     /* top: 0px; */
@@ -183,9 +171,10 @@
 }
 .Island .Key{
     position: relative;
-    font-family: "Virtue";
+    &:extend(.large-system-font);
-    font-size: 11px;
+    // font-family: "Virtue";
-    letter-spacing: 0.35px;
+    // font-size: 11px;
+    // letter-spacing: 0.35px;
     text-align: end;
     width: 34%;
     white-space: nowrap;

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

@@ -87,8 +87,9 @@ export default class FinderWindow{
         
         let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
         newWindow.innerHTML = html
+        newWindow.querySelector(".title-bar").querySelector(".icon").setAttribute("src","/system/libs/img/icon/get?path=/Icons/GenericFolder.icn&size=16")
         
-        console.log(newWindow.querySelector(".FileTileView"))
+        // console.log(newWindow.querySelector(".FileTileView"))
         
         this.fileView = new this.#wde.FileView(
             newWindow.querySelector(".FileTileView"),
@@ -190,7 +191,7 @@ export default class FinderWindow{
         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)
+            const res = await this.#finder.WDE().WebFS().MoveFile(sourcePath, targetPath)
             if (res){
                 this.ReRenderDir()
             } else {
@@ -203,7 +204,7 @@ export default class FinderWindow{
                 const file = files[i];
                 console.log("file:" + file.name)
                 
-                const res = await WebFS.UploadFile(file, this.curPath)
+                const res = await this.#finder.WDE().WebFS().UploadFile(file, this.curPath)
                 if (res){
                     this.ReRenderDir()
                 }
@@ -233,6 +234,14 @@ export default class FinderWindow{
         this.OpenFile(this.curPath, event.target.getAttribute("name"), event.target.getAttribute("filetype"))
     }
 
+    /**
+     * 
+     * @param {string} fileName 
+     */
+    getFileExtension(fileName){
+        return fileName.split(".")[fileName.split(".").length - 1] //FIXME
+    }
+
     /**
     * @param {string} filePath
     */
@@ -240,11 +249,12 @@ export default class FinderWindow{
         // console.log(parentPath, fileName, fileType)
         // const splittedPath = filePath.split("/")
         // const fileName = splittedPath[splittedPath.length - 1]
-        const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
         
+        const fileExtension = this.getFileExtension(fileName)
+        console.log(fileExtension)
         switch (true) {
             case fileType == "objectlink":
-               this.#wde.Alert("Links not supported yet")
+               this.#finder.WDE().Alert("Links not supported yet")
                 break
             case fileType == "pathlink":
                 let res = await WebFS.ReadPathLink(`${parentPath}/${fileName}`)
@@ -252,22 +262,22 @@ export default class FinderWindow{
                 this.OpenFile(res.parentPath, res.name, res.filetype)
                 break
             case fileExtension == "app":
-                this.#wde.Open(`${parentPath}/${fileName}`, [])
+                this.#finder.WDE().Open(`${parentPath}/${fileName}`, [])
                 break
             case fileExtension == "blog":
-                this.#wde.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
                 break
             case fileType == "directory":
-                this.#wde.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
                 break
             case fileExtension == "blog":
-                this.#wde.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
                 break
             case fileExtension == "jpeg" | fileExtension == "png":
-                this.#wde.Open("img-viewer", [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open("img-viewer", [`${parentPath}/${fileName}`])
                 break;
             default:
-               this.#wde.Alert("Unsupported file type")
+               this.#finder.WDE().Alert("Unsupported file type")
                 break;
         }
     }

front/src/desktop.less

@@ -1,42 +1,27 @@
 @import "./wde/primitives.less";
 @import "./wde/widgets/file-view/file-view.less";
 @import "./wde/widgets/scrollbar/scrollbar.less";
+@import "./wde/widgets/button/button.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";
-//     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;
 }
-.DragArea
+// .DragArea
 
-*{
+// *{
-    font-family: Verdana, Geneva, sans-serif;
+//     font-family: Verdana, Geneva, sans-serif;
-    font-size: 11px;
+//     font-size: 11px;
-    font-style: normal;
+//     font-style: normal;
-    font-weight:initial;
+//     font-weight:initial;
-}
+// }
 
 *::-webkit-scrollbar { /* WebKit */
     width: 0;
@@ -44,6 +29,7 @@
 }
 
 body{
+    &:extend(.views-font);
     // zoom: var(--zoom);
     position: absolute;
     width: 100%;
@@ -52,6 +38,9 @@ body{
 
     font-size: 11px;
 
+    // font-family: "Geneva";
+    src:url("./fonts/Geneva.woff2");
+
     /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */

front/src/mobile.less

@@ -1,12 +1,24 @@
 @import "./wde/sunboard/sunboard-mobile.less";
+@import "./theme.less";
+@import "./wde/effects.less";
+@import "./wde/widgets/button/button.less";
+
+@font-face{
+    font-family: "Geneva";
+    src:url("./fonts/Geneva.woff2");
+} 
 
 body{
-    zoom: 2;
+    &:extend(.views-font);
+    // zoom: 2;
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0px;
 
+
+    font-size: 12px;
+
     /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -17,6 +29,7 @@ body{
                                   supported by Chrome, Edge, Opera and Firefox */
     touch-action: manipulation;
 
+    background-color: @col-argent;
     // /* Auto layout */
     // display: flex;
     // flex-direction: column;
@@ -24,11 +37,11 @@ body{
     // justify-content: flex-start;
     // margin: 32px;
 
-    background-image:
+    // background-image:
-    linear-gradient(45deg,  @col-argent 25%, transparent 25%),
+    // linear-gradient(45deg,  @col-argent 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%,  @col-argent 75%),
+    // linear-gradient(45deg, transparent 75%,  @col-argent 75%),
-    linear-gradient(45deg, transparent 75%,  @col-argent 75%),
+    // linear-gradient(45deg, transparent 75%,  @col-argent 75%),
-    linear-gradient(45deg,  @col-argent 25%, #777777 25%);    
+    // linear-gradient(45deg,  @col-argent 25%, #777777 25%);    
 
   background-size:10px 10px;       
 
@@ -39,11 +52,12 @@ body{
     position: absolute;
     // background-color: aqua;
     inset: 16px;
-    bottom: 128px;
+    bottom: 100px;
     
-    border-radius: 15px;
+    border-radius: 5px;
-    border: 1px solid #000;
+    border: @eff-border-black;
-    background: #99C;
+    box-shadow: @eff-box-shadow-black;
+    background: @col-gainsboro;
     overflow: hidden;
 }
 
@@ -70,3 +84,27 @@ body{
     height: 100%;
     // position: absolute;
 }
+
+.wde-mobile-button{
+    &:extend(.wde-button);
+    &:active{
+        &:extend(.wde-button:active);
+    }
+    height: 35px;
+    width: 95px;
+    /* Auto layout */
+    display: flex;
+    // padding: 10px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-right: 5px;
+    // gap: 53px;
+    // align-self: stretch;
+}
+
+.wde-mobile-button > .icon{
+    
+    // width: 8rem;
+    // height: 8rem;
+}

front/src/theme.less

@@ -1,10 +1,39 @@
 @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-davys-grey: #555555;
+@col-granite-gray: #666666;
+@col-grey: #808080;
+
 @col-black: #000000;
 @col-white: #FFFFFF;
 @col-raisin-black: #222222;
+
+
+
+@font-face{
+    font-family: "Geneva";
+    src:url("./fonts/Geneva.woff2");
+}
+
+@font-face {
+    font-family: "Charcoal";
+    src: url('./fonts/Charcoal.woff2');
+}
+
+.large-system-font{
+    font-family: "Charcoal";
+    // font-weight: bold;
+    letter-spacing: 0.35px;
+    font-size: 12px;
+}
+.small-system-font{
+    font-family: "Geneva";
+}
+.views-font{
+    font-family: "Geneva";
+}

front/src/wde/effects.less

@@ -41,4 +41,5 @@
 @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-convex-inverted: inset 1px 1px 0px rgba(0, 0, 0, 0.27),inset -1px -1px 0px @col-grey;
 @eff-box-shadow-adjective: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF;

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

@@ -15,7 +15,7 @@
 #icons{
     width: 100%;
     height: 100%;
-    background-color: @col-ceil;
+    // background-color: @col-ceil;
 }
 
 // #down-bar{
@@ -28,31 +28,32 @@
 .apps-list{
     /* Auto layout */
     display: flex;
-    padding: 64px 32px;
+    padding: 64px 16px;
     align-items: flex-start;
     align-content: flex-start;
-    gap: 103px 18px;
+    gap: 64px 0px;
     flex: 1 0 0;
     align-self: stretch;
     flex-wrap: wrap;
 }
 
 .app-icon{
+    // background-color: rgba(0, 255, 255, 0.133);
     width: 100px;
-    height: 100px;
+    // height: 100px;
 
      /* Auto layout */
     display: flex;
-    padding: 4px 8px;
+    // padding: 4px 8px;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }
 
 .app-icon .icon{
-    width: 64px;
+    width: 32px;
-    height: 64px;
+    height: 32px;
-    background-color: beige;
+    // background-color: beige;
 }
 
 .app-icon .lable{

front/src/wde/wde-mobile.js

@@ -18,6 +18,8 @@ export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvir
         this.#sunBoard = new MobileSunboard(this)
         // this.loadWDE()
 
+        document.addEventListener("touchstart", function(){}, true);//For working :active in css
+        
     }
 
     loadWDE(){

front/src/wde/wde.js

@@ -33,7 +33,7 @@ export default class AbstractWebDesktopEnvironment{
     * @returns {Object | undefined} //FIXME
     */
     async _FetchAppManifest(path){
-        // console.log(location)
+        console.log(path)
         // console.log(this.GetApiAddress())
         const params = new URLSearchParams({path: path, mode: "json"})
         const response = await fetch(`/system/loadApp?` + params)

front/src/wde/widgets/button/button.less

@@ -0,0 +1,27 @@
+@import "../../effects.less";
+@import "../../../theme.less";
+
+.wde-button{
+    &:active{
+        background-color: @col-granite-gray;
+        box-shadow: @eff-box-shadow-convex-inverted;
+        // background-color: red;
+    }
+    background-color: @col-gainsboro;
+    box-shadow: @eff-box-shadow-convex;
+    border: @eff-border-black;
+    border-radius: 3px;
+
+
+    height: 20px;
+    width: auto;
+
+}
+
+// .wde-button:active{
+//     background-color: red;
+// }
+
+// .wde-button:hover{
+//     background-color: pink;
+// }

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

@@ -28,8 +28,14 @@
     pointer-events: none;
     white-space: nowrap;
 
-    font-family: "Virtue";
+    &:extend(.large-system-font);
-    letter-spacing: 0.35px;
+    
+    // font-family: "Virtue";
+    // letter-spacing: 0.35px;
+}
+
+.window-frame.Focused .title-bar .lable{
+    color: @col-black;
 }
 
 .window-frame.Focused .title-bar .visual-drag-area{
@@ -39,9 +45,14 @@
     height: 11px;
 }
 
+.title-bar > .icon{
+    // background-color: aqua;
+    width: 16px;
+    height: 16px;
+}
 
 
-.title-bar .button{
+.title-bar > .button{
     width: 11px;
     height: 11px;
     padding: 0%;
@@ -49,6 +60,13 @@
     top: 1px;
     visibility: hidden;
 
+    &: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);
+    }
+
     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,
@@ -61,6 +79,10 @@
     flex-grow: 0;
 }
 
-.Focused .title-bar .button{
+.window-frame.Focused .title-bar > .button{
     visibility:visible;   
 }
+
+// .window-frame.Focused .title-bar > .button:active{
+//     background-color: aqua;
+// }

main.go

@@ -73,7 +73,7 @@ func main() {
 	imgViewerApp := imgviewer.NewImgViewerApp(webfs)
 	blogViewerApp := blogviewer.NewBlogViewerApp(webfs)
 	blogWriterApp := blogwriter.NewBlogWriterApp(webfs)
-	sunBoardApp := sunboard.NewSunboardApp(webfs, appsStorage)
+	sunBoardApp := sunboard.NewSunboardApp(webfs, webde, appsStorage)
 
 	appsStorage.Apps["personal-properties"] = persPropsApp
 	appsStorage.Apps["finder"] = finderApp

templates/base/mobile-desktop.html

@@ -17,10 +17,10 @@
         </div> -->
         <div id="mobile-app-views"></div>
         <div id="controls-bar">
-            <div id="back" class="app-icon Click" >
+            <button id="back" class="wde-mobile-button Click" >
-                <img class="icon NoClick" src="">
+                <img class="icon NoClick" src="/system/libs/img/get?path=/Icons/Hand.icn/color/8.png">
                 <div class="lable NoClick">Back</div>
-            </div>  
+            </button>  
             <!-- <div class="app-icon Click" >
                 <img class="icon NoClick" src="">
                 <div class="lable NoClick">Test</div>

templates/finder/admin-app.html

@@ -1,13 +1,5 @@
 {{ define "finder/admin-app.tmpl" }}
-    <div class="title-bar DragArea">
+    {{template "wde-widgets/window-title-bar.tmpl" .TitleBarConfig}}
-        <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">
          

templates/personal-properties/app.html

@@ -1,10 +1,5 @@
 {{ define "personal-properties/app.tmpl" }}
-	<div class="title-bar DragArea">
+	{{template "wde-widgets/window-title-bar.tmpl" .TitleBarConfig}}
-		<button id="closeWindowButton" class="Button" title="Close Window"></button>
-		<div id="Drag" class="visual-drag-area"></div>
-		<div class="Lable">About me</div>
-		<div id="Drag" class="visual-drag-area"></div>
-	</div>
 	<div class="content-border">
 		<div class="PersPropsContent">
 			<div class="PropsView">
@@ -12,7 +7,8 @@
 					<div class="Links">
 						{{ range $link := .Links }}
 							<a href="{{$link.Url}}" target="_blank">
-								<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" alt="{{$link.Text}}">
+								<div class="link-lable">{{$link.Text}}</div>
+								<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" >
 							</a>
 						{{ end }}
 					</div>

templates/personal-properties/mobile-app.html

@@ -6,7 +6,8 @@
 				<div class="Links">
 					{{ range $link := .Links }}
 						<a href="{{$link.Url}}" target="_blank">
-							<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" alt="{{$link.Text}}">
+							<div class="link-lable">{{$link.Text}}</div>
+							<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" >
 						</a>
 					{{ end }}
 				</div>

templates/wde-widgets/window-title-bar.html

@@ -0,0 +1,14 @@
+{{ define "wde-widgets/window-title-bar.tmpl" }}
+    <div class="title-bar DragArea">
+        {{if .CloseButton}}
+            <button id="closeWindowButton" class="button" title="Close Window"></button>
+        {{end}}
+        <div id="Drag" class="visual-drag-area"></div>
+        <!-- TODO:Disable dragging of icon -->
+        <img class="icon">
+        <div class="lable">
+            {{.Lable}}
+        </div>
+        <div id="Drag" class="visual-drag-area"></div>
+    </div>
+{{ end }}

wde/titlebar.go

@@ -0,0 +1,6 @@
+package wde
+
+type TitleBarConfig struct {
+	Lable       string
+	CloseButton bool
+}

wde/wde.go

@@ -37,19 +37,23 @@ func (w *WDE) RenderFileTileView(directory string, host string) (gin.H, error) {
 
 func (w *WDE) GetIconPathForFile(fileHeader *webfilesystem.FileHeader, parentDir string, size string) string {
 	if fileHeader.Icon != "" {
-		return "/system/libs/img/icon/get?path=" + fileHeader.Icon
+		return "/system/libs/img/icon/get?path=" + fileHeader.Icon + "&size=" + size
 	}
 
-	switch fileHeader.GetType() {
+	extension := fileHeader.GetExtension()
-	case "directory":
+
-		return "/system/libs/img/icon/get?path=/Icons2/GenericFolder.icn&size=" + size
+	switch true {
-	case "jpeg":
+	case extension == "app":
+		return "/system/libs/img/icon/get?path=/Icons/GenericApp.icn&size=" + size
+	case extension == "jpeg":
 		fallthrough
-	case "png":
+	case extension == "png":
 		fallthrough
-	case "jpg":
+	case extension == "jpg":
-		return "/system/libs/img/icon/get?path=" + path.Join(parentDir, fileHeader.Name) + "&size=" + size
+		return "/system/libs/img/get?path=" + path.Join(parentDir, fileHeader.Name) //+ "&size=" + size
+	case fileHeader.GetType() == "directory":
+		return "/system/libs/img/icon/get?path=/Icons/GenericFolder.icn&size=" + size
 	default:
-		return "/system/libs/img/icon/get?path=/Icons2/GenericFolder.icn&size=" + size
+		return "/system/libs/img/icon/get?path=/Icons/GenericDocument.icn&size=" + size
 	}
 }

webfilesystem/webfilesystem.go

@@ -41,6 +41,11 @@ func (fh *FileHeader) GetType() string {
 	return fh.Type
 }
 
+func (fh *FileHeader) GetExtension() string {
+
+	return strings.Split(fh.Name, ".")[len(strings.Split(fh.Name, "."))-1]
+}
+
 type BinaryFileData struct {
 	MongoId primitive.ObjectID `bson:"_id"  json:"-"`
 	Bin     []byte             `bson:"bin" json:"-"`