Merge remote-tracking branch 'origin' into release/projects

.gitlab-ci.yml

@@ -175,24 +175,6 @@ community:
   tags:
     - deploy
 
-etuc:
-  stage: deployment
-  environment:
-    name: etuc
-    url: https://app.digitalplatformobservatory.org
-  before_script:
-    - npm ci --cache .npm --prefer-offline --only=production
-  script:
-    - echo "$APP_CONFIG_DIGITALPLATFORMOBSERVATORY" > config.json
-    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
-    - npm run build
-    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* etuc@ssh-etuc.happy-dev.fr:~/sib/www/
-  only:
-    - master
-  when: manual
-  tags:
-    - deploy
-
 nantes:
   stage: deployment
   environment:
@@ -229,10 +211,10 @@ paris:
   tags:
     - deploy
 
-toulouse:
+smarttoulouse:
   stage: deployment
   environment:
-    name: toulouse
+    name: smarttoulouse
     url: https://smart-toulouse.happy-dev.fr
   before_script:
     - npm ci --cache .npm --prefer-offline --only=production
@@ -282,3 +264,291 @@ communityhubl:
   when: manual
   tags:
     - deploy
+
+playground:
+  stage: deployment
+  environment:
+    name: playground
+    url: https://playground.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_PLAYGROUND" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* playground@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+casaco:
+  stage: deployment
+  environment:
+    name: casaco
+    url: https://casaco.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_CASACO" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* casaco@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+opteos:
+  stage: deployment
+  environment:
+    name: opteos
+    url: https://opteos.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_OPTEOS" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* opteos@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+fnk:
+  stage: deployment
+  environment:
+    name: fnk
+    url: https://fnk.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_FNK" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* fnk@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+labriqueterie:
+  stage: deployment
+  environment:
+    name: labriqueterie
+    url: https://labriqueterie.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LABRIQUETERIE" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* labriqueterie@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+facttic:
+  stage: deployment
+  environment:
+    name: facttic
+    url: https://facttic.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_FACTTIC" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* facttic@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+cotech:
+  stage: deployment
+  environment:
+    name: cotech
+    url: https://hubl.coops.tech
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_COTECH" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* cotech@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+lelaptop:
+  stage: deployment
+  environment:
+    name: lelaptop
+    url: https://lelaptop.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LELAPTOP" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* lelaptop@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+virtualassembly:
+  stage: deployment
+  environment:
+    name: virtualassembly
+    url: https://virtual-assembly.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_VIRTUAL_ASS" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* virtual-assembly@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+ouisharequebec:
+  stage: deployment
+  environment:
+    name: ouisharequebec
+    url: https://ouishare-quebec.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_OUISHARE" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* ouishare-quebec@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+nouvelleaquitaine:
+  stage: deployment
+  environment:
+    name: nouvelleaquitaine
+    url: https://app.nouvelle-aquitaine.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_NVLE_AQ" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* nouvelle-aquitaine@ssh-nouvelle-aquitaine.happy-dev.fr:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+paca:
+  stage: deployment
+  environment:
+    name: paca
+    url: https://app.paca.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_PACA" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* paca@ssh-paca.happy-dev.fr:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+strasbourg:
+  stage: deployment
+  environment:
+    name: strasbourg
+    url: https://app.strasbourg.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_STRASBOURG" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* strasbourg@ssh-strasbourg.happy-dev.fr:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+bretagne:
+  stage: deployment
+  environment:
+    name: bretagne
+    url: https://app.bretagne.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_BRETAGNE" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* bretagne@ssh-bretagne.happy-dev.fr:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+lemans:
+  stage: deployment
+  environment:
+    name: lemans
+    url: https://app.lemans.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LEMANS" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* lemans@ssh-lemans.happy-dev.fr:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+apidays:
+  stage: deployment
+  environment:
+    name: apidays
+    url: https://apidays.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_APIDAYS" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* apidays@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy

.gitlab/issue_templates/new_instance.md

@@ -0,0 +1,40 @@
+/label ~"New Instance"
+
+# Please fill all these info:
+
+## General info
+
+- Name of the instance: 
+- Domain:
+
+## Settings:
+
+- Does the instance allow people to sign up? **Yes / No**
+- Does the instance want new people to get a welcome email? **Yes / No**
+
+## Federation:
+
+- Which current instance should see this new instance data? **Please provide the info module by module and include the instance itself.**
+- Do those current instances agree to share their public data with this new instance? **Yes / No**
+
+Example:
+
+- *Instance G is the new kid in town*
+- *Instance G wants to only see their dashboard, but want to access the circles of A, B, C, D, E & F.*
+- *Instance G wants to be able to chat with users from A, B, C, D, E & F.*
+- *Instance G wants to be able to see A and B job offers*
+
+Let's say every instances agree to this scenario, the issue should describe the following: 
+
+- Dashboard: G
+- Circles: A, B, C, D, E, F & G
+- Job offers: A, B, F, G
+- Users: A, B, C, D, E, F & G
+- Profile directory: A, B, C, D, E, F & G
+- G agrees that any new instance can see their public data.
+
+## Cosmetics
+
+- Logo: 
+- Favicon: 
+- 4 Colors: 

README.md

@@ -87,7 +87,7 @@ On `config.json`:
 
 Where:
 
-* `xmpp` is your Prosody with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
+* `xmpp` is your [Prosody](https://prosody.im/) with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
 * `authority` is the OpenID Provider. Usually, if you use `djangoldp-account` it's the same as your djangoldp server.
 * `endpoints.users` is the API endpoints for Users on your djangoldp server.
 

client.sample.happy-dev.css

@@ -27,6 +27,12 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-complementary-darken);
+  --color-notification-counter-number: black;
+  --color-notification-summary: #7A7F85;
+  --solid-notifications-theme: var(--color-primary);
+  --color-notification-item-border: #E4E8ED;
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: #BDC2D7;
   --color-user-panel-header-text: var(--color-complementary-darken);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);

src/components/hubl-search-users.js

@@ -5,7 +5,7 @@ const HublSearchUsers = widgetFactory(
   `<input
     data-holder
     autocomplete="off"
-    placeholder="\${label}"
+    placeholder="\${label} (^ + K)"
     type="text"
     name="\${name}"
     value="\${escapedValue}"

src/dependencies.pug

@@ -11,7 +11,7 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer)
 script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer)
     //- script(type="module" src="/lib/solid-router/src/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.4" defer)
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.6.2" defer)
     //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 if endpoints.events || (endpoints.get && endpoints.get.events)
@@ -31,7 +31,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://unpkg.com/@startinblox/component-chat@0.7" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.8" defer)
     //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
 
 script(src="/scripts/index.js" defer)

src/header.pug

@@ -2,11 +2,15 @@
   solid-link(next='dashboard')
     img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
 
-sib-notifications.notLoggedIn(
+solid-notifications.notLoggedIn(
   nested-field="inbox"
   bind-user
 )
 
+//- Templates for notifications from circles and from other users
+include views/circle/page-circle-notifications.pug
+include views/user/page-user-notifications.pug
+
 include templates/hubl-user-avatar.pug
 
 details#user-controls.notLoggedIn

src/index.pug

@@ -35,6 +35,10 @@ html(lang="en")
 
         if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
           #job-offers(hidden).no-sidebar.with-padding
+            if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers)
+              hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
+              hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
+              hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
             hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
             hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
             hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
@@ -45,6 +49,11 @@ html(lang="en")
 
         if endpoints.projects || (endpoints.get && endpoints.get.projects)
           #project(hidden).with-sidebar
+            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}`)
+              hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
+              hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
             hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
             hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
             hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
@@ -52,6 +61,11 @@ html(lang="en")
 
         if endpoints.circles || (endpoints.get && endpoints.get.circles)
           #circle(hidden).with-sidebar
+            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}`)
+              hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`)
+              hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`)
             hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
             hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`)
             hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`)

src/menu-left.pug

@@ -1,6 +1,6 @@
 solid-widget(name='hubl-counter')
   template
-    solid-fix-badge(data-src="${value == 'badge' ? src : value}")
+    solid-badge(data-src="${value == 'badge' ? src : value}")
 
 solid-widget(name='hubl-menu-jabberid')
   template
@@ -96,7 +96,7 @@ solid-router#navbar-router(default-route='dashboard')
         div.menu
           div.menu-chevron
             div.menu-icon.icon-arrow-right-circle
-          div.menu-label  Canaux
+          div.menu-label  Cercles
           div.menu-icon.icon-folder-alt
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
@@ -105,7 +105,7 @@ solid-router#navbar-router(default-route='dashboard')
           nested-field='circles'
           fields='circle'
           empty-widget='hubl-create'
-          empty-value='canal'
+          empty-value='cercle'
           widget-circle='hubl-menu-fix-url-circle'
           order-by='circle.name'
           next='circle'

src/page-admin.pug

@@ -20,7 +20,7 @@ nav.jsRightMenu(role='navigation')
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
         solid-route(name='admin-circles')
           li
-            a Canaux
+            a Cercles
       if endpoints.projects || (endpoints.get && endpoints.get.projects)
         solid-route(name='admin-projects')
           li

src/scripts/keyboard-shortcuts.js

@@ -0,0 +1,10 @@
+document.addEventListener("keydown", function (e) {
+  /*
+      CTRL + K : Focus on the user search
+      Keycode 75
+  */
+  if(e.ctrlKey && e.which == 75) {
+    document.querySelector('hubl-search-users > input').focus();
+    e.preventDefault();
+  }
+});

src/scripts/sib-notifications.js

@@ -1,60 +0,0 @@
-//- Update badges from notifications list
-async function updateBadges(element) {
-  const unreadNotifications = new Map();
-  const notifications = element.component.resource;
-  if (!notifications) return;
-  // Generate unread map
-  for (let notification of notifications['ldp:contains']) {
-    if (await notification['unread']) {
-      const object = await notification['object'];
-      unreadNotifications.set(object['@id'], (unreadNotifications.get(object['@id']) || 0) + 1);
-    }
-  }
-  // update badges
-  unreadNotifications.forEach((notifNumber, objectId) => {
-    const badge = document.querySelector(`solid-fix-badge[data-src="${objectId}"]`);
-    if (badge) {
-      badge.innerText = notifNumber || '';
-      badge.style.display = notifNumber ? 'block' : 'none';
-    }
-  })
-}
-document.addEventListener("DOMContentLoaded", function (event) {
-
-  //- Fix badges performances
-  // on load time
-  const checkNotificationMenuExist = setInterval(function () { // wait for notification menu to exist
-    const notifsMenu = document.getElementById('notifications-list');
-    if (notifsMenu) {
-      clearInterval(checkNotificationMenuExist);
-      notifsMenu.addEventListener('populate', (event) => {
-        const checkExist = setInterval(function () { // wait for left menus to exist
-          const subMenus = document.querySelectorAll('.sub-menu > solid-display > div');
-          if (subMenus.length >= 2) {
-            updateBadges(event.target);
-            clearInterval(checkExist);
-          }
-        }, 500);
-      }, {
-        once: true
-      });
-    }
-  }, 500);
-
-  // on refresh notification list
-  window.addEventListener('notificationsRefresh', () => {
-    document.getElementById('notifications-list').addEventListener('populate', (event) => {
-      updateBadges(event.target);
-    }, {
-      once: true
-    });
-  });
-
-  // on read notification
-  window.addEventListener('read', (event) => {
-    if (event.detail && event.detail.resource && event.detail.resource['@id']) {
-      const badge = document.querySelector(`solid-fix-badge[data-src="${event.detail.resource['@id']}"]`);
-      if (badge) badge.style.display = "none";
-    }
-  });
-});

src/scripts/unreads-menu.js

@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
   window.addEventListener('read', (event) => {
     if (event.detail && event.detail.resource && event.detail.resource['@id']) {
-      const badge = document.querySelector(`solid-fix-badge[data-src="${event.detail.resource['@id']}"]`);
+      const badge = document.querySelector(`solid-badge[data-src="${event.detail.resource['@id']}"]`);
       if (badge) badge.parentElement.parentElement.classList.remove('unread');
     }
   });

src/styles/abstracts/_variables.scss

@@ -33,7 +33,6 @@
   --color-main-text: var(--color-grey-4);
   --color-highlight-primary: var(--color-primary);
   --color-user-panel: var(--color-black);
-  --color-bell: var(--color-secondary);
   --color-avatar-background: var(--color-grey-10);
   --color-title: var(--color-secondary);
   --color-h1: var(--color-secondary);
@@ -42,6 +41,12 @@
   /* Header's elements */
   --color-header-background: var(--color-white);
   --color-bell: var(--color-secondary);
+  --color-notification-counter-number: var(--color-white);
+  --color-notification-summary: var(--color-grey-4);
+  --solid-notifications-theme: var(--color-primary);
+  --color-notification-item-border: var(--color-grey-12);
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: var(--color-grey-8);
   --color-user-panel-header-text: var(--color-secondary);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);

src/styles/base/header.scss

@@ -67,17 +67,17 @@ details {
 }
 /* End */
 
-sib-notifications {
+solid-notifications {
   color: var(--color-bell);
 
   @include breakpoint(sm) {
     padding: 0;
   }
 
-  .sib-notifications__container {
+  .solid-notifications__container {
     position: relative;
   
-    .sib-notifications__button {
+    .solid-notifications__button {
       @include icon('bell');
         font-size: 2.5rem;
 
@@ -93,7 +93,7 @@ sib-notifications {
         display: none;
       }
   
-      .sib-notifications__counter {
+      .solid-notifications__counter {
         left: 2rem;
         position: absolute;
         top: 1px;
@@ -102,27 +102,157 @@ sib-notifications {
           left: 2.1rem;
           top: -3px;
         }
+
+        span {
+          color: var(--color-notification-counter-number);
+        }
       }
     }
 
-    .sib-notifications__list {
+    .solid-notifications__triangle-back {
-      overflow-x: hidden;
+      display: none;
+    }
+
+    .solid-notifications__triangle-shadow {
+      display: none;
+
+      @include breakpoint(lg) {
+        background: white;
+        display: block;
+        position: absolute;
+        left: auto;
+        right: -2.1em;
+        top: 5em;
+        transform: initial;
+        width: 0;
+        z-index: 4;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin-left: -5em;
+          top: 0px;
+          left: 50%;
+          border: 1em solid black;
+          border-color: #fff #fff transparent transparent;
+          transform-origin: 0 0;
+          transform: rotate(-45deg);
+          box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+        }
+      }
+    }
+  
+    .solid-notifications__list {
+      border: none;
+      border-radius: 0;
+      box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
+      max-height: calc(100vh - 50px);
       position: fixed;
       left: 0;
-      top: 4.5rem;
+      top: 2.5em;
       width: 100vw;
       
-      @include breakpoint(md) {
+      @include breakpoint(lg) {
-        border: 0;
+        max-height: calc(100vh - 93px);
-        border-radius: 0;
+        position: absolute;
+        left: auto;
+        right: -2.3em;
+        top: 3.99em;
+        width: 347px;
+      }
+
+      /* Custom scrollbar */
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none;
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background);
+
+      &::-webkit-scrollbar-track {
+        background: var(--color-notification-scrollbar-background);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-notification-scrollbar-track);
+        border-radius: 6px;
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      /* End of custom scrollbar */
+
+      .solid-notifications__item {
+        border-bottom: 1px solid var(--color-notification-item-border);
+
+        .solid-notification {
+          padding: 1.2rem 0 1.5rem;
+
+          .solid-notification__avatar {
+            align-items: center;
+            background: var(--color-avatar-background);
+            display: flex;
+            height: 35px;
+            justify-content: center;
+            margin-left: 1.6rem;
+            margin-right: 1.4rem;
+            overflow: hidden;
+            position: relative;
+            vertical-align: middle;
+            width: 35px;
+
+            img {
+              background-color: var(--color-grey-10);
+              height: 100%;
+              object-fit: cover;
+              object-position: center center;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
+
+          .solid-notification__content {
+            font-family: Open Sans, sans-serif;
+
+            .solid-notification__title {
+              font-size: 1.3rem;
+              font-weight: 600;
+
+              .solid-notification__title__side {
+                font-weight: normal;
+              }
+
+              .solid-notification__title__icon {
+                font-family: simple-line-icons;
+              }
+            }
+
+            .solid-notification__summary {
+              color: var(--color-notification-summary);
+              font-size: 1.2rem;
+              line-height: 1.7rem;
+              margin: 1.1rem 0 0;
+
+              @include breakpoint(320px, 388px) {
+                max-width: 226px;
               }
 
               @include breakpoint(lg) {
-        position: absolute;
+                max-width: 256px;
-        left: auto;
+              }
-        right: 0;
+            }
-        top: 5.6rem;
+          }
-        width: 300px;
+
+          .solid-notification__read {
+            display: none;
+          }
+        }
       }
     }
   }

src/styles/base/menu-left.scss

@@ -162,7 +162,7 @@
         width: calc(80vw - 71px);
         display: block;
         background-color: var(--color-secondary);
-        color: var(--color-grey-6);
+        color: var(--color-white);
         border: 1px solid var(--color-grey-4);
         border-radius: 3px;
         padding: 4px;
@@ -182,7 +182,7 @@
         grid-template-areas: "left middle right";
 
         >* {
-          color: var(--color-grey-6);
+          color: var(--color-white);
         }
 
         >[data-id="prev"] {
@@ -227,7 +227,7 @@
           }
 
           >div {
-            color: var(--color-grey-6);
+            color: var(--color-white);
             cursor: pointer;
 
             >hubl-menu-fix-url-circle>solid-display>div,
@@ -292,20 +292,3 @@
     }
   }
 }
-
-// Temporary fix for badges
-solid-fix-badge {
-  display: none;
-  box-sizing: border-box;
-  font-family: sans-serif;
-  font-size: 12px;
-  background-color: var(--sib-notifications-theme, gray);
-  color: #36383a;
-  border-radius: 50%;
-  line-height: 20px;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  font-weight: bold;
-  padding-bottom: 0;
-}

src/views/admin/page-admin-circles-create.pug

@@ -1,7 +1,7 @@
 div.content-box__info.flex
   solid-link(class="backlink right", next='admin-circle-list') Retour
 
-  h1.centered Créer un canal
+  h1.centered Créer un cercle
 
   solid-form.form.button-register(
     data-src=`${endpoints.circles || endpoints.post.circles}`
@@ -12,9 +12,9 @@ div.content-box__info.flex
     class-name='form-label is-light is-full-width input-text-like'
     class-description='form-label is-light is-full-width input-text-like'
 
-    label-status='Statut du canal'
+    label-status='Statut du cercle'
-    label-name='Nom du canal *'
+    label-name='Nom du cercle *'
-    label-description='Sous-titre du canal *'
+    label-description='Sous-titre du cercle *'
 
     widget-status='hubl-status'
     

src/views/admin/page-admin-circles.pug

@@ -31,12 +31,12 @@
 
       div.admin-header.flex
 
-        h3 Canaux
+        h3 Cercles
 
         solid-link(
           class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
           next='admin-circle-create'
-        ) Créer un canal
+        ) Créer un cercle
 
       .table-wrapper
         .table
@@ -56,6 +56,9 @@
               hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${src}')
               hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${src}')
               hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
+              if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+                hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${src}`)
+                hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${src}`)
 
           solid-display(
             class='table-body'
@@ -89,6 +92,9 @@
               hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')
               hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${value}')
               hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
+              if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+                hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${value}`)
+                hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${value}`)
 
           solid-display(
             class='table-body'

src/views/admin/page-admin-projects-create.pug

@@ -19,7 +19,7 @@ div.content-box__info.flex
     
     fields='status, line-1(customer.name, name), description, line-2(captain), logo'
 
-    label-status='Statut du canal*'
+    label-status='Statut du cercle*'
     widget-status='hubl-status'
     class-status='form-label is-light is-full-width'
 

src/views/admin/page-admin-projects.pug

@@ -40,6 +40,9 @@
               hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
               hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
               hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
+              if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+                hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`)
+                hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`)
 
           solid-widget(name='hubl-project-captain')
             template
@@ -109,6 +112,9 @@
               hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
               hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
               hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
+              if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+                hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`)
+                hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`)
 
           solid-display(
             class='table-body'

src/views/admin/page-admin-users-edit.pug

@@ -11,16 +11,14 @@ div.content-box__info.flex
   solid-form.form.button-register(
     bind-resources=''
 
-    fields='line-1(first_name, last_name), line-2(username, email)'
+    fields='line-1(first_name, last_name), line-2(email)'
 
     class-first_name='form-label is-light is-half-width input-text-like'
     class-last_name='form-label is-light is-half-width input-text-like'
-    class-username='form-label is-light is-half-width input-text-like'
+    class-email='form-label is-light is-full-width input-text-like'
-    class-email='form-label is-light is-half-width input-text-like'
 
     label-first_name='Prénom *'
     label-last_name='Nom *'
-    label-username='Nom d\'utilisateur *'
     label-email='E-mail *'
 
     next='admin-user-list'

src/views/circle/page-circle-edit.pug

@@ -44,7 +44,7 @@ div.content-box__info
   solid-link(class="backlink right", bind-resources, next='circle-profile') Retour
 
   solid-ac-checker(permission='acl:Write', bind-resources)
-    h1 Modifie ton canal
+    h1 Modifie ton cercle
 
     solid-form.form.button-register(
       bind-resources
@@ -52,12 +52,12 @@ div.content-box__info
       fields='status, line-1(name, owner), description'
       range-owner=`${endpoints.users || endpoints.get.users}`
 
-      label-status='Statut du canal'
+      label-status='Statut du cercle'
       widget-status='hubl-status'
 
-      label-name='Nom du canal'
+      label-name='Nom du cercle'
       label-owner='Administrateur ou administratrice'
-      label-description='Sous-titre du canal *'
+      label-description='Sous-titre du cercle *'
 
       class-name='form-label is-light is-half-width input-text-like'
       class-owner='form-label is-light is-half-width member-select color'

src/views/circle/page-circle-left.pug

@@ -1,5 +1,5 @@
 #circle-left(hidden)
   div.content-box__info.flex(style="padding: 15px")
 
-    p Tu as quitté ce canal.
+    p Tu as quitté ce cercle.
     p Pour le rejoindre à nouveau, rends-toi dans le panneau <solid-link next="admin-circle-list">administration</solid-link> ou contacte un administrateur.

src/views/circle/page-circle-notifications.pug

@@ -0,0 +1,10 @@
+solid-notifications-template(data-rdf-type='hd:circle')
+  template
+    .solid-notification__avatar
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side dans 
+          span.solid-notification__title__icon ${(await object.status) == 'Public' ? '#' : ''} 
+          | ${await object.name}
+      p.solid-notification__summary ${summary}

src/views/circle/page-circle-profile.pug

@@ -27,7 +27,7 @@ solid-router(default-route='circle-profile', hidden)
         solid-delete(
           class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
           bind-resources
-          data-label='Supprimer le canal'
+          data-label='Supprimer le cercle'
         )
 
       solid-widget(name='hubl-circle-leave-button')
@@ -35,7 +35,7 @@ solid-router(default-route='circle-profile', hidden)
           solid-delete(
             class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
             data-src="${src}"
-            data-label='Quitter le canal'
+            data-label='Quitter le cercle'
           )
 
       solid-widget(name='hubl-circle-join-button')
@@ -52,7 +52,7 @@ solid-router(default-route='circle-profile', hidden)
 
               hubl-inherit-bind-user2input="input[name='user.@id']"
 
-              submit-button='Rejoindre le canal'
+              submit-button='Rejoindre le cercle'
             )
 
       solid-display(

src/views/project/page-project-edit.pug

@@ -11,7 +11,7 @@ div.content-box__info
 	
 	  fields='status, line-1(customer.name, name), description'
 
-    label-status='Statut du canal*'
+    label-status='Statut du cercle*'
     widget-status='hubl-status'
     class-status='form-label is-light is-full-width member-select color'
 

src/views/user/page-user-notifications.pug

@@ -0,0 +1,8 @@
+solid-notifications-template(data-rdf-type='foaf:user')
+  template
+    .solid-notification__avatar
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side en privé
+      p.solid-notification__summary ${summary}