sub

readme

@@ -16,10 +16,10 @@ The easiest way to connect with others without the need for phone numbers or ema
 - [x] finish completely style/transform exampleTwo
 - [x] src/es/chat/es/components/molecules/Users.js listen to "yjs-users" event dispatched from controller/Users.js with func. detail.getData() and not awareness-change event!!!
 - [x] pimp Router to open new components on certain query parameters (as key) and make room view to choose room or create room
-- [ ] <a href="?page=/chat" route target="_self"><span>chat 👉</span> <a-icon-chat hover-selector="a"></a-icon-chat></a> with a component which asks the room name parameter to attach to link, avoiding the router to make a double route on room parameter set
-- [ ] header controls in dialog (nav modal)
+- [x] header controls in dialog (nav modal)
+- [ ] add an atom listening to yjs-room event and displaying the room name in the header
+- [ ] replace confirm box with input dialog and fix lost username by storing it to local storage
 - [ ] controllers/Rooms.js getting a room event from EventDrivenYjs.js and maintaining the rooms at local storage for further consumption at Rooms view / manifest to fullscreen
-- [ ] fix lost username by storing it to local storage
 - [ ] notification on request per room (deliver through message channel), cache notification at sw cache with room name (cache this location, see MasterServiceWorker.js L:37)
 - [ ] MasterServiceWorker add a Notification Queue which can be read through events
 - [ ] BugFix, persistence clears document before timeout or possible never saved it, research: https://github.com/Weedshaker/y-websocket/blob/master/bin/utils.js#L243

src/css/variables.css

@@ -91,6 +91,7 @@
   --wct-middle-input-input-bg-color-disabled: var(--wct-input-input-bg-color);
   --wct-middle-input-input-bg-color: var(--wct-input-input-bg-color);
   --wct-middle-input-input-color-disabled: var(--wct-input-border);
+  --wct-middle-input-placeholder-color: lightgray;
   background-color: var(--background-color, transparent);
   color: var(--color, white);
   font-family: var(--font-family, sans-serif);
@@ -112,9 +113,6 @@ c-router {
   display: flex;
   height: 100svh;
 }
-
-
-
 /* LOADER: https://www.cssportal.com/css-loader-generator/ */
 .custom-loader {
   margin: auto;

src/es/Environment.js

@@ -8,7 +8,7 @@ self.Environment = {
   isTestingEnv: location.hostname === 'localhost',
   language: currentScriptUrl.searchParams.get('language') || document.documentElement.getAttribute('lang') || 'en',
   stage: currentScriptUrl.searchParams.get('stage') || document.documentElement.getAttribute('stage') || 'alpha',
-  version: currentScriptUrl.searchParams.get('version') || document.documentElement.getAttribute('version') || '3.0.19', // https://semver.org/
+  version: currentScriptUrl.searchParams.get('version') || document.documentElement.getAttribute('version') || '3.0.20', // https://semver.org/
   /**
    * Get custom mobile breakpoint
    * @param {{constructor?: string, tagName?: string, namespace?: string}} organism

src/es/components/atoms/logo/Logo.js

@@ -70,10 +70,8 @@ export default class Logo extends Shadow(WebWorker()) {
     const showPromises = []
     if (this.shouldRenderCSS()) showPromises.push(this.renderCSS())
     if (this.shouldRenderHTML()) showPromises.push(this.renderHTML())
-    Promise.all(showPromises).then(() => {
-      this.addEventListener('click', this.clickEventListener)
-      this.svgs.forEach(svg => svg.addEventListener('animationiteration', this.animationiterationListener))
-    })
+    Promise.all(showPromises).then(() => this.svgs.forEach(svg => svg.addEventListener('animationiteration', this.animationiterationListener)))
+    this.addEventListener('click', this.clickEventListener)
   }
 
   disconnectedCallback () {
@@ -248,9 +246,8 @@ export default class Logo extends Shadow(WebWorker()) {
         opacity: 1 !important;
         transition: none;
       }
-      :host([favicon]) > div.custom-loader > div {
-        width: 2em;
-        height: 2em;
+      :host([favicon]) > div.custom-loader {
+        display: none;
       }
       :host > div.custom-loader > div:before,
       :host > div.custom-loader > div:after {

src/es/components/organisms/body/Body.js

@@ -179,7 +179,7 @@ export default class Body extends Shadow() {
       if (node === this.main || node.getAttribute('slot') || node.nodeName === 'STYLE') return false
       contentDiv.appendChild(node)
     })
-    if (!this.root.contains(this.main)) this.html = this.main
+    this.html = this.main
     return Promise.resolve()
   }
 

src/es/components/organisms/footer/Footer.js

@@ -103,7 +103,7 @@ export default class Footer extends Shadow() {
       if (node === this.footer || node.getAttribute('slot') || node.nodeName === 'STYLE') return false
       this.footer.appendChild(node)
     })
-    if (!this.root.contains(this.footer)) this.html = this.footer
+    this.html = this.footer
     return Promise.resolve()
   }
 

src/es/components/organisms/header/Header.js

@@ -191,7 +191,7 @@ export default class Header extends Shadow() {
       this.header.appendChild(node)
     })
     this.setAttribute('count-header-children', this.header.children.length)
-    if (!this.root.contains(this.header)) this.html = this.header
+    this.html = this.header
     return Promise.resolve()
   }
 

src/es/components/pages/Index.js

@@ -145,14 +145,16 @@ export default class Index extends Mutation() {
                 Join the revolution in communication with Decentral.Ninja - the cutting-edge decentralized chat platform that puts privacy and control back in your hands, ensuring your conversations stay truly confidential.
                 </p>
                 <wct-grid namespace="grid-2colums2rows-" first-container-vertical="" first-column-with="50%" style="text-align:center">
-                <div> 
-                <a href="?page=/chat" route target="_self">
-                  <wct-button namespace="button-primary-">Start Chat</wct-button>
-                </a>
-                </div>
-                <div>       
-                <wct-button namespace="button-secondary-" href="/?page=/chat&room=chat-Questions-And-Feedback" target="_blank">Chat With Us</wct-button>
-                </div>
+                  <section>
+                    <div> 
+                      <a href="?page=/chat" route target="_self">
+                        <wct-button namespace="button-primary-">Start Chat</wct-button>
+                      </a>
+                    </div>
+                    <div>       
+                      <wct-button namespace="button-secondary-" href="/?page=/chat&room=chat-Questions-And-Feedback" target="_blank">Chat With Us</wct-button>
+                    </div>
+                  </section>
                 </wct-grid>
                 <hr>
                 <h4>Our chat, our first set of weapon 武器 at hand which uses:</h4>