+
${api.settings.get('authentication') === ANONYMOUS
? ''
diff --git a/src/plugins/roomslist/templates/roomslist.js b/src/plugins/roomslist/templates/roomslist.js
index b39fbb9054..b25f6827fb 100644
--- a/src/plugins/roomslist/templates/roomslist.js
+++ b/src/plugins/roomslist/templates/roomslist.js
@@ -3,72 +3,14 @@
* @typedef {import('@converse/headless').MUC} MUC
*/
import { html } from "lit";
-import { _converse, api, u, constants } from "@converse/headless";
+import { api, constants } from "@converse/headless";
import 'plugins/muc-views/modals/add-muc.js';
import 'plugins/muc-views/modals/muc-list.js';
import { __ } from 'i18n';
-import { getUnreadMsgsDisplay } from "shared/chat/utils";
-
import '../styles/roomsgroups.scss';
+import { tplRoomItem } from "shared/roomslist/templates/room-item";
const { CLOSED } = constants;
-const { isUniView } = u;
-
-/** @param {MUC} room */
-function isCurrentlyOpen (room) {
- return isUniView() && !room.get('hidden');
-}
-
-/** @param {MUC} room */
-function tplUnreadIndicator (room) {
- return html`
${ getUnreadMsgsDisplay(room) }`;
-}
-
-function tplActivityIndicator () {
- return html`
`;
-}
-
-/**
- * @param {RoomsList} el
- * @param {MUC} room
- */
-function tplRoomItem (el, room) {
- const i18n_leave_room = __('Leave this groupchat');
- const has_unread_msgs = room.get('num_unread_general') || room.get('has_activity');
- return html`
-
-
- el.openRoom(ev)}>
-
- ${ room.get('num_unread') ?
- tplUnreadIndicator(room) :
- (room.get('has_activity') ? tplActivityIndicator() : '') }
- ${room.getDisplayName()}
-
-
- el.closeRoom(ev)}>
-
-
- `;
-}
/**
* @param {RoomsList} el
diff --git a/src/plugins/roomslist/tests/grouplists.js b/src/plugins/roomslist/tests/grouplists.js
index a2e4c1bd4f..da2781c98c 100644
--- a/src/plugins/roomslist/tests/grouplists.js
+++ b/src/plugins/roomslist/tests/grouplists.js
@@ -107,7 +107,7 @@ describe('A MUC domain group', function () {
await mock.waitForRoster(_converse, 'current', 0);
await mock.openControlBox(_converse);
const controlbox = _converse.chatboxviews.get('controlbox');
- const list = controlbox.querySelector('.list-container--openrooms');
+ const list = controlbox.querySelector('converse-rooms-list .list-container--openrooms');
const nick = 'JC';
const muc_jid = 'room@conference.shakespeare.lit';
_converse.api.rooms.open(muc_jid, { nick });
diff --git a/src/plugins/roomslist/view.js b/src/plugins/roomslist/view.js
index 1b14e515c6..79ee593bce 100644
--- a/src/plugins/roomslist/view.js
+++ b/src/plugins/roomslist/view.js
@@ -19,6 +19,12 @@ export class RoomsList extends CustomElement {
initStorage(this.model, id);
this.model.fetch();
+ this.addEventListeners();
+
+ this.requestUpdate();
+ }
+
+ addEventListeners() {
const { chatboxes } = _converse.state;
this.listenTo(chatboxes, 'add', this.renderIfChatRoom);
this.listenTo(chatboxes, 'remove', this.renderIfChatRoom);
@@ -26,9 +32,8 @@ export class RoomsList extends CustomElement {
this.listenTo(chatboxes, 'change', this.renderIfRelevantChange);
this.listenTo(chatboxes, 'vcard:add', () => this.requestUpdate());
this.listenTo(chatboxes, 'vcard:change', () => this.requestUpdate());
+ this.listenTo(chatboxes, 'bookmark:change', () => this.requestUpdate());
this.listenTo(this.model, 'change', () => this.requestUpdate());
-
- this.requestUpdate();
}
render() {
@@ -42,7 +47,7 @@ export class RoomsList extends CustomElement {
/** @param {import('@converse/headless').Model} model */
renderIfRelevantChange(model) {
- const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
+ const attrs = ['hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
const changed = model.changed || {};
if (u.muc.isChatRoom(model) && Object.keys(changed).filter((m) => attrs.includes(m)).length) {
this.requestUpdate();
@@ -52,7 +57,7 @@ export class RoomsList extends CustomElement {
/** @returns {import('@converse/headless').MUC[]} */
getRoomsToShow() {
const { chatboxes } = _converse.state;
- const rooms = chatboxes.filter((m) => m.get('type') === CHATROOMS_TYPE && !m.get('closed'));
+ const rooms = chatboxes.filter((m) => m.get('type') === CHATROOMS_TYPE && !m.get('closed') && !m.bookmark?.get('pinned'));
rooms.sort((a, b) => (a.getDisplayName().toLowerCase() <= b.getDisplayName().toLowerCase() ? -1 : 1));
return rooms;
}
@@ -82,6 +87,29 @@ export class RoomsList extends CustomElement {
}
}
+ /** @param {Event} ev */
+ pinRoom(ev) {
+ ev.preventDefault();
+ const target = /** @type {HTMLElement} */ (ev.currentTarget);
+ const jid = target.getAttribute('data-room-jid');
+ const { bookmarks } = _converse.state;
+ bookmarks
+ .where({ jid })
+ .forEach(/** @param {import('@converse/headless').Bookmark} b */ (b) =>
+ bookmarks.pinBookmark(b));
+ }
+
+ /** @param {Event} ev */
+ unpinRoom(ev) {
+ ev.preventDefault();
+ const target = /** @type {HTMLElement} */ (ev.currentTarget);
+ const jid = target.getAttribute('data-room-jid');
+ const { bookmarks } = _converse.state;
+ bookmarks
+ .where({ jid })
+ .forEach((b) => bookmarks.unpinBookmark(b));
+ }
+
/** @param {Event} [ev] */
toggleRoomsList(ev) {
ev?.preventDefault?.();
diff --git a/src/shared/roomslist/templates/room-item.js b/src/shared/roomslist/templates/room-item.js
new file mode 100644
index 0000000000..e01dd544f1
--- /dev/null
+++ b/src/shared/roomslist/templates/room-item.js
@@ -0,0 +1,116 @@
+/**
+ * @typedef {import('plugins/roomslist/view').RoomsList} RoomsList
+ * @typedef {import('plugins/bookmark-views/components/bookmarks-pin-list').PinnedBookmarksView} PinnedBookmarksView
+ * @typedef {import('@converse/headless').MUC} MUC
+ */
+import { html } from "lit";
+import { api, u } from "@converse/headless";
+import 'plugins/muc-views/modals/add-muc.js';
+import 'plugins/muc-views/modals/muc-list.js';
+import { __ } from 'i18n';
+import { getUnreadMsgsDisplay } from "shared/chat/utils";
+
+const { isUniView } = u;
+
+/** @param {MUC} room */
+function isCurrentlyOpen (room) {
+ return isUniView() && !room.get('hidden');
+}
+
+/** @param {MUC} room */
+function tplUnreadIndicator (room) {
+ return html`
${ getUnreadMsgsDisplay(room) }`;
+}
+
+function tplActivityIndicator () {
+ return html`
`;
+}
+
+/**
+ * @param {RoomsList|PinnedBookmarksView} el
+ * @param {MUC} room
+ */
+export function tplRoomItem (el, room) {
+ const i18n_leave_room = __('Leave this groupchat');
+ const has_unread_msgs = room.get('num_unread_general') || room.get('has_activity');
+
+ const buttons = [
+ tplRoomMenuItem({
+ room,
+ alt_text: i18n_leave_room,
+ text: __('Leave'),
+ icon_class: 'fa-sign-out-alt',
+ btn_class: 'close-room',
+ handler: (ev) => el.closeRoom(ev)
+ }),
+ ];
+
+ if (api.settings.get('allow_bookmarks')) {
+ if (!room.bookmark?.get('pinned')) {
+ buttons.push(tplRoomMenuItem({
+ room,
+ alt_text: __('Pin this groupchat to the top of the list'),
+ text: __('Pin'),
+ icon_class: 'fa-bookmark',
+ btn_class: 'pin-room',
+ handler: (ev) => el.pinRoom(ev)
+ }))
+ } else {
+ buttons.push(tplRoomMenuItem({
+ room,
+ alt_text: __('Unpin this groupchat from the top of the list'),
+ text: __('Unpin'),
+ icon_class: 'fa-bookmark-empty',
+ btn_class: 'unpin-room',
+ handler: (ev) => el.unpinRoom(ev)
+ }))
+ }
+ }
+
+ return html`
+
+
+ el.openRoom(ev)}>
+
+ ${ room.get('num_unread') ?
+ tplUnreadIndicator(room) :
+ (room.get('has_activity') ? tplActivityIndicator() : '') }
+ ${room.getDisplayName()}
+
+
+
+ `;
+}
+
+/**
+ * @param {Object} config
+ * @param {MUC} config.room
+ * @param {string} config.alt_text
+ * @param {string} config.text
+ * @param {function} config.handler
+ * @param {string} config.icon_class
+ * @param {string} config.btn_class
+ * @returns
+ */
+function tplRoomMenuItem (config) {
+ const { room, alt_text, text, handler, icon_class, btn_class } = config;
+ return html`
+
+ ${text}
+ `;
+}
diff --git a/src/types/entry.d.ts b/src/types/entry.d.ts
index 1f4abfd0bf..55b31d24b5 100644
--- a/src/types/entry.d.ts
+++ b/src/types/entry.d.ts
@@ -21,7 +21,7 @@ declare namespace converse {
* Public API method which explicitly loads Converse and allows you the
* possibility to pass in configuration settings which need to be defined
* before loading. Currently this is only the
- * [assets_path](https://conversejs.org/docs/html/configuration.html#assets_path)
+ * [assets_path](https://conversejs.org/docs/configuration/#assets_path)
* setting.
*
* If not called explicitly, this method will be called implicitly once
diff --git a/src/types/plugins/bookmark-views/components/bookmarks-pin-list.d.ts b/src/types/plugins/bookmark-views/components/bookmarks-pin-list.d.ts
new file mode 100644
index 0000000000..a4e7c4b1cf
--- /dev/null
+++ b/src/types/plugins/bookmark-views/components/bookmarks-pin-list.d.ts
@@ -0,0 +1,5 @@
+export class PinnedBookmarksView extends RoomsList {
+ model: any;
+}
+import { RoomsList } from 'plugins/roomslist/view';
+//# sourceMappingURL=bookmarks-pin-list.d.ts.map
\ No newline at end of file
diff --git a/src/types/plugins/bookmark-views/components/templates/pin-list.d.ts b/src/types/plugins/bookmark-views/components/templates/pin-list.d.ts
new file mode 100644
index 0000000000..8a29663ba1
--- /dev/null
+++ b/src/types/plugins/bookmark-views/components/templates/pin-list.d.ts
@@ -0,0 +1,3 @@
+declare function _default(el: import("plugins/bookmark-views/components/bookmarks-pin-list").PinnedBookmarksView): import("lit-html").TemplateResult<1>;
+export default _default;
+//# sourceMappingURL=pin-list.d.ts.map
\ No newline at end of file
diff --git a/src/types/plugins/controlbox/model.d.ts b/src/types/plugins/controlbox/model.d.ts
index 9dafc68b5d..50551599eb 100644
--- a/src/types/plugins/controlbox/model.d.ts
+++ b/src/types/plugins/controlbox/model.d.ts
@@ -9,7 +9,6 @@ export default ControlBox;
declare class ControlBox extends Model
{
constructor(attributes?: Partial, options?: import("@converse/skeletor").ModelOptions);
defaults(): {
- bookmarked: boolean;
box_id: string;
chat_state: any;
closed: boolean;
diff --git a/src/types/plugins/roomslist/view.d.ts b/src/types/plugins/roomslist/view.d.ts
index 0139f4dadd..3d71742438 100644
--- a/src/types/plugins/roomslist/view.d.ts
+++ b/src/types/plugins/roomslist/view.d.ts
@@ -1,6 +1,7 @@
export class RoomsList extends CustomElement {
initialize(): void;
model: RoomsListModel;
+ addEventListeners(): void;
render(): import("lit-html").TemplateResult<1>;
/** @param {import('@converse/headless').Model} model */
renderIfChatRoom(model: import("@converse/headless").Model): void;
@@ -12,6 +13,10 @@ export class RoomsList extends CustomElement {
openRoom(ev: Event): Promise;
/** @param {Event} ev */
closeRoom(ev: Event): Promise;
+ /** @param {Event} ev */
+ pinRoom(ev: Event): void;
+ /** @param {Event} ev */
+ unpinRoom(ev: Event): void;
/** @param {Event} [ev] */
toggleRoomsList(ev?: Event): void;
/**
diff --git a/src/types/shared/roomslist/templates/room-item.d.ts b/src/types/shared/roomslist/templates/room-item.d.ts
new file mode 100644
index 0000000000..cacb282c56
--- /dev/null
+++ b/src/types/shared/roomslist/templates/room-item.d.ts
@@ -0,0 +1,9 @@
+/**
+ * @param {RoomsList|PinnedBookmarksView} el
+ * @param {MUC} room
+ */
+export function tplRoomItem(el: RoomsList | PinnedBookmarksView, room: MUC): import("lit-html").TemplateResult<1>;
+export type RoomsList = import("plugins/roomslist/view").RoomsList;
+export type PinnedBookmarksView = import("plugins/bookmark-views/components/bookmarks-pin-list").PinnedBookmarksView;
+export type MUC = import("@converse/headless").MUC;
+//# sourceMappingURL=room-item.d.ts.map
\ No newline at end of file