update ignore

.env

@@ -1,5 +0,0 @@
-MONGO_CONNECT=mongodb://localhost:27017
-DATABASE=personal-website
-COLLECTION_WEBFS=webfs2
-PUBLIC_PORT=7070
-PRIVATE_PORT=8080

.gitignore

@@ -22,8 +22,9 @@
 go.work
 
 /__debug_bin
-/.env
+.env
 
+front/dist/*
 
 front/node_modules
 .parcel-cache

apps/aboutme/personalprops.go

@@ -38,6 +38,9 @@ func NewAboutMeApp(webFs *webfilesystem.WebFileSystem) *AboutMeApp {
 		titleBarConfig: wde.TitleBarConfig{
 			Lable:       "About Me",
 			CloseButton: true,
+			HasIcon:     true,
+			IconPath:    "/Icons/GenericApp.icn",
+			IconSize:    "16",
 		},
 		manifest: manifest,
 	}

apps/finder/finder.go

@@ -32,6 +32,9 @@ func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication
 		titleBarConfig: wde.TitleBarConfig{
 			Lable:       "Finder",
 			CloseButton: true,
+			HasIcon:     true,
+			IconPath:    "/Icons/GenericFolder.icn",
+			IconSize:    "16",
 		},
 		manifest: manifest,
 	}

front/dist/apps/about-me/about-me.css

@@ -1,3 +1,23 @@
+@font-face {
+  font-family: Geneva;
+  src: url("../../Geneva.41461b69.woff2");
+}
+
+@font-face {
+  font-family: Charcoal;
+  src: url("../../Charcoal.cb9045e5.woff2");
+}
+
+.large-system-font, .ShortBio > .Text > .Name, .Island .Title, .Island .Key {
+  letter-spacing: .35px;
+  font-family: Charcoal;
+  font-size: 12px;
+}
+
+.small-system-font, .views-font {
+  font-family: Geneva;
+}
+
 .PersPropsContent {
   flex-direction: row;
   justify-content: center;
@@ -26,13 +46,9 @@
 
 .PropertiesList .ShortBio {
   flex-direction: row;
-  flex: 1 0 auto;
-  order: 0;
-  align-self: stretch;
   align-items: center;
   gap: 15px;
-  margin-right: 20px;
+  width: 100%;
-  padding: 0;
   display: flex;
 }
 
@@ -53,22 +69,23 @@
   display: flex;
 }
 
-.ShortBio .Name {
-  letter-spacing: .35px;
-  font-family: Virtue;
-}
-
 .PropertiesList .Links {
-  align-items: left;
+  flex-direction: column;
-  flex-direction: row;
+  justify-content: center;
-  gap: 4px;
+  align-items: end;
   width: auto;
   height: auto;
   padding: 0;
   display: flex;
-  position: absolute;
+}
-  top: 27px;
+
-  right: 14px;
+.Links > a {
+  flex-direction: row;
+  justify-content: center;
+  align-items: end;
+  gap: 2px;
+  padding: 0;
+  display: flex;
 }
 
 .PropertiesList .Links .Link {
@@ -85,20 +102,14 @@
 }
 
 .Island .Title {
-  letter-spacing: .35px;
   background-color: #ddd;
   max-width: 100%;
-  font-family: Virtue;
   display: inline-block;
   position: relative;
   top: -9px;
   left: 12px;
 }
 
-.Focused .Island .Title {
-  background-color: #ccc;
-}
-
 .Island .Content {
   flex-direction: column;
   justify-content: center;
@@ -119,12 +130,9 @@
 }
 
 .Island .Key {
-  letter-spacing: .35px;
   text-align: end;
   white-space: nowrap;
   width: 34%;
-  font-family: Virtue;
-  font-size: 11px;
   position: relative;
   top: -1.5px;
 }

front/dist/apps/about-me/about-me.css.map

@@ -1 +1 @@
-{"mappings":"AAwBA;;;;;;;;;;AAYA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;;;;;;;AAoBA;;;;;;AAMA;;;;;;;;;;;AAkBA;;;;;AAMA;;;;;;;;;;;;;AAgBA;;;;;AAMA;;;;;;;;AAeA;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;AAWA;;;;;;;;;;AAUA;;;;;;;;;;;AAaA;;;;;;;;AAUA","sources":["src/apps/about-me/about-me.less"],"sourcesContent":["/* TODO Move this to body? */\n/*.ScrollContent {\n    width: 100%;\n    height: 100%;\n    overflow: scroll;\n    overflow-x: hidden;\n    /* Firefox */\n    /* scrollbar-width: none;  */\n    /* Internet Explorer 10+ */\n    /* -ms-overflow-style: none;   */\n\n    /* Auto layout */\n    /*display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0px;\n}*/\n\n/* WebKit */\n/* .ScrollContent::-webkit-scrollbar { \n    width: 0;\n    height: 0;\n} */\n.PersPropsContent{\n    width: 100%;\n    height: 100%;\n\n     /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0px;\n}\n\n.PersPropsContent .PropsView{\n    /* background-color: rebeccapurple; */\n    width: 100%;\n    height: auto;\n}\n.PropertiesList{\n    /* width: 100%;\n    height: auto; */\n\n    /* Inside auto layout */\n    order: 0;\n    align-self: flex-start;\n    flex-grow: 0;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 12px;\n    gap:16px;\n}\n\n\n.PropertiesList .ShortBio{\n    /* width: 100%;\n    height: auto; */\n    /* margin-right: -20px; */\n\n     /* Inside auto layout */\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 1;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    margin-right: 20;\n    gap:15px;\n}\n\n.ShortBio .Image{\n    width: 48px;\n    height: 48px;\n    padding-left: 10px;\n}\n\n.ShortBio .Text{\n    /* width: 100%;\n    height: auto; */\n\n    /* Inside auto layout */\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 1;\n    \n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    padding: 0px;\n    gap:1px;\n}\n\n.ShortBio .Name{\n    font-family: \"Virtue\";\n    /* FIXME */\n    letter-spacing: 0.35px; \n}\n\n.PropertiesList .Links {\n    position: absolute;\n    right: 14px;\n    top: 27px;\n    /* background-color: aqua; */\n    height: auto;\n    width: auto;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    align-items: left;\n    padding: 0px;\n    gap:4px;\n}\n\n.PropertiesList .Links .Link {\n    /* background-color:brown; */\n    width:  16px;\n    height: 16px;\n}\n\n.PropertiesList .Island{\n    width: 100%;\n    height: auto;\n    border: 1px solid #888888;\n    box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;\n    padding-bottom: 10px;\n\n    /* Auto layout */\n    /* display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px;\n    gap:1px; */\n}\n\n.Island .Title {\n    font-family: \"Virtue\";\n    /* FIXME */\n    letter-spacing: 0.35px; \n    position:relative;\n    display: inline-block;\n    max-width: 100%;\n    background-color: #DDDDDD;\n    left: 12px;\n    top: -9px;\n}\n\n.Focused .Island .Title{\n    background-color: #CCCCCC;\n}\n\n.Island .Content{\n    width: 100%;\n    /* top: 0px; */\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 0px;\n    gap: 12px;\n}\n\n.Island .Row{\n    margin-left: 12px;\n    margin-right: 12px;\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    padding: 0px;\n    gap: 5px;\n}\n.Island .Key{\n    position: relative;\n    font-family: \"Virtue\";\n    font-size: 11px;\n    letter-spacing: 0.35px;\n    text-align: end;\n    width: 34%;\n    white-space: nowrap;\n    top: -1.5px;\n\n    /* font-weight: bold; */\n}\n\n.Island .KeyComment{\n    /* color: rgb(129, 129, 129); TODO*/\n    color: #646464;\n    font-size: 9px;\n    font-style: italic;\n    text-align: end;\n    white-space:normal;\n    /* filter: drop-shadow(-.5px -.5px 0px #616161); */\n}\n\n.Island .Values{\n    width: 55%;\n    display: flex;\n    flex-direction: column;\n    justify-content: left;\n    padding: 0px;\n    gap: 5px;\n\n}\n\n.Values .Value{\n    /* width: 55%; */\n\n}"],"names":[],"version":3,"file":"about-me.css.map","sourceRoot":"/__parcel_source_root/"}
+{"mappings":"ACiBA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AD/BA;;;;;;;;;;AAYA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;;;;;AAuBA;;;;;;;;;;AAiBA;;;;;;;;;AAeA;;;;;AAMA;;;;;;;;AAeA;;;;;;;;;AAWA;;;;;;;;;AAWA;;;;;;;;;;AAUA;;;;;;;;AAcA;;;;;;;;AAUA","sources":["src/apps/about-me/about-me.less","src/theme.less"],"sourcesContent":["@import \"../../theme.less\";\n\n.PersPropsContent{\n    width: 100%;\n    height: 100%;\n\n     /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0px;\n}\n\n.PersPropsContent .PropsView{\n    /* background-color: rebeccapurple; */\n    width: 100%;\n    height: auto;\n}\n.PropertiesList{\n    /* width: 100%;\n    height: auto; */\n\n    /* Inside auto layout */\n    order: 0;\n    align-self: flex-start;\n    flex-grow: 0;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 12px;\n    gap:16px;\n}\n\n\n.PropertiesList .ShortBio{\n    /* width: 100%;\n    height: auto; */\n    /* margin-right: -20px; */\n\n    // background-color: aquamarine;\n    /* Inside auto layout */\n    width: 100%;\n    // flex: none;\n    // order: 0;\n    // align-self: stretch;\n    // flex-grow: 1;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    // padding: 0px;\n    // margin-right: 20;\n    gap:15px;\n}\n\n.ShortBio .Image{\n    width: 48px;\n    height: 48px;\n    padding-left: 10px;\n}\n\n.ShortBio .Text{\n    /* width: 100%;\n    height: auto; */\n\n    /* Inside auto layout */\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 1;\n    \n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    padding: 0px;\n    gap:1px;\n}\n\n.ShortBio > .Text > .Name{\n    &:extend(.large-system-font);\n    // background-color: aqua;\n}\n\n.PropertiesList .Links {\n    // position: absolute;\n    // right: 14px;\n    // top: 27px;\n    // background-color: aqua;\n    height: auto;\n    width: auto;\n\n    // background-color: aqua;\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    align-items: end;\n    justify-content: center;\n    padding: 0px;\n    // gap:4px;\n}\n.Links > a{\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    align-items: end;\n    justify-content: center;\n    padding: 0px;\n    gap: 2px;\n}\n.Links > a > .link-lable{\n    // background-color: aqua;\n    // line-height: 60px;\n    // display:table\n}\n\n.PropertiesList .Links .Link {\n    /* background-color:brown; */\n    width:  16px;\n    height: 16px;\n}\n\n.PropertiesList .Island{\n    width: 100%;\n    height: auto;\n    border: 1px solid #888888;\n    box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;\n    padding-bottom: 10px;\n\n    /* Auto layout */\n    /* display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px;\n    gap:1px; */\n}\n\n.Island .Title {\n    //FIXME\n    &:extend(.large-system-font);\n    position:relative;\n    display: inline-block;\n    max-width: 100%;\n    background-color: #DDDDDD;\n    left: 12px;\n    top: -9px;\n}\n\n.Island .Content{\n    width: 100%;\n    /* top: 0px; */\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 0px;\n    gap: 12px;\n}\n\n.Island .Row{\n    margin-left: 12px;\n    margin-right: 12px;\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    padding: 0px;\n    gap: 5px;\n}\n.Island .Key{\n    position: relative;\n    &:extend(.large-system-font);\n    // font-family: \"Virtue\";\n    // font-size: 11px;\n    // letter-spacing: 0.35px;\n    text-align: end;\n    width: 34%;\n    white-space: nowrap;\n    top: -1.5px;\n\n    /* font-weight: bold; */\n}\n\n.Island .KeyComment{\n    /* color: rgb(129, 129, 129); TODO*/\n    color: #646464;\n    font-size: 9px;\n    font-style: italic;\n    text-align: end;\n    white-space:normal;\n    /* filter: drop-shadow(-.5px -.5px 0px #616161); */\n}\n\n.Island .Values{\n    width: 55%;\n    display: flex;\n    flex-direction: column;\n    justify-content: left;\n    padding: 0px;\n    gap: 5px;\n\n}\n\n.Values .Value{\n    /* width: 55%; */\n\n}",null],"names":[],"version":3,"file":"about-me.css.map","sourceRoot":"/__parcel_source_root/"}

front/dist/apps/finder/finder.css

@@ -1,6 +1,55 @@
-.FinderContent {
+@font-face {
+  font-family: Geneva;
+  src: url("../../Geneva.41461b69.woff2");
+}
+
+@font-face {
+  font-family: Charcoal;
+  src: url("../../Charcoal.cb9045e5.woff2");
+}
+
+.large-system-font {
+  letter-spacing: .35px;
+  font-family: Charcoal;
+  font-size: 12px;
+}
+
+.small-system-font, .views-font {
+  font-family: Geneva;
+}
+
+.adjective {
+  border: 1px solid #555;
+}
+
+.convex {
+  box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff;
+}
+
+.border .grey {
+  border: 1px solid #555;
+}
+
+.border .black {
+  border: 1px solid #000;
+}
+
+.shadow .grey {
+  box-shadow: 1px 1px #555;
+}
+
+.shadow .black {
+  box-shadow: 1px 1px #000;
+}
+
+.rows-fill-shadowed {
+  filter: drop-shadow(1px 1px #777);
+  background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px;
+}
+
+.finder-content {
   flex-direction: column;
-  justify-content: center;
+  justify-content: start;
   align-items: flex-start;
   width: 100%;
   height: 100%;
@@ -8,20 +57,18 @@
   display: flex;
 }
 
-.FinderContent .ToolBar {
+.finder-content > .tool-bar {
-  background-color: #eee;
   border-bottom: 1px solid #555;
   width: 100%;
-  height: 20px;
+  min-height: 20px;
 }
 
-.Focused .FinderContent .ToolBar {
+.window-frame.Focused .tool-bar {
-  background-color: #ddd;
   border-bottom: 1px solid #000;
+  box-shadow: inset -1px -1px #00000045, inset 1px 1px #fff;
 }
 
-.FinderContent .FinderFileView {
+.finder-content > .file-view-container {
-  background-color: #fff;
   flex-direction: row;
   justify-content: center;
   align-items: flex-start;

front/dist/apps/finder/finder.css.map

@@ -1 +1 @@
-{"mappings":"AAAA;;;;;;;;;;AAYA;;;;;;;AAOA;;;;;AAOA","sources":["src/apps/finder/finder.less"],"sourcesContent":[".FinderContent {\n    width: 100%;\n    height: 100%;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0px;\n}\n\n.FinderContent .ToolBar{\n    width: 100%;\n    height: 20px;\n    border-bottom: 1px solid #555555;\n    background-color: #EEEEEE;\n}\n\n.Focused .FinderContent .ToolBar{\n    border-bottom: 1px solid #000000;\n    background-color: #DDDDDD;\n}\n\n\n\n.FinderContent .FinderFileView{\n    width: 100%;\n    height: 100%;\n\n    background-color: #FFFFFF;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0px;\n}"],"names":[],"version":3,"file":"finder.css.map","sourceRoot":"/__parcel_source_root/"}
+{"mappings":"ACiBA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;ACjCA;;;;AAIA;;;;AAMA;;;;AAAA;;;;AAUA;;;;AAAA;;;;AAWA;;;;;AF5BA;;;;;;;;;;AAYA;;;;;;AAMA;;;;;AAKA","sources":["src/apps/finder/finder.less","src/theme.less","src/wde/effects.less"],"sourcesContent":["@import \"../../theme.less\";\n@import \"../../wde/effects.less\";\n\n.finder-content {\n    width: 100%;\n    height: 100%;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: column;\n    justify-content: start;\n    align-items: flex-start;\n    padding: 0px;\n}\n\n.finder-content > .tool-bar{\n    width: 100%;\n    min-height: 20px;\n    border-bottom: @eff-border-grey;\n}\n\n.window-frame.Focused .tool-bar{\n    border-bottom: 1px solid #000000;\n    box-shadow: @eff-box-shadow-convex;\n}\n\n.finder-content > .file-view-container{\n    width: 100%;\n    height: 100%;\n\n    // background-color: #FFFFFF;\n\n    /* Auto layout */\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: flex-start;\n    padding: 0px;\n}",null,null],"names":[],"version":3,"file":"finder.css.map","sourceRoot":"/__parcel_source_root/"}

front/dist/desktop.css

@@ -1,7 +1,11 @@
-.WdePrimitives.AdjectiveElement {
+.WdePrimitives .adjective {
   border: 1px solid #555;
 }
 
+.WdePrimitives .black-border {
+  border: 1px solid #000;
+}
+
 .FileTileView {
   width: 100%;
   height: 100%;
@@ -41,13 +45,6 @@
 }
 
 .FileTileView .Icon {
-  image-rendering: optimizespeed;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: -o-crisp-edges;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: pixelated;
-  image-rendering: optimize-contrast;
-  -ms-interpolation-mode: nearest-neighbor;
   background-size: cover;
   width: 32px;
   height: 32px;
@@ -67,170 +64,105 @@
   background-color: #000;
 }
 
-.WindowFrame {
+.scrollbar-place {
-  background: #ddd;
+  border-left: 1px solid #555;
-  border: 1px solid #555;
-  flex-direction: column;
   flex: 1 0 auto;
-  order: 1;
-  align-self: stretch;
-  align-items: flex-start;
-  gap: 4px;
-  padding: 2px 6px 4px 4px;
-  display: flex;
-  position: absolute;
-}
-
-.WindowFrame.Focused {
-  background-color: #ccc;
-  border: 1px solid #000;
-}
-
-.WindowFrameShadow {
-  box-shadow: 2px 2px #555;
-}
-
-.WindowFrameShadow.Focused {
-  box-shadow: 2px 2px #000;
-}
-
-.ConvexElement.Focused {
-  box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff;
-}
-
-.AdjectiveElement {
-  border: 1px solid #555;
-}
-
-.Focused .AdjectiveElement {
-  border: 1px solid #000;
-  box-shadow: -1px -1px #00000040, 1px 1px #fff;
-}
-
-.AdjectiveHorizontalLine {
-  border-top: 1px solid #00000040;
-  border-bottom: 1px solid #fff;
-  width: 100%;
-  height: 0;
-}
-
-.AdjectiveHorizontalLine:last-child {
-  visibility: hidden;
-  height: 0%;
-}
-
-.WindowFrame .TitleBar {
-  flex-direction: row;
-  flex: none;
   order: 0;
-  justify-content: center;
   align-self: stretch;
-  align-items: center;
+  width: 14px;
-  gap: 5px;
-  width: 100%;
-  height: 13px;
-  padding: 0;
-  display: flex;
-}
-
-.WindowFrame .TitleBar .Lable {
-  color: #777;
-  pointer-events: none;
-  white-space: nowrap;
-  letter-spacing: .35px;
-  font-family: Virtue;
-  position: relative;
-  top: 1px;
-}
-
-.WindowFrame.Focused .TitleBar .Lable {
-  color: #000;
-}
-
-.WindowFrame .TitleBar .Button {
-  visibility: hidden;
-  background: linear-gradient(135deg, #999 18.18%, #fff 81.82%);
-  border: 1px solid #222;
-  flex: none;
-  order: 0;
-  width: 11px;
-  height: 11px;
-  padding: 0%;
-  position: relative;
-  top: 1px;
-  box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040, inset 1px 1px #ffffff80, inset -1px -1px #00000045;
-}
-
-.WindowFrame.Focused .TitleBar .Button {
-  visibility: visible;
-}
-
-.WindowFrame .TitleBar .Button:active {
-  background-color: #0006;
-  box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040;
-}
-
-.Focused .VisualDragArea {
-  pointer-events: none;
-  filter: drop-shadow(1px 1px #777);
-  background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px;
-  width: 100%;
-  height: 11px;
-}
-
-.MobileContentBorder {
-  background-color: #ddd;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100%;
   height: 100%;
-  padding: 0;
+  bottom: 0;
-  display: flex;
+  right: 0;
   overflow: hidden;
 }
 
-.MobileApplicationWindow {
+.Focused .active .scrollbar-place {
-  flex-direction: column;
+  background-color: #aaa;
-  align-items: flex-start;
+  border-left: 1px solid #000;
-  gap: 4px;
+  box-shadow: inset -1px 0 #ffffff4a, inset -2px 0 #ffffff30, inset 1px 1px #00000024, inset 2px 2px #00000030;
-  width: 100%;
+}
-  height: 100%;
+
+.scroll-element {
+  visibility: hidden;
+  background: #99f;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  gap: 5px;
+  width: 14px;
+  height: 31px;
+  padding: 0;
   display: flex;
-  position: absolute;
+  position: relative;
-  top: 0;
+  box-shadow: 0 -1px #000, 0 1px #000, 0 2px #00000021, 0 3px #00000030, inset 0 1px #ffffff80, inset 1px 0 #ffffff80, inset -1px -1px #6666cce8;
-  left: 0;
 }
 
-.MobileWindowFrameBottomBar {
+.Focused .active .scroll-element {
-  flex: none;
+  visibility: visible;
-  order: 0;
-  align-self: stretch;
-  width: 100%;
-  height: 20px;
 }
 
-.MobileWindowFrameBottomBarButton {
+.drag-element {
-  background: linear-gradient(135deg, #999 18.18%, #fff 81.82%);
-  border: 1px solid #222;
-  flex: none;
-  order: 0;
-  width: auto;
-  min-width: 11px;
-  height: 15px;
-  padding: 0 4px;
-  position: absolute;
-  right: 4px;
-  box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040, inset 1px 1px #ffffff80, inset -1px -1px #00000045;
-}
-
-.MobileWindowFrameBottomBar .MobileLable {
   pointer-events: none;
-  white-space: nowrap;
+  filter: drop-shadow(1px 1px #339);
-  letter-spacing: .35px;
+  background: linear-gradient(#0000 0%, #ccf 0% 50%, #0000 50%) 0 0 / 2px 2px;
-  font-family: Virtue;
+  width: 7px;
-  position: absolute;
+  height: 7px;
-  left: 50%;
+  margin-left: -1px;
+}
+
+.ScrollContent {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.ScrollContent::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.adjective {
+  border: 1px solid #555;
+}
+
+.convex {
+  box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff;
+}
+
+.border .grey {
+  border: 1px solid #555;
+}
+
+.border .black {
+  border: 1px solid #000;
+}
+
+.shadow .grey {
+  box-shadow: 1px 1px #555;
+}
+
+.shadow .black {
+  box-shadow: 1px 1px #000;
+}
+
+.rows-fill-shadowed, .window-frame.Focused .title-bar .visual-drag-area {
+  filter: drop-shadow(1px 1px #777);
+  background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px;
+}
+
+.wde-button {
+  background-color: #ddd;
+  border: 1px solid #000;
+  border-radius: 3px;
+  width: auto;
+  height: 20px;
+  box-shadow: inset -1px -1px #00000045, inset 1px 1px #fff;
+}
+
+.wde-button:active {
+  background-color: #666;
+  box-shadow: inset 1px 1px #00000045, inset -1px -1px gray;
 }
 
 .ContentBorder {
@@ -273,6 +205,121 @@
   font-family: Virtue;
 }
 
+@font-face {
+  font-family: Geneva;
+  src: url("Geneva.41461b69.woff2");
+}
+
+@font-face {
+  font-family: Charcoal;
+  src: url("Charcoal.cb9045e5.woff2");
+}
+
+.large-system-font, .title-bar .lable {
+  letter-spacing: .35px;
+  font-family: Charcoal;
+  font-size: 12px;
+}
+
+.small-system-font, .views-font, body {
+  font-family: Geneva;
+}
+
+.window-frame {
+  background-color: #ddd;
+  border: 1px solid #555;
+  flex-direction: column;
+  flex: 1 0 auto;
+  order: 1;
+  align-self: stretch;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 2px 6px 4px 4px;
+  display: flex;
+  position: absolute;
+  box-shadow: 1px 1px #555;
+}
+
+.window-frame.Focused {
+  background-color: #ccc;
+  border: 1px solid #000;
+  box-shadow: 1px 1px #555, inset -1px -1px #00000045, inset 1px 1px #fff;
+}
+
+.content-border {
+  background-color: #eee;
+  border: 1px solid #555;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.Focused .content-border {
+  background-color: #ddd;
+  border: 1px solid #000;
+  box-shadow: -1px -1px #00000040, 1px 1px #fff;
+}
+
+.title-bar {
+  flex-direction: row;
+  flex: none;
+  order: 0;
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  height: 13px;
+  padding: 0;
+  display: flex;
+}
+
+.title-bar .lable {
+  color: gray;
+  pointer-events: none;
+  white-space: nowrap;
+  position: relative;
+  top: 1px;
+}
+
+.window-frame.Focused .title-bar .lable {
+  color: #000;
+}
+
+.window-frame.Focused .title-bar .visual-drag-area {
+  pointer-events: none;
+  width: 100%;
+  height: 11px;
+}
+
+.title-bar > .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.title-bar > .button {
+  visibility: hidden;
+  background: linear-gradient(135deg, #999 18.18%, #fff 81.82%);
+  border: 1px solid #222;
+  flex: none;
+  order: 0;
+  width: 11px;
+  height: 11px;
+  padding: 0%;
+  position: relative;
+  top: 1px;
+  box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040, inset 1px 1px #ffffff80, inset -1px -1px #00000045;
+}
+
+.title-bar > .button:active {
+  background-color: #0006;
+  box-shadow: .5px .5px 0 .5px #fff, -.5px -.5px 0 .5px #00000040;
+}
+
+.window-frame.Focused .title-bar > .button {
+  visibility: visible;
+}
+
 .NoClick {
   pointer-events: none;
 }
@@ -281,20 +328,13 @@
   pointer-events: all;
 }
 
-* {
-  font-family: Verdana, Geneva, sans-serif;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: initial;
-}
-
 ::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 
 body {
-  zoom: var(--zoom);
+  src: url("Geneva.41461b69.woff2");
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
@@ -303,6 +343,7 @@ body {
   width: 100%;
   height: 100%;
   margin: 0;
+  font-size: 11px;
   position: absolute;
 }
 

front/dist/desktop.css.map

@@ -1 +1 @@
-{"mappings":"ACAA;;;;ACAA;;;;;AASA;;;;AAKA;;;;;;;;;;;;;AAqBA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;;;;;;;;AAeA;;;;AAIA;;;;AAIA;;;;;;ACjFA;;;;;;;;;;;;;;AAwBA;;;;;AAKA;;;;AAKA;;;;AAIA;;;;AAMA;;;;AAIA;;;;;AAQA;;;;;;;AAOA;;;;;AAMA;;;;;;;;;;;;;;AAmBA;;;;;;;;;;AAYA;;;;AAKA;;;;;;;;;;;;;;AAoBA;;;;AAIA;;;;;AAOA;;;;;;;;AASA;;;;;;;;;;;;AAsBA;;;;;;;;;;;;AAcA;;;;;;;;AAkBA;;;;;;;;;;;;;;AAqBA;;;;;;;;;AC5NA;;;;;;AAUA;;;;;;;;AAUA;;;;;;;;;AAgBA;;;;;AAYA;;;;;AAKA;;;;;;;AJ/BA;;;;AAGA;;;;AAGA;;;;;;;AAOA;;;;;AAKA;;;;;;;;;;;;;AAkBA;;;;;;;AAOA;;;;;;AAOA","sources":["src/desktop.less","src/wde/primitives.less","src/wde/widgets/file-view/file-view.less","src/wde/legacy-ui.less","src/wde/widgets/basic-widgets.less"],"sourcesContent":["@import \"./wde/primitives.less\";\n@import \"./wde/widgets/file-view/file-view.less\";\n@import \"./wde/legacy-ui.less\";\n@import \"./wde/widgets/basic-widgets.less\";\n@import \"./theme.less\";\n\n// @font-face{\n//     font-family: \"Virtue\";\n//     src:url(\"/res/dev-fs/fonts/virtue.ttf\");\n// }\n\n/* @font-face{\n    font-family: \"Virtue\";\n    src:url(\"/res/dev-fs/fonts/virtue.ttf\")\n} */\n\n/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {\n    html {\n      zoom: 3\n    }\n  } */\n\n.NoClick {\n    pointer-events: none;\n}\n.Click {\n    pointer-events: all;\n}\n*{\n    font-family: Verdana, Geneva, sans-serif;\n    font-size: 11px;\n    font-style: normal;\n    font-weight:initial;\n}\n\n*::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n}\n\nbody{\n    zoom: var(--zoom);\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 0px;\n\n    /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none; /* Safari */\n     -khtml-user-select: none; /* Konqueror HTML */\n       -moz-user-select: none; /* Old versions of Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n            user-select: none; /* Non-prefixed version, currently\n                                  supported by Chrome, Edge, Opera and Firefox */\n    touch-action: manipulation;\n}\n\n#applications{\n    position: static;\n    width: 0px;\n    height: 0px;\n    visibility: hidden;\n}\n\n#windows-layer {\n    width: 0px;\n    height: 0px;\n    /* position: fixed; */\n    position: static;\n}\n\n#desktop-layer{\n    position: fixed;\n    /* margin: 0px; */\n    width: 100%;\n    height: 100%;\n    background-color: @col-ceil;\n}",null,null,null,null],"names":[],"version":3,"file":"desktop.css.map","sourceRoot":"/__parcel_source_root/"}
+{"mappings":"ACAA;;;;AAAA;;;;ACCA;;;;;AAWA;;;;AAKA;;;;;;;;;;;;;AAqBA;;;;;AAKA;;;;;;;;;;;AAkBA;;;;;;AAeA;;;;AAIA;;;;AAIA;;;;;;ACrEA;;;;;;;;;;;;AAsBA;;;;;;AASA;;;;;;;;;;;;;;;AAyBA;;;;AAIA;;;;;;;;;AAeA;;;;;;;AAgBA;;;;;AC1GA;;;;AAIA;;;;AAMA;;;;AAAA;;;;AAUA;;;;AAAA;;;;AAWA;;;;;AE5BA;;;;;;;;;AACI;;;;;ACJJ;;;;;;AAUA;;;;;;;;AAUA;;;;;;;;;AAgBA;;;;;AAYA;;;;;AAKA;;;;;;;ACpCA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AC9BA;;;;;;;;;;;;;;;AAyBA;;;;;;AAOA;;;;;;;;AAUA;;;;;;AJ1CA;;;;;;;;;;;;;;AAmBA;;;;;;;;AAcA;;;;AAIA;;;;;;AAOA;;;;;AAOA;;;;;;;;;;;;;;AAQI;;;;;AAmBJ;;;;ALvEA;;;;AAGA;;;;AAYA;;;;;AAKA;;;;;;;;;;;;;;AAwBA;;;;;;;AAOA;;;;;;AAOA","sources":["src/desktop.less","src/wde/primitives.less","src/wde/widgets/file-view/file-view.less","src/wde/widgets/scrollbar/scrollbar.less","src/wde/effects.less","src/wde/widgets/title-bar/title-bar.less","src/wde/widgets/button/button.less","src/wde/widgets/basic-widgets.less","src/theme.less","src/wde/window-frame.less"],"sourcesContent":["@import \"./wde/primitives.less\";\n@import \"./wde/widgets/file-view/file-view.less\";\n@import \"./wde/widgets/scrollbar/scrollbar.less\";\n@import \"./wde/widgets/button/button.less\";\n// @import \"./wde/legacy-ui.less\";\n@import \"./wde/widgets/basic-widgets.less\";\n@import \"./theme.less\";\n@import \"./wde/window-frame.less\";\n@import \"./wde/widgets/title-bar/title-bar.less\";\n\n.NoClick {\n    pointer-events: none;\n}\n.Click {\n    pointer-events: all;\n}\n// .DragArea\n\n// *{\n//     font-family: Verdana, Geneva, sans-serif;\n//     font-size: 11px;\n//     font-style: normal;\n//     font-weight:initial;\n// }\n\n*::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n}\n\nbody{\n    &:extend(.views-font);\n    // zoom: var(--zoom);\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 0px;\n\n    font-size: 11px;\n\n    // font-family: \"Geneva\";\n    src:url(\"./fonts/Geneva.woff2\");\n\n    /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none; /* Safari */\n     -khtml-user-select: none; /* Konqueror HTML */\n       -moz-user-select: none; /* Old versions of Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n            user-select: none; /* Non-prefixed version, currently\n                                  supported by Chrome, Edge, Opera and Firefox */\n    touch-action: manipulation;\n}\n\n#applications{\n    position: static;\n    width: 0px;\n    height: 0px;\n    visibility: hidden;\n}\n\n#windows-layer {\n    width: 0px;\n    height: 0px;\n    /* position: fixed; */\n    position: static;\n}\n\n#desktop-layer{\n    position: fixed;\n    /* margin: 0px; */\n    width: 100%;\n    height: 100%;\n    background-color: @col-ceil;\n}",null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"desktop.css.map","sourceRoot":"/__parcel_source_root/"}

front/dist/mobile.css

@@ -1,7 +1,11 @@
-.WdePrimitives.AdjectiveElement {
+.WdePrimitives .adjective {
   border: 1px solid #555;
 }
 
+.WdePrimitives .black-border {
+  border: 1px solid #000;
+}
+
 #mobile-sunboard {
   flex-direction: column;
   justify-content: flex-start;
@@ -12,7 +16,6 @@
 }
 
 #icons {
-  background-color: #99c;
   width: 100%;
   height: 100%;
 }
@@ -23,8 +26,8 @@
   align-content: flex-start;
   align-self: stretch;
   align-items: flex-start;
-  gap: 103px 18px;
+  gap: 64px 0;
-  padding: 64px 32px;
+  padding: 64px 16px;
   display: flex;
 }
 
@@ -33,40 +36,106 @@
   align-items: center;
   gap: 10px;
   width: 100px;
-  height: 100px;
-  padding: 4px 8px;
   display: flex;
 }
 
 .app-icon .icon {
-  background-color: beige;
+  width: 32px;
-  width: 64px;
+  height: 32px;
-  height: 64px;
+}
+
+@font-face {
+  font-family: Geneva;
+  src: url("Geneva.41461b69.woff2");
+}
+
+@font-face {
+  font-family: Charcoal;
+  src: url("Charcoal.cb9045e5.woff2");
+}
+
+.large-system-font {
+  letter-spacing: .35px;
+  font-family: Charcoal;
+  font-size: 12px;
+}
+
+.small-system-font, .views-font, body {
+  font-family: Geneva;
+}
+
+.adjective {
+  border: 1px solid #555;
+}
+
+.convex {
+  box-shadow: 1px 1px #00000040, inset -1px -1px #00000045, inset 1px 1px #fff;
+}
+
+.border .grey {
+  border: 1px solid #555;
+}
+
+.border .black {
+  border: 1px solid #000;
+}
+
+.shadow .grey {
+  box-shadow: 1px 1px #555;
+}
+
+.shadow .black {
+  box-shadow: 1px 1px #000;
+}
+
+.rows-fill-shadowed {
+  filter: drop-shadow(1px 1px #777);
+  background: linear-gradient(#0000 0%, #fff 0% 50%, #0000 50%) 0 0 / 2px 2px;
+}
+
+.wde-button, .wde-mobile-button {
+  background-color: #ddd;
+  border: 1px solid #000;
+  border-radius: 3px;
+  width: auto;
+  height: 20px;
+  box-shadow: inset -1px -1px #00000045, inset 1px 1px #fff;
+}
+
+.wde-button:active, .wde-mobile-button:active {
+  background-color: #666;
+  box-shadow: inset 1px 1px #00000045, inset -1px -1px gray;
+}
+
+@font-face {
+  font-family: Geneva;
+  src: url("Geneva.41461b69.woff2");
 }
 
 body {
-  zoom: 2;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
   -khtml-user-select: none;
   touch-action: manipulation;
-  background-image: linear-gradient(45deg, silver 25%, #0000 25%), linear-gradient(45deg, #0000 75%, silver 75%), linear-gradient(45deg, #0000 75%, silver 75%), linear-gradient(45deg, silver 25%, #777 25%);
+  background-color: silver;
   background-position: 0 0, 0 0, -5px -5px, 5px 5px;
   background-size: 10px 10px;
   width: 100%;
   height: 100%;
   margin: 0;
+  font-size: 12px;
   position: absolute;
 }
 
 #mobile-app-views {
-  background: #99c;
+  background: #ddd;
   border: 1px solid #000;
-  border-radius: 15px;
+  border-radius: 5px;
   position: absolute;
-  inset: 16px 16px 128px;
+  inset: 16px 16px 100px;
   overflow: hidden;
+  box-shadow: 1px 1px #000;
 }
 
 #controls-bar {
@@ -86,4 +155,14 @@ body {
   height: 100%;
 }
 
+.wde-mobile-button {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 95px;
+  height: 35px;
+  padding-right: 5px;
+  display: flex;
+}
+
 /*# sourceMappingURL=mobile.css.map */

front/dist/mobile.css.map

@@ -1 +1 @@
-{"mappings":"ACAA;;;;ACGA;;;;;;;;;AAWA;;;;;;AAaA;;;;;;;;;;;AAYA;;;;;;;;;;AAYA;;;;;;AFjDA;;;;;;;;;;;;;;;;AAmCA;;;;;;;;;AAYA;;;;;;;;;;;;AAiBA","sources":["src/mobile.less","src/wde/primitives.less","src/wde/sunboard/sunboard-mobile.less"],"sourcesContent":["@import \"./wde/sunboard/sunboard-mobile.less\";\n\nbody{\n    zoom: 2;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 0px;\n\n    /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none; /* Safari */\n     -khtml-user-select: none; /* Konqueror HTML */\n       -moz-user-select: none; /* Old versions of Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n            user-select: none; /* Non-prefixed version, currently\n                                  supported by Chrome, Edge, Opera and Firefox */\n    touch-action: manipulation;\n\n    // /* Auto layout */\n    // display: flex;\n    // flex-direction: column;\n    // align-items: flex-start;\n    // justify-content: flex-start;\n    // margin: 32px;\n\n    background-image:\n    linear-gradient(45deg,  @col-argent 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%,  @col-argent 75%),\n    linear-gradient(45deg, transparent 75%,  @col-argent 75%),\n    linear-gradient(45deg,  @col-argent 25%, #777777 25%);    \n\n  background-size:10px 10px;       \n\n  background-position:0 0, 0 0, -5px -5px, 5px 5px;\n}\n\n#mobile-app-views{\n    position: absolute;\n    // background-color: aqua;\n    inset: 16px;\n    bottom: 128px;\n    \n    border-radius: 15px;\n    border: 1px solid #000;\n    background: #99C;\n    overflow: hidden;\n}\n\n#controls-bar{\n    position: absolute;\n\n    width: 100%;\n    height: 100px;\n    // background-color: @col-argent;\n    bottom: 0px;\n\n    /* Auto layout */\n    display: flex;\n    // padding: 10px;\n    justify-content: center;\n    align-items: center;\n    gap: 53px;\n    align-self: stretch;\n}\n\n.mobile-app-view{\n    // background-color: burlywood;\n    width: 100%;\n    height: 100%;\n    // position: absolute;\n}",null,null],"names":[],"version":3,"file":"mobile.css.map","sourceRoot":"/__parcel_source_root/"}
+{"mappings":"ACAA;;;;AAAA;;;;ACGA;;;;;;;;;AAWA;;;;;AAaA;;;;;;;;;;;AAYA;;;;;;;;AAaA;;;;;ACnCA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;ACjCA;;;;AAIA;;;;AAMA;;;;AAAA;;;;AAUA;;;;AAAA;;;;AAWA;;;;;AC5BA;;;;;;;;;AACI;;;;;ALCJ;;;;;AAKA;;;;;;;;;;;;;;;;AAwCA;;;;;;;;;;AAaA;;;;;;;;;;;;AAiBA;;;;;AAOA","sources":["src/mobile.less","src/wde/primitives.less","src/wde/sunboard/sunboard-mobile.less","src/theme.less","src/wde/effects.less","src/wde/widgets/button/button.less"],"sourcesContent":["@import \"./wde/sunboard/sunboard-mobile.less\";\n@import \"./theme.less\";\n@import \"./wde/effects.less\";\n@import \"./wde/widgets/button/button.less\";\n\n@font-face{\n    font-family: \"Geneva\";\n    src:url(\"./fonts/Geneva.woff2\");\n} \n\nbody{\n    &:extend(.views-font);\n    // zoom: 2;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 0px;\n\n\n    font-size: 12px;\n\n    /* font: normal 14px Summer Pixel 22, \"res/SummerPixel22Regular.ttf\"; */\n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none; /* Safari */\n     -khtml-user-select: none; /* Konqueror HTML */\n       -moz-user-select: none; /* Old versions of Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n            user-select: none; /* Non-prefixed version, currently\n                                  supported by Chrome, Edge, Opera and Firefox */\n    touch-action: manipulation;\n\n    background-color: @col-argent;\n    // /* Auto layout */\n    // display: flex;\n    // flex-direction: column;\n    // align-items: flex-start;\n    // justify-content: flex-start;\n    // margin: 32px;\n\n    // background-image:\n    // linear-gradient(45deg,  @col-argent 25%, transparent 25%),\n    // linear-gradient(45deg, transparent 75%,  @col-argent 75%),\n    // linear-gradient(45deg, transparent 75%,  @col-argent 75%),\n    // linear-gradient(45deg,  @col-argent 25%, #777777 25%);    \n\n  background-size:10px 10px;       \n\n  background-position:0 0, 0 0, -5px -5px, 5px 5px;\n}\n\n#mobile-app-views{\n    position: absolute;\n    // background-color: aqua;\n    inset: 16px;\n    bottom: 100px;\n    \n    border-radius: 5px;\n    border: @eff-border-black;\n    box-shadow: @eff-box-shadow-black;\n    background: @col-gainsboro;\n    overflow: hidden;\n}\n\n#controls-bar{\n    position: absolute;\n\n    width: 100%;\n    height: 100px;\n    // background-color: @col-argent;\n    bottom: 0px;\n\n    /* Auto layout */\n    display: flex;\n    // padding: 10px;\n    justify-content: center;\n    align-items: center;\n    gap: 53px;\n    align-self: stretch;\n}\n\n.mobile-app-view{\n    // background-color: burlywood;\n    width: 100%;\n    height: 100%;\n    // position: absolute;\n}\n\n.wde-mobile-button{\n    &:extend(.wde-button);\n    &:active{\n        &:extend(.wde-button:active);\n    }\n    height: 35px;\n    width: 95px;\n    /* Auto layout */\n    display: flex;\n    // padding: 10px;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding-right: 5px;\n    // gap: 53px;\n    // align-self: stretch;\n}\n\n.wde-mobile-button > .icon{\n    \n    // width: 8rem;\n    // height: 8rem;\n}",null,null,null,null,null],"names":[],"version":3,"file":"mobile.css.map","sourceRoot":"/__parcel_source_root/"}

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

@@ -40,18 +40,20 @@
     height: auto; */
     /* margin-right: -20px; */
 
+    // background-color: aquamarine;
     /* Inside auto layout */
-    flex: none;
+    width: 100%;
-    order: 0;
+    // flex: none;
-    align-self: stretch;
+    // order: 0;
-    flex-grow: 1;
+    // align-self: stretch;
+    // flex-grow: 1;
 
     /* Auto layout */
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0px;
+    // padding: 0px;
-    margin-right: 20;
+    // margin-right: 20;
     gap:15px;
 }
 
@@ -85,10 +87,10 @@
 }
 
 .PropertiesList .Links {
-    position: absolute;
+    // position: absolute;
-    right: 14px;
+    // right: 14px;
-    top: 27px;
+    // top: 27px;
-    /* background-color: aqua; */
+    // background-color: aqua;
     height: auto;
     width: auto;
 

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

@@ -87,7 +87,8 @@ 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")
+        //TODO change icons for every folder
+        // newWindow.querySelector(".title-bar").querySelector(".icon").setAttribute("src","/system/libs/img/icon/get?path=/Icons/GenericFolder.icn&size=16")
         
         // console.log(newWindow.querySelector(".FileTileView"))
         

front/src/apps/finder/finder.js

@@ -21,7 +21,6 @@ export default class Finder extends WDEApplication{
     * @param {import("../../wde/wde.js").runContext} runContext
     */
     async NewWindow(args, runContext){
-        
         let newFinder = new FinderWindow(this, super.WDE())
         await newFinder.Init(this, args, runContext)
     }
@@ -31,7 +30,6 @@ export default class Finder extends WDEApplication{
     * @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)
     }
@@ -50,15 +48,16 @@ export default class Finder extends WDEApplication{
         
         const response = await fetch(`/app/${this.AppId}/renderProps?` + params)
         if (response.status != 200){
-            // WebDesktopEnvironment.Alert("Error in properties render") //TODO
+            this.WDE().Alert("Error in render properties widget") //TODO
             return false
         }
         const html = await response.text()
         
-        let newWindow = super.WDE().Decorat.CreateNewWindow(this.AppId, 350, 500 )
+        let newWindow = this.WDE().Decorat.CreateNewWindow(this.AppId, 350, 500 )
         newWindow.innerHTML = html
-        newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {
+        newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
-            // WebDesktopEnvironment.CloseWindow(newWindow)
+            // console.log(this.WDE().Decorat())
+            this.WDE().Decorat.CloseWindow(newWindow)
         })
     }
 }

front/src/wde/wde-desktop.js

@@ -17,11 +17,14 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
     Decorat
     /** @type {Object<string, WDEApplication>} */
     static Applications = {};
-    /** Deprecated */
+    /** @deprecated */
     static isMobile = false
     // static decorat
     static webFs
 
+    /** @deprecated */
+    basicWindow
+    
     constructor(){
         super("localhost:8080")
         super._SetWDE(this)
@@ -35,9 +38,9 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
     }
 
     async loadWDE(){
-        await this.Open("/Applications/Finder.app", ["/","--desktop", "desktop-layer"])
+        await this.Open("/Applications/Finder.app", ["/home/user/.Desktop","--desktop", "desktop-layer"])
-        // await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
+        await this.Open("/Applications/Finder.app", ["/", ""])
-        await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
+        // await this.Open("/Applications/AboutMe.app", [])
         return
         
         let autoStart = document.body.querySelector("wde-autostart")
@@ -84,6 +87,7 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
     } 
 
     /**
+     * @deprecated
     * @param {string} html
     */
     static SetBasicWindow(html){
@@ -91,6 +95,7 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
     }
 
     /**
+     * @deprecated
     * @returns {string}
     */
     static GetBasicWindow(){
@@ -100,15 +105,15 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
     /**
     * @param {string} alertText
     */
-    static Alert(alertText){
+    Alert(alertText){
-        WebDesktopEnvironment.CreateAlertWindow(alertText)
+        this.#createAlertWindow(alertText)
         console.log(alertText)
     }
 
     /**
     * @param {string} alertText
     */
-    static CreateAlertWindow(alertText){
+    #createAlertWindow(alertText){
         let newWindow = document.createElement("div")
         newWindow.setAttribute("class", "WindowFrameless")
         newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:

front/src/wde/wde.js

@@ -97,6 +97,11 @@ export default class AbstractWebDesktopEnvironment{
     WebFS(){
         return this.#webFS
     }
+
+    /**
+    * @param {string} alertText
+    */
+    Alert(alertText){}
 }
 
 /**

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

@@ -129,7 +129,7 @@ export default class WDEFileView{
         const response = await fetch(`/system/wde/widgets/file-tile-view?` + params)
         if (response.status != 200){
             //TODO Error text message
-            WebDesktopEnvironment.Alert("TODO") //TODO
+            this.#wde.Alert("Error in render folder view") //TODO
             return
         }
         let html = await response.text()

templates/personal-properties/app.html

@@ -4,6 +4,14 @@
 		<div class="PersPropsContent">
 			<div class="PropsView">
 				<div class="PropertiesList">
+					
+					<div class="ShortBio">
+						<img class="Image" src="/system/libs/img/get?path={{ .HeaderProps.IconPath }}" alt="My Photo">
+						<div class="Text">
+							<div class="Name">{{ .HeaderProps.Name }}</div>
+							<div>{{ .HeaderProps.Value1 }}</div>
+							<div>{{ .HeaderProps.Value2 }}</div>
+						</div>
 						<div class="Links">
 							{{ range $link := .Links }}
 								<a href="{{$link.Url}}" target="_blank">
@@ -12,13 +20,6 @@
 								</a>
 							{{ end }}
 						</div>
-					<div class="ShortBio">
-						<img class="Image" src="/system/libs/img/get?path={{ .HeaderProps.IconPath }}" alt="My Photo">
-						<div class="Text">
-							<div class="Name">{{ .HeaderProps.Name }}</div>
-							<div>{{ .HeaderProps.Value1 }}</div>
-							<div>{{ .HeaderProps.Value2 }}</div>
-						</div>
 					</div> 
 					{{ range $island := .Islands }}
 						<!-- FIXME -->

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

@@ -5,7 +5,9 @@
         {{end}}
         <div id="Drag" class="visual-drag-area"></div>
         <!-- TODO:Disable dragging of icon -->
-        <img class="icon">
+        {{if .HasIcon}}
+            <img class="icon" src="/system/libs/img/icon/get?path={{.IconPath}}&size={{.IconSize}}">
+        {{ end }}
         <div class="lable">
             {{.Lable}}
         </div>

wde/titlebar.go

@@ -3,4 +3,7 @@ package wde
 type TitleBarConfig struct {
 	Lable       string
 	CloseButton bool
+	HasIcon     bool
+	IconPath    string
+	IconSize    string
 }