Task lists WIP:

* info button

conversejs/custom/plugins/tasks/styles/muc-task-app.scss

@@ -7,6 +7,7 @@
     padding: var(--occupants-padding);
 
     .livechat-converse-muc-app-header {
+      column-gap: 0.25em;
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
@@ -16,8 +17,9 @@
       width: 100%;
 
       h5 {
-        display: inline;
         color: var(--groupchats-header-color-dark);
+        display: inline;
+        flex-grow: 2;
       }
 
       .livechat-converse-muc-app-close {

conversejs/custom/plugins/tasks/templates/muc-task-app.js

@@ -22,9 +22,16 @@ export function tplMUCTaskApp (el, mucModel) {
 
   // eslint-disable-next-line no-undef
   const i18nTasks = __(LOC_tasks)
+  // eslint-disable-next-line no-undef
+  const i18nHint = __(LOC_task_app_info)
   return html`
     <div class="livechat-converse-muc-app-header">
       <h5>${i18nTasks}</h5>
+      <converse-icon
+          class="fa fa-info-circle"
+          size="1em"
+          title="${i18nHint}"
+      ></converse-icon>
       <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
           <converse-icon class="fa fa-times" size="1em"></converse-icon>
       </button>

conversejs/loc.keys.js

@@ -26,7 +26,8 @@ const locKeys = [
   'task_name',
   'task_description',
   'task_delete',
-  'task_delete_confirm'
+  'task_delete_confirm',
+  'task_app_info'
 ]
 
 module.exports = locKeys

languages/en.yml

@@ -446,3 +446,6 @@ task_name: 'Task name'
 task_description: 'Description'
 task_delete: 'Delete task'
 task_delete_confirm: 'Are you sure you want to delete this task?'
+task_app_info: |
+  You can create tasks and task lists, which are shared between all room's admins.
+  See the livechat streamers documentation for more information.