minor: contact implementation

src/dependencies.pug

@@ -40,7 +40,7 @@ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
 if endpoints.users || (endpoints.get && endpoints.get.users)
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.5" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.6" defer)
     //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
 
 //- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13

src/index.pug

@@ -50,6 +50,7 @@ html(lang="en")
 
         if endpoints.projects || (endpoints.get && endpoints.get.projects)
           #project(hidden, data-view="project", no-render).with-sidebar
+            hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects")
             if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
               hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`)
               hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
@@ -62,6 +63,7 @@ html(lang="en")
 
         if endpoints.circles || (endpoints.get && endpoints.get.circles)
           #circle(hidden, data-view="circle", no-render).with-sidebar
+            hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles")
             if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
               hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`)
               hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
@@ -73,6 +75,7 @@ html(lang="en")
             include page-circle.pug
         if endpoints.users || (endpoints.get && endpoints.get.users)
           #messages(hidden, data-view="messages", no-render).with-sidebar
+            hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts")
             include page-messages.pug
 						
         if endpoints.polls || (endpoints.get && endpoints.get.polls)

src/locales/en.json

@@ -15,6 +15,11 @@
       "project": "project",
       "circle": "circle"
     },
+    "contact": {
+      "create": "You don't have any contact, reach the",
+      "profileDir": "profile directory",
+      "create2": "and start a chat with someone"
+    },
     "dashboard": "Dashboard",
     "events": "Events",
     "gov": "Governance",

src/locales/es.json

@@ -15,6 +15,11 @@
       "project": "proyecto",
       "circle": "círculo"
     },
+    "contact": {
+      "create": "You don't have any contact, reach the",
+      "profileDir": "profile directory",
+      "create2": "and start a chat with someone"
+    },
     "dashboard": "Panel de control",
     "events": "Eventos",
     "gov": "Gobernanza",

src/locales/fr.json

@@ -15,6 +15,11 @@
       "project": "projet",
       "circle": "cercle"
     },
+    "contact": {
+      "create": "Tu n'as aucun contact, rends-toi dans",
+      "profileDir": "l'annuaire des membres",
+      "create2": "et lance une discussion avec quelqu'un"
+    },
     "dashboard": "Tableau de bord",
     "events": "Evènements",
     "gov": "Gouvernance",

src/menu-left.pug

@@ -12,6 +12,15 @@ solid-widget(name='hubl-menu-publicprivate')
   template
     div ${value == 'Public' ? '#' : ''}
 
+solid-widget(name='hubl-create-contact')
+  template
+    p.create
+      span(data-trans="menuLeft.contact.create")
+      span  
+      solid-link(next="members" data-trans="menuLeft.contact.profileDir")
+      span  
+      span(data-trans="menuLeft.contact.create2")
+
 solid-widget(name='hubl-create')
   template
     p.create 
@@ -22,6 +31,19 @@ solid-widget(name='hubl-create')
       span  
       solid-link(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
 
+solid-widget(name='hubl-menu-fix-url-contact')
+  template
+    solid-link(data-src="${value}" next="messages")
+      solid-display(
+        data-src='${value}'
+        fields='name, chatProfile.jabberID, badge'
+        value-badge='${value}'
+        widget-badge='hubl-counter'
+        widget-chatProfile.jabberID='hubl-menu-jabberid'
+        widget-name='solid-display-div'
+        order-asc='username'
+      )
+
 solid-widget(name='hubl-menu-fix-url-circle')
   template
     solid-link(data-src="${value}" next="circle")
@@ -33,7 +55,7 @@ solid-widget(name='hubl-menu-fix-url-circle')
         widget-badge='hubl-counter'
         widget-jabberID='hubl-menu-jabberid'
         widget-name='solid-display-div'
-        order-by="name"
+        order-asc="name"
       )
 
 solid-widget(name='hubl-menu-fix-url-project')
@@ -49,7 +71,7 @@ solid-widget(name='hubl-menu-fix-url-project')
         widget-jabberID='hubl-menu-jabberid'
         widget-badge='hubl-counter'
         widget-name='solid-display-div'
-        order-by="customer.name"
+        order-asc="customer.name"
       )
 
 
@@ -110,7 +132,7 @@ solid-router#navbar-router(default-route='dashboard')
           empty-value=''
           data-trans="empty-value=menuLeft.emptyCircleProject.project"
           widget-project='hubl-menu-fix-url-project'
-          order-by="project.customer.name"
+          order-asc="project.customer.name"
         )
     div.divider
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
@@ -139,40 +161,37 @@ solid-router#navbar-router(default-route='dashboard')
           empty-value=''
           data-trans="empty-value=menuLeft.emptyCircleProject.circle"
           widget-circle='hubl-menu-fix-url-circle'
-          order-by="circle.name"
+          order-asc="circle.name"
-        )
-    div.divider
-  if endpoints.users || (endpoints.get && endpoints.get.users)
-    div.menu-wrapper
-      div.menu
-        div.menu-chevron
-          div.menu-icon.icon-arrow-up
-        div.menu-label(data-trans="menuLeft.messages")
-        div.menu-icon.icon-envelope-letter
-      solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
-      div.sub-menu.menu-notification
-        div#loader-messages.loader.loader-menu
-          div
-          div
-          div
-          div
-        solid-display.nosub.message-tab(
-          data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
-          fields='name, chatProfile.jabberID, badge'
-          loader-id='loader-messages'
-          search-fields="name"
-          search-label-name=""
-          data-trans="search-label-name=menuLeft.search"
-          search-widget-name="hubl-search-users"
-          widget-name='solid-display-div'
-          widget-badge='hubl-counter'
-          widget-chatProfile.jabberID='hubl-menu-jabberid'
-          action-badge='badge'
-          order-by='username'
-          next='messages'
-          paginate-by='10'
         )
     div.divider
+  div.menu-wrapper
+    div.menu
+      div.menu-chevron
+        div.menu-icon.icon-arrow-up
+      div.menu-label(data-trans="menuLeft.messages")
+      div.menu-icon.icon-envelope-letter
+    solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
+    div.sub-menu.menu-notification
+      div#loader-messages.loader.loader-menu
+        div
+        div
+        div
+        div
+      solid-display.message-tab(
+        bind-user
+        nested-field='contacts'
+        fields='contact'
+        search-fields="contact.name"
+        search-label-contact.name=""
+        data-trans="search-label-contact.name=menuLeft.search"
+        search-widget-contact.name="hubl-search-users"
+        loader-id='loader-messages'
+        empty-widget='hubl-create-contact'
+        empty-value=''
+        widget-contact='hubl-menu-fix-url-contact'
+        order-asc="contact.username"
+      )
+  div.divider
 
   solid-route(name='admin', hidden)
   solid-route.menu(name='profile', hidden)

src/scripts/intl.js

@@ -187,10 +187,14 @@ document.addEventListener("DOMContentLoaded", () => {
   */
   function recursivePopulate(element) {
     Array.from(element.querySelectorAll('*')).forEach((e) => {
-      e.addEventListener("populate", (e) => {
+      if(e.content && e.content instanceof DocumentFragment) {
-        recursivePopulate(e.target);
+        recursivePopulate(e.content);
-        jsI18n.processNode(e.target);
+      } else if(e instanceof HTMLElement) {
-      });
+        e.addEventListener("populate", (el) => {
+          recursivePopulate(el.target);
+          jsI18n.processNode(el.target);
+        });
+      }
     });
   }
   // Process every children from document

src/styles/base/menu-left.scss

@@ -164,7 +164,7 @@
         }
       }
 
-      solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
+      solid-display>solid-form[fields="contact.name"]>hubl-search-users>input {
         margin-left: 30px;
         margin-bottom: 10px;
         width: calc(80vw - 71px);
@@ -182,28 +182,9 @@
         }
       }
 
-      solid-display.nosub>nav {
+      hubl-create solid-link,
-        text-align: center;
+      hubl-create-contact solid-link {
-        overflow: hidden;
+        display: inline;
-        display: grid;
-        grid-template-columns: auto 50% auto;
-        grid-template-areas: "left middle right";
-
-        >* {
-          color: var(--color-white);
-        }
-
-        >[data-id="prev"] {
-          grid-area: left;
-        }
-
-        >[data-id="next"] {
-          grid-area: right;
-        }
-
-        >span {
-          grid-area: middle;
-        }
       }
 
       hubl-menu-publicprivate {
@@ -218,10 +199,6 @@
         }
       }
 
-      >solid-display.nosub>div>solid-display>div {
-        padding: 1rem 1rem 1rem 3rem;
-      }
-
       solid-display>div {
 
         .create {
@@ -239,7 +216,8 @@
             cursor: pointer;
 
             >hubl-menu-fix-url-circle>solid-link>solid-display>div,
-            >hubl-menu-fix-url-project>solid-link>solid-display>div {
+            >hubl-menu-fix-url-project>solid-link>solid-display>div,
+            >hubl-menu-fix-url-contact>solid-link>solid-display>div {
               padding: 1rem 1rem 1rem 3rem;
             }
           }
@@ -251,7 +229,8 @@
 
         &>solid-display[active]>div,
         &>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
-        &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
+        &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div,
+        &>solid-display>div>hubl-menu-fix-url-contact>solid-link>solid-display[active]>div {
           background-color: var(--color-menu-highlight-primary);
           color: var(--color-menu-text-active);
           font-weight: bold;
@@ -261,13 +240,15 @@
       &.menu-notification {
 
         >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-contact {
           flex: 1;
         }
 
         >solid-display>div>solid-display>div,
         >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display>div,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div {
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-contact>solid-link>solid-display>div {
           display: flex;
           justify-content: space-between;
         }