New moderator app WIP:

* #144: moderator notes WIP,
* plugin size: adding an API,
* refactoring the code from the task app, to create a new MUC App
  system.

conversejs/custom/plugins/notes/components/muc-note-app-view.js

@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { api } from '@converse/headless'
+import { MUCApp } from '../../../shared/components/muc-app.js'
+import { tplMUCNoteApp } from '../templates/muc-note-app.js'
+
+/**
+ * Custom Element to display the Notes Application.
+ */
+export default class MUCNoteApp extends MUCApp {
+  enableSettingName = 'livechat_note_app_restore'
+  sessionStorangeShowKey = 'livechat-converse-note-app-show'
+
+  render () {
+    return tplMUCNoteApp(this, this.model)
+  }
+}
+
+api.elements.define('livechat-converse-muc-note-app', MUCNoteApp)

conversejs/custom/plugins/notes/constants.js

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export const XMLNS_NOTE = 'urn:peertube-plugin-livechat:note'

conversejs/custom/plugins/notes/index.js

@@ -0,0 +1,57 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { _converse, converse } from '../../../src/headless/index.js'
+import { XMLNS_NOTE } from './constants.js'
+import { ChatRoomNote } from './note.js'
+import { ChatRoomNotes } from './notes.js'
+import { initOrDestroyChatRoomNotes, getHeadingButtons, getMessageActionButtons } from './utils.js'
+
+import './components/muc-note-app-view.js'
+
+converse.plugins.add('livechat-converse-notes', {
+  dependencies: ['converse-muc', 'converse-disco', 'converse-pubsub'],
+
+  initialize () {
+    Object.assign(
+      _converse.exports,
+      {
+        ChatRoomNotes,
+        ChatRoomNote
+      }
+    )
+
+    _converse.api.settings.extend({
+      livechat_note_app_enabled: false,
+      livechat_note_app_restore: false // should we open the app by default if it was previously oppened?
+    })
+
+    _converse.api.listen.on('chatRoomInitialized', muc => {
+      muc.session.on('change:connection_status', _session => {
+        // When joining a room, initializing the Notes object (if user has access),
+        // When disconnected from a room, destroying the Notes object:
+        initOrDestroyChatRoomNotes(muc)
+      })
+
+      // When the current user affiliation changes, we must also delete or initialize the TaskLists object:
+      muc.occupants.on('change:affiliation', occupant => {
+        if (occupant.get('jid') !== _converse.bare_jid) { // only for myself
+          return
+        }
+        initOrDestroyChatRoomNotes(muc)
+      })
+
+      // To be sure that everything works in any case, we also must listen for addition in muc.features.
+      muc.features.on('change:' + XMLNS_NOTE, () => {
+        initOrDestroyChatRoomNotes(muc)
+      })
+    })
+
+    // adding the "Notes" button in the MUC heading buttons:
+    _converse.api.listen.on('getHeadingButtons', getHeadingButtons)
+
+    // Adding buttons on message:
+    _converse.api.listen.on('getMessageActionButtons', getMessageActionButtons)
+  }
+})

conversejs/custom/plugins/notes/note.js

@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Model } from '@converse/skeletor/src/model.js'
+
+/**
+ * A chat room note.
+ * @class
+ * @namespace _converse.exports.ChatRoomNote
+ * @memberof _converse
+ */
+class ChatRoomNote extends Model {
+  idAttribute = 'id'
+
+  async saveItem () {
+    console.log('Saving note ' + this.get('id') + '...')
+    await this.collection.chatroom.noteManager.saveItem(this)
+    console.log('Note ' + this.get('id') + ' saved.')
+  }
+
+  async deleteItem () {
+    return this.collection.chatroom.noteManager.deleteItems([this])
+  }
+}
+
+export {
+  ChatRoomNote
+}

conversejs/custom/plugins/notes/notes.js

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Collection } from '@converse/skeletor/src/collection.js'
+import { ChatRoomNote } from './note'
+import { initStorage } from '@converse/headless/utils/storage.js'
+
+/**
+ * A list of {@link _converse.exports.ChatRoomNote} instances, representing notes associated to a MUC.
+ * @class
+ * @namespace _converse.exports.ChatRoomNotes
+ * @memberOf _converse
+ */
+class ChatRoomNotes extends Collection {
+  model = ChatRoomNote
+  comparator = 'order'
+
+  initialize (models, options) {
+    this.model = ChatRoomNote // don't know why, must do it again here
+    super.initialize(arguments)
+    this.chatroom = options.chatroom
+
+    const id = `converse-livechat-notes-${this.chatroom.get('jid')}`
+    initStorage(this, id, 'session')
+
+    this.on('change:order', () => this.sort())
+  }
+
+  // async createNote (data) {
+  //   console.log('Creating note...')
+  //   await this.chatroom.NoteManager.createItem(this, Object.assign({}, data))
+  //   console.log('Note created.')
+  // }
+}
+
+export {
+  ChatRoomNotes
+}

conversejs/custom/plugins/notes/templates/muc-note-app.js

@@ -0,0 +1,51 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { converseLocalizedHelpUrl } from '../../../shared/lib/help'
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+export function tplMUCNoteApp (el, mucModel) {
+  if (!mucModel) {
+    // should not happen
+    el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
+    return html``
+  }
+  if (!mucModel.notes) {
+    // too soon, not initialized yet (this will happen)
+    el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
+    return html``
+  }
+
+  if (!el.show) {
+    el.classList.add('hidden')
+    return html``
+  }
+
+  el.classList.remove('hidden')
+
+  // eslint-disable-next-line no-undef
+  const i18nNotes = __(LOC_moderator_notes)
+  // eslint-disable-next-line no-undef
+  const i18nHelp = __(LOC_online_help)
+  const helpUrl = converseLocalizedHelpUrl({
+    page: 'documentation/user/streamers/notes'
+  })
+
+  return html`
+    <div class="livechat-converse-muc-app-header">
+      <h5>${i18nNotes}</h5>
+      <a href="${helpUrl}" target="_blank"><converse-icon
+          class="fa fa-circle-question"
+          size="1em"
+          title="${i18nHelp}"
+      ></converse-icon></a>
+      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
+          <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </button>
+    </div>
+    <div class="livechat-converse-muc-app-body">
+      <livechat-converse-muc-notes .model=${mucModel.notes}></livechat-converse-muc-notes>
+    </div>`
+}

conversejs/custom/plugins/notes/utils.js

@@ -0,0 +1,146 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { XMLNS_NOTE } from './constants.js'
+import { PubSubManager } from '../../shared/lib/pubsub-manager.js'
+import { converse, _converse, api } from '../../../src/headless/index.js'
+import { __ } from 'i18n'
+
+export function getHeadingButtons (view, buttons) {
+  const muc = view.model
+  if (muc.get('type') !== _converse.constants.CHATROOMS_TYPE) {
+    // only on MUC.
+    return buttons
+  }
+
+  if (!muc.notes) { // this is defined only if user has access (see initOrDestroyChatRoomNotes)
+    return buttons
+  }
+
+  // Adding a "Open moderator noteds" button.
+  buttons.unshift({
+    // eslint-disable-next-line no-undef
+    i18n_text: __(LOC_moderator_notes),
+    handler: async (ev) => {
+      ev.preventDefault()
+      // opening or closing the muc notes:
+      const NoteAppEl = ev.target.closest('converse-root').querySelector('livechat-converse-muc-note-app')
+      NoteAppEl.toggleApp()
+    },
+    a_class: '',
+    icon_class: 'fa-note-sticky',
+    name: 'muc-notes'
+  })
+
+  return buttons
+}
+
+export function getMessageActionButtons (messageActionsEl, buttons) {
+  const messageModel = messageActionsEl.model
+  if (messageModel.get('type') !== 'groupchat') {
+    // only on groupchat message.
+    return buttons
+  }
+
+  const muc = messageModel.collection?.chatbox
+  if (!muc?.notes) {
+    return buttons
+  }
+
+  // TODO: button to create a note from a message.
+  // // eslint-disable-next-line no-undef
+  // const i18nCreate = __(LOC_task_create)
+
+  // buttons.push({
+  //   i18n_text: i18nCreate,
+  //   handler: async (ev) => {
+  //     ev.preventDefault()
+  //     api.modal.show('livechat-converse-pick-task-list-modal', {
+  //       muc,
+  //       message: messageModel
+  //     }, ev)
+  //   },
+  //   button_class: '',
+  //   icon_class: 'fa fa-list-check',
+  //   name: 'muc-task-create-from-message'
+  // })
+
+  return buttons
+}
+
+function _initChatRoomNotes (mucModel) {
+  if (mucModel.noteManager) {
+    // already initiliazed
+    return
+  }
+
+  mucModel.notes = new _converse.exports.ChatRoomNotes(undefined, { chatroom: mucModel })
+
+  mucModel.noteManager = new PubSubManager(
+    mucModel.get('jid'),
+    'livechat-notes', // the node name
+    {
+      note: {
+        itemTag: 'note',
+        xmlns: XMLNS_NOTE,
+        collection: mucModel.notes,
+        fields: {
+          name: String,
+          description: String
+        },
+        attributes: {
+          order: Number
+        }
+      }
+    }
+  )
+  mucModel.noteManager.start().catch(err => console.log(err))
+
+  // We must requestUpdate for all message actions, to add the "create note" button.
+  // FIXME: this should not be done here (but it is simplier for now)
+  document.querySelectorAll('converse-message-actions').forEach(el => el.requestUpdate())
+}
+
+function _destroyChatRoomNotes (mucModel) {
+  if (!mucModel.noteManager) { return }
+
+  mucModel.noteManager.stop().catch(err => console.log(err))
+  mucModel.noteManager = undefined
+
+  mucModel.notes = undefined
+
+  // We must requestUpdate for all message actions, to remove the "create note" button.
+  // FIXME: this should not be done here (but it is simplier for now)
+  document.querySelectorAll('converse-message-actions').forEach(el => el.requestUpdate())
+}
+
+export function initOrDestroyChatRoomNotes (mucModel) {
+  if (mucModel.get('type') !== _converse.constants.CHATROOMS_TYPE) {
+    // only on MUC.
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  if (!api.settings.get('livechat_note_app_enabled')) {
+    // Feature disabled, no need to handle notes.
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  if (mucModel.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  // We must check disco features
+  // (if the chat is remote, the server could use a livechat version that does not support this feature)
+  if (!mucModel.features?.get?.(XMLNS_NOTE)) {
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  const myself = mucModel.getOwnOccupant()
+  if (!myself || !['admin', 'owner'].includes(myself.get('affiliation'))) {
+    // User must be admin or owner
+    return _destroyChatRoomNotes(mucModel)
+  }
+
+  return _initChatRoomNotes(mucModel)
+}