Task lists WIP:

* new icon for the task app
* create task message action

conversejs/custom/plugins/tasks/modals/pick-task-list.js

@@ -0,0 +1,51 @@
+import BaseModal from 'plugins/modal/modal.js'
+import tplPickTaskList from './templates/pick-task-list.js'
+import { api } from '@converse/headless/core'
+import { __ } from 'i18n'
+
+export default class PickTaskListModal extends BaseModal {
+  constructor (options) {
+    super(options)
+    this.muc = options.muc
+    this.message = options.message
+  }
+
+  initialize () {
+    super.initialize(...arguments)
+    this.addEventListener('shown.bs.modal', () => {
+      this.querySelector('select[name="tasklist"]').focus()
+    })
+  }
+
+  getModalTitle () {
+    // eslint-disable-next-line no-undef
+    return __(LOC_task_list_pick_title)
+  }
+
+  renderModal () {
+    return tplPickTaskList(this)
+  }
+
+  onPick (ev) {
+    ev.preventDefault()
+    const tlId = ev.target?.tasklist?.value
+    if (!tlId) { return }
+
+    const tasklists = this.muc.tasklists
+    if (!tasklists) { return }
+
+    const tasklist = tasklists.get(tlId)
+    if (!tasklist) { return }
+
+    const message = this.message
+    tasklist.createTask({
+      name: message.get('nick'),
+      description: message.get('body')
+    }).then(
+      () => this.modal.hide(),
+      console.error
+    )
+  }
+}
+
+api.elements.define('livechat-converse-pick-task-list-modal', PickTaskListModal)

conversejs/custom/plugins/tasks/modals/templates/pick-task-list.js

@@ -0,0 +1,36 @@
+import { html } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import { __ } from 'i18n'
+
+export default function (el) {
+  const muc = el.muc
+  if (!muc?.tasklists?.length) {
+    // eslint-disable-next-line no-undef
+    const i18nEmpty = __(LOC_task_list_pick_empty)
+    return html`<p class="error">${i18nEmpty}</p>`
+  }
+
+  // eslint-disable-next-line no-undef
+  const i18nMessage = __(LOC_task_list_pick_message)
+
+  return html`
+    <form class="converse-form converse-form--modal confirm" action="#" @submit=${ev => el.onPick(ev)}>
+        <div class="form-group">
+            <select class="form-control" name="tasklist">
+              ${
+                repeat(muc.tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
+                  return html`<option value="${tasklist.get('id')}">${tasklist.get('name')}</option>`
+                })
+              }
+            </select>
+            <small class="form-text text-muted">
+              ${i18nMessage}
+            </small>
+        </div>
+
+        <div class="form-group">
+            <button type="submit" class="btn btn-primary">${__('OK')}</button>
+            <input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>
+        </div>
+    </form>`
+}